5

TreeWalker を使用してテキスト ノード内に html タグを挿入したいのですが、TreeWalker によって html ブラケットが & lt; に強制的に挿入されます。& gt; 何を試しても。コードは次のとおりです。

var text;
var tree = document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT);
while (tree.nextNode()) {
    text = tree.currentNode.nodeValue;
    text = text.replace(/(\W)(\w+)/g, '$1<element onmouseover="sendWord(\'$2\')">$2</element>');
    text = text.replace(/^(\w+)/, '<element onmouseover="sendWord(\'$1\')">$1</element>');
    tree.currentNode.nodeValue = text;
}

' の代わりに \< または " を使用しても役に立ちません。私の回避策は、すべての DOM ツリーを文字列にコピーし、html 本体をそれで置き換えることです。これは非常に単純な Web ページで機能し、私の最初の問題を解決しますが、悪いハックであり、些細なページ以外では機能しません. 回避策を使用するのではなく、テキストノードで直接作業できるかどうか疑問に思っていました. (現在バグのある) 回避策のコードは次のとおりです:

var text;
var newHTML = "";
var tree = document.createTreeWalker(document.body);
while (tree.nextNode()) {
    text = tree.currentNode.nodeValue;
    if (tree.currentNode.nodeType == 3){
        text = text.replace(/(\W)(\w+)/g, '$1<element onmouseover="sendWord(\'$2\')">$2</element>');
        text = text.replace(/^(\w+)/, '<element onmouseover="sendWord(\'$1\')">$1</element>');
        }
    newHTML += text
}
document.body.innerHTML = newHTML;

編集:より良い回避策は、テキストノードにカスタムタグを付け((Customtag_Start_Here)など)、DOM全体を文字列にコピーし、カスタムタグを使用してテキストノードを識別し、そのように変更することです。でも、そうする必要がないなら、やめたほうがいい。

4

2 に答える 2