JavaScript：在textNode中添加元素 [英] JavaScript: Add elements in textNode

问题描述

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

解决方案

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

所以，当你找到你的文本节点时，生成你的替换元素，然后用类似下面的函数替换文本节点：

 函数ReplaceNode（textNode，eNode）{
 var pNode = textNode.parentNode; 
 pNode.replaceChild（textNode，eNode）; 
 
 $ / code> 

对于看起来你想要做的事情，你将不得不分开当前文本节点分成两个新的文本节点和一个新的HTML元素。以下是一些示例代码，希望您指出正确的方向：



 函数DecorateText（str）{
 var e =使用document.createElement（ 跨度）; 
 e.style.color =＃ff0000; 
 e.appendChild（document.createTextNode（str））; 
 return e; 
} 
 
函数SearchAndReplaceElement（elem）{
 for（var i = elem.childNodes.length; i--;）{
 var childNode = elem.childNodes [一世]; 
 if（childNode.nodeType == 3）{// 3 =>一个文本节点
 var strSrc = childNode.nodeValue; //对于文本节点，nodeValue属性包含文本
 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））; （（pos + strSearch.length + 1）< strSrc.length）
 fragment.appendChild（document.createTextNode（strSrc.substr（pos + strSearch.length + 1））
 
 if ）; 
 
 elem.replaceChild（fragment，childNode）; 
 
 
 
 
 
 
 $ b 
也许jQuery本来会让这更容易，但很好理解为什么所有这些东西都按照它的方式工作。
 
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.
解决方案
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);
}
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);
            }
        }
    }
}
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中添加元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！