JavaScript：在 textNode 中添加元素答案

【问题标题】：JavaScript: Add elements in textNodeJavaScript：在 textNode 中添加元素
【发布时间】：2011-04-27 04:55:55
【问题描述】：

我想向 textNode 添加一个元素。例如：我有一个在元素的 textNode 中搜索字符串的函数。当我找到它时，我想用 HTML 元素替换。有什么标准吗？谢谢。

【问题讨论】：

你/你想用jQuery吗？
对不起，我不能。但是顺便说一句，向其他人展示你的解决方案......
你已经有了搜索字符串的功能，或者你也在问这个？

【解决方案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 会让这件事变得更容易，但很高兴能理解为什么所有这些东西都能以它的方式工作。

【讨论】：

你有例子吗？谢谢。