Блог

Я хотел знать, могу ли я каким-либо образом вывести HTML после извлечения contents() и выполнения замены для всех текстовых узлов в нем.

jsFiddle: http://jsfiddle.net/bikerabhinav/t8835/1 /

HTML:

 <div id="msg">
    Hi, this is a Textnode _link_<br>
    this is Textnode number 2
    <br /><a href="http://google.com">element node</a>
</div>
  

JS:

 $('#msg').contents().each(function() {
    if(this.nodeType == 3) {
        var u = this.nodeValue;
        var reg = /_link_/g;
        this.nodeValue = u.replace(reg,'<a href="http://google.com">Google</a>');
    }
});
  

ВЫВОД:

 Hi, this is a Textnode <a href="http://google.com">Google</a>
this is Textnode number 2 
element node
  

Что мне нужно:

 Hi, this is a Textnode <a href="http://google.com">Google</a><br> <!-- as a HTML link -->
this is Textnode number 2 <br>
element node
  

PS:

• Я намеренно НЕ использую html() для получения содержимого, выполнения .replace , а затем повторного использования html() для установки значения, потому что исходное приложение, использующее этот фрагмент, имеет сложную структуру (т. Е. Как элемент DOM, на котором он будет выполняться, плюс строка, подлежащая сопоставлению и замене, существует более 30 выражений, которые нуждаются вдля поиска и замены все они являются специальными символами, такими как коды смайликов).

  Однако только текстовые узлы в DOM имеют строку, которая должна быть заменена, и необходимо сохранить внешнюю структуру и элементы html.

Приведенный выше код работает, его просто нет в HTML. Есть ли способ добиться этого?

Если я правильно вас понимаю, я считаю, что это подойдет:

 $('#msg').contents().each(function() {
    if(this.nodeType == 3) {
        var u = this.nodeValue;
        var reg = /_link_/g;
        $(this).replaceWith(u.replace(reg,'<a href="http://google.com">Google</a>'));
    }
});
  

http://jsfiddle.net/t8835/2/

Ваша проблема в том, что вы вставляете HTML в текстовый узел (и поэтому он обрабатывается как текст). Вместо замены _link_ на <a href="http://google.com">Google</a> , вы бы хотели взять текстовый узел, удалить текст _link_ и далее, добавить HTML-узел (который содержит привязку) и поместить весь текст после _link_ в новый текстовый узел после этого.