小编Nor*_*les的帖子

使用元素替换TextNode中间的文本

我想在TreeWalker的文本节点中插入html标签,但TreeWalker强制我的html括号进入< > 无论我尝试过什么.这是代码:

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;
}
Run Code Online (Sandbox Code Playgroud)

使用\ <或"而不是'将无济于事.我的解决方法是将所有DOM树复制到一个字符串并用它替换html主体.它适用于非常简单的网页并解决我的第一个问题,但是糟糕的黑客攻击并不会在一个简单的页面上工作.我想知道我是否可以直接使用文本节点而不是使用解决方法.以下是(当前错误)解决方法的代码:

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;
Run Code Online (Sandbox Code Playgroud)

编辑:我意识到更好的解决方法是自定义标记文本节点((Customtag_Start_Here)等),将整个DOM复制到字符串,并使用我的海关标签来识别文本节点并以这种方式修改它们.但如果我不必,我宁愿不要.

html javascript dom textnode

1
推荐指数
1
解决办法
1559
查看次数

标签 统计

dom ×1

html ×1

javascript ×1

textnode ×1