解决方法
您不能只是替换字符串,所以您必须从DOM中的
TextNode elements can’t contain child elements替换整个TextNode元素.
因此,当您找到文本节点时,生成替换元素,然后使用类似于以下内容的函数替换文本节点：
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会使这更容易,但很高兴了解为什么所有这些东西都以它的方式工作.
