javascript - JavaScript: textNode に要素を追加する

Question

textNode に要素を追加したい。例: 要素の textNode 内で文字列を検索する関数があります。見つけたら、HTML要素に置き換えたいです。そのための基準はありますか？ありがとうございました。

Answer 1

TextNode 要素には DOM の子要素を含めることができないため、文字列を置き換えるだけではなく、TextNode 要素全体を置き換える必要があります。

そのため、テキスト ノードが見つかったら、置換要素を生成し、テキスト ノードを次のような関数に置き換えます。

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

やりたいことを実行するには、現在のテキスト ノードを 2 つの新しいテキスト ノードと新しい 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 を使えばこれが簡単になったかもしれませんが、これらすべてがこのように機能する理由を理解するのは良いことです。