JavaScript: Добавить элементы в textNode

Question

Я хочу добавить элемент в textNode. Например: у меня есть функция, которая ищет строку в textNode элемента. Когда я нахожу его, я хочу заменить его на элемент HTML. Есть ли какой-то стандарт для этого? Спасибо.

Answer 1

Вы не можете просто заменить строку, вам нужно будет заменить весь элемент TextNode, начиная с TextNode elements can't contain child elements в DOM.

Итак, когда вы нашли текстовый узел, сгенерировать замену элемента, а затем заменить текстовый узел с функцией аналогично:

function ReplaceNode(textNode, eNode) { 
    var pNode = textNode.parentNode; 
    pNode.replaceChild(textNode, eNode); 
} 

Для того, что в этом случае вы хотите сделать, вам придется разбить кроме текущего текстового узла на два новых текстовых узла и новый элемент HTML. Вот некоторые примеры кода, чтобы указать вам, надеюсь, в правильном направлении:

function DecorateText(str) { 
    var e = document.createElement("span"); 
    e.style.color = "#ff0000"; 
    e.appendChild(document.createTextNode(str)); 
    return e; 
} 

function SearchAndReplaceElement(elem) { 
    for(var i = elem.childNodes.length; i--;) { 
     var childNode = elem.childNodes[i]; 
     if(childNode.nodeType == 3) { // 3 => a Text Node 
      var strSrc = childNode.nodeValue; // for Text Nodes, the nodeValue property contains the text 
      var strSearch = "Special String"; 
      var pos = strSrc.indexOf(strSearch); 

      if(pos >= 0) { 
       var fragment = document.createDocumentFragment(); 

       if(pos > 0) 
        fragment.appendChild(document.createTextNode(strSrc.substr(0, pos))); 

       fragment.appendChild(DecorateText(strSearch)); 

       if((pos + strSearch.length + 1) < strSrc.length) 
        fragment.appendChild(document.createTextNode(strSrc.substr(pos + strSearch.length + 1))); 

       elem.replaceChild(fragment, childNode); 
      } 
     } 
    } 
} 

Может быть JQuery сделал бы это легче, но это хорошо, чтобы понять, почему все эти вещи работает так, как это делает.