Question

我正在尝试制作一个Chrome扩展程序来取代单词＆＃34;特朗普＆＃34;有特朗普的图片，但页面显示这个HTML代码：

<img src=\"https://yt3.ggpht.com/-oIA5414kAtc/AAAAAAAAAAI/AAAAAAAAAAA/QpC5YjQBox8/s48-c-k-no/photo.jpg" height=\"30\" width=\"30\" />

而不是图片。

var elements = document.getElementsByTagName('*');

for (var i = 0; i < elements.length; i++) {
    var element = elements[i];

    for (var j = 0; j < element.childNodes.length; j++) {
        var node = element.childNodes[j];

        if (node.nodeType === 3) {
            var text = node.nodeValue;
            //document.body.innerHTML = document.body.innerHTML.replace(/trump/gi, '<img src=\"https://yt3.ggpht.com/-oIA5414kAtc/AAAAAAAAAAI/AAAAAAAAAAA/QpC5YjQBox8/s48-c-k-no/photo.jpg" height=\"30\" width=\"30\" />');
            var replacedText = text.replace(/trump/gi, '<img src=\"https://yt3.ggpht.com/-oIA5414kAtc/AAAAAAAAAAI/AAAAAAAAAAA/QpC5YjQBox8/s48-c-k-no/photo.jpg" height=\"30\" width=\"30\" />');

            if (replacedText !== text) {
                element.replaceChild(document.createTextNode(replacedText), node);
            }
        }
    }
}

我让它工作但是使用这段代码（上面代码中的注释），它偶尔会显着滞后浏览器（或者有时会崩溃页面）：

document.body.innerHTML = document.body.innerHTML.replace(/trump/gi, '<img src=\"https://yt3.ggpht.com/-oIA5414kAtc/AAAAAAAAAAI/AAAAAAAAAAA/QpC5YjQBox8/s48-c-k-no/photo.jpg" height=\"30\" width=\"30\" />');

Answer 1

未经测试，但是您可以用图像元素替换它，而不是用文本节点替换元素吗？

// Replace
document.createTextNode(replacedText)

// With
var img = new Image()
img.width = 30;
img.height = 30;
img.src = "https://yt3.ggpht.com/-oIA5414kAtc/AAAAAAAAAAI/AAAAAAAAAAA/QpC5YjQBox8/s48-c-k-no/photo.jpg";

Answer 2

var text = node.nodeValue;

将文本分割到trump，然后在图像节点之间创建新的文本节点。更多的工作，但更清洁。

<强>伪代码：

var s = node.split('trump')
if s.length > 1 {
// replace node with text, img, text, img, ...
var p = node.parentElement
p.insertBefore(text1,node)
p.insertBefore(img1,node)
p.insertBefore(text2,node)
p.insertBefore(img2,node)
..
p.removeChild(node)

正如你已经意识到的那样，只需替换innerHTML就会逃避字符串。

另外，请使用Node.TEXT_NODE代替3!

你会如何让它实际显示图像而不是文本？

2 个答案: