Question

我正在使用名为Weboverride的扩展程序来修改我每天使用的支持网站上的格式。以下是我要替换的内容示例：

<div class="longdesc"><pre style="clear:both;word-wrap:break-word;white-space:pre-line;">Update by Beeson,Scott via the web. 

this is a web test

<test type="test">
 Content
</test>
</pre></div>

浏览器呈现如下：

这是一次网络测试

内容

我在weboverride扩展程序中使用以下javascript，尝试将<和>替换为<和>，希望它能正常呈现：

(function () {    
    var nodes = document.getElementsByClassName("longdesc");
    for (var n=0; n<nodes.length; n++) {
        var node = nodes[n].getElementsByTagName("pre");
        node[0].textContent = node[0].textContent.replace("<", "&lt;");
    }
})();

相反，它使代码看起来像这样：

<div class="longdesc"><pre style="clear:both;word-wrap:break-word;white-space:pre-line;">Update by Beeson,Scott via the web. 

this is a web test


 Content

</pre></div>

它似乎只是剥离了一切，我真的不明白为什么，特别是因为我还没有添加>替换。我该怎么做呢？

Answer 1

您正在使用textContent删除HTML标记。请改用innerHTML。

示例：https://jsfiddle.net/rdw6904n/2/

(function () {    
    var nodes = document.getElementsByClassName("longdesc");
    for (var n=0; n<nodes.length; n++) {
        var node = nodes[n].getElementsByTagName("pre");
        if (node.length > 0) {
            node[0].innerHTML = node[0].innerHTML.replace(/</g, "&lt;");
        }
    }
})();

我还在检查中添加了一个检查，以确保您的node数组在尝试访问第一个数组之前有对象。不执行此检查可能会导致您的脚本崩溃，因为您正试图访问innerHTML上的属性（textContent / undefined）（node[0]）

另外，我将.replace的电话改为replace(/</g, "<") /g这意味着全局，因此它将替换所有与<匹配的实例，而不是第一个之一。

Chrome扩展程序中的Javascript可替换某些字符

1 个答案: