JavaScript:在 textNode 中添加元素

问题描述

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

I want to add an element to a textNode. For example: I have a function that search for a string within element's textNode. When I find it, I want to replace with a HTML element. Is there some standard for that?Thank you.

推荐答案

你不能只替换字符串，你必须替换整个 TextNode 元素，因为 TextNode 元素不能包含 DOM 中的子元素.

You can't just replace the string, you'll have to replace the entire TextNode element, since TextNode elements can't contain child elements in the DOM.

因此，当您找到文本节点时，生成替换元素，然后使用类似于以下内容的函数替换文本节点:

So, when you find your text node, generate your replacement element, then replace the text node with a function similar to:

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

对于您想要执行的操作，您必须将当前文本节点拆分为两个新的文本节点和一个新的 HTML 元素.以下是一些示例代码，希望您能指明正确的方向:

For what it appears you want to do, you will have to break apart the current Text Node into two new Text Nodes and a new HTML element. Here's some sample code to point you hopefully in the right direction:

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 会使这更容易，但很高兴理解为什么所有这些东西都按它的方式工作.

Maybe jQuery would have made this easier, but it's good to understand why all of this stuff works the way it does.

这篇关于JavaScript:在 textNode 中添加元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！