Блог

При нахождении текстового узла (nodeType = 3), как поработать с его HTML?

В смысле, предположим, что значение текстового узла (data или textContent) This is textual content , как окружить это HTML — скажем, жирным шрифтом…сделайте это This is textual content .

Изменение textContent также записывает теги HTML — <b>This is textual content</b>

Как заставить его отображать как This is textual content .

Javascript / Jquery

Ваш вопрос кажется довольно сырым DOM, но вы упомянули jQuery.

Необработанный материал DOM:

Вы можете создать b элемент, вставить его перед текстовым узлом, а затем переместить в него текстовый узел (живой пример):

 function wrapNode(textNode, tagName) {
    var wrapper = document.createElement(tagName);
    textNode.parentNode.insertBefore(wrapper, textNode);
    wrapper.appendChild(textNode);
    return wrapper;
}
  

Другой способ — манипулировать innerHTML свойством родительского текстового узла Element , но если вы это сделаете, обратите внимание, что все элементы-потомки, которые вы обновляете таким образом, заменяются (поэтому у новых не будет обработчиков событий и тому подобного, привязанных к старым).

Дальнейшее чтение:

• Спецификация ядра DOM2 — очень широко поддерживается
• Спецификация DOM2 HTML — очень широко поддерживается
• Спецификация ядра DOM3 — в основном поддерживается, но вам нужно определить некоторые функции
• Интерфейсы HTML5 DOM — поддержка варьируется

jQuery:

jQuery в основном не предоставляет вам необработанные текстовые узлы, он более Element сфокусирован. Но вы могли бы взглянуть на его wrap функции , wrapAll , и wrapInner . wrapInner вероятно, ближе всего к тому, что вы хотите (живой пример):

 $(parent_element_selector).click(function() {
  $(this).wrapInner("<b>").unbind("click");
});
  

Используйте $(selector).html('<strong>Something here</strong>');

или

создайте класс в CSS, а затем используйте addClass(); для родительского элемента текста

С помощью jQuery вы можете .wrapInner() добавить тег вокруг некоторого текста. Например, со следующим HTML

 <span>Text goes here</span>
  

Вы можете использовать следующий код jQuery для добавления <b> тегов

 $('span').wrapInner('<b>');
  

В результате получается следующий HTML:

 <span><b>Text goes here</b></span>
  

Вы также можете попробовать это так:

HTML

 <div id="test">
    This is textual content
</div>
  

JavaScript

 $('#test').wrapInner('<strong>');
  

Это окружит все внутри #test strong тегом.

Чтобы расширить ответ T.J, чтобы он лучше соответствовал требованиям OP, предоставленная функция не может быть вызвана в цикле (перебирающий узлы).

Лично мне пришлось преобразовать все прямые текстовые узлы в span, очень похоже на то, на что намекал OP (путем ссылки nodeType==3 ).

Проблема в том, что при преобразовании узлов внутри цикла он сбрасывает индекс!Вот несколько точно настроенных кодов, которые преобразуют все текстовые узлы в обернутые узлы (оптимизированные):

 for(var txtnodes=[],nodes=XXXX.childNodes,i=0,j=nodes.length;i<j;i  ) {
 if(nodes[i].nodeType==3) txtnodes[txtnodes.length] = nodes[i];
}
for(var m=0,n=txtnodes.length;m<n;m  ) {
 var span = document.createElement('span');
 pg.insertBefore(span,txtnodes[m]);
 span.appendChild(txtnodes[m]);
}
  

Эта функция эффективно «сохраняет их на потом» и преобразует их после факта. Все объявления переменных сжаты и встроены, и все циклы оптимизированы для длинных деревьев узлов.

В Google нет других статей на эту тему, так что счастливого кодирования всем будущим искателям приключений.