替换文本但保留 google chrome 扩展内容脚本中的链接

Question

我正在尝试替换 google chrome 上的文字，但运行变成了一个问题。我能够成功地替换特定的单词，但它会杀死相关的 html 链接。

如何保持链接有效并替换文本？

这是我的 chrome 扩展内容脚本中的代码：

wordDict = {"the":"piano","and":"Hello", "a":"huh?"};

for (word in wordDict) {
    document.body.innerHTML = document.body.innerHTML.replace(
        new RegExp('\b' + word + '\b',"gi"), wordDict[word]
    );
};

Answer 1

我不是正则表达式方面的专家，所以这是一种在页面上找到一个包含一个词的超链接并将其替换为另一个词的解决方案。

for(var i = 0, l=document.links.length; i<l; i++) {
  if(document.links[i].innerText == "Word"){
    document.links[i].innerText = "Other Word";
  }
}

有了这个你可以避免正则表达式，但你仍然需要循环你的单词对象。

另一方面，既然你说你已经加载了 jQuery，这个 jQuery 解决方案会按照你的意图进行，它会在所有标签中查找单词并替换它们。

jQuery.each( wordDict , function( key, value ) {
  jQuery( "a" ).each(function(){
    if(jQuery(this).text().match(key)) jQuery(this).text(value);
  });
});

第一个 jQuery 每个循环字符串对象，第二个每个循环遍历页面上的所有 a 标记，如果有匹配项，它会根据对象上的值更改元素文本。

Answer 2

好的！ 2周后，我终于解决了这个问题。被忽略的是 DOM 中的子节点。我在下面使用的代码有效地解决了子节点并保持了脚本的原始外观！

function replaceText(jsonArr) {
$("body *").textFinder(function() {
    for (var key in jsonArr) {
        var matcher = new RegExp('\b' + key + '\b', "gi");
        this.data = this.data.replace(matcher, jsonArr[key]);
    }
});
}

// jQuery plugin to find and replace text
jQuery.fn.textFinder = function( fn ) {
this.contents().each( scan );
// callback function to scan through the child nodes recursively
function scan() {
    var node = this.nodeName.toLowerCase();
    if( node === '#text' ) {
        fn.call( this );
    } else if( this.nodeType === 1 && this.childNodes && this.childNodes[0] && node !== 'script' && node !== 'textarea' ) {
        $(this).contents().each( scan );
    }
}
return this;
};

替换文本但保留 google chrome 扩展内容脚本中的链接

Replace text but keep links in google chrome extension content scripts

javascript

text

replace

google-chrome-extension

content-script