JavaScript正则表达式替换网页中的可见文本

xdyibdwo  于 2023-09-29  发布在  Java
关注(0)|答案(2)|浏览(90)

我正在寻找匹配字符串在一个.json列表名为“mylist”与可见字符串只在任何网页上任何时候他们出现。匹配的字符串将被替换为“REPLACED!”在脚本中。
最重要的是,脚本应该在现代浏览器上工作,而不是降低页面加载性能。所以我会很感激任何优化技巧!
以下是我目前得到的:

@resource      mylist https://example.com/mylist.json

(function(){
var mylist = JSON.parse(GM_getResourceText("mylist"));
var regexp = new RegExp('\\b(' + mylist.join('|') + ')\\b(?!\\)\\))', "gi");
 
function walk(node) {
    var child, next;
 
    switch ( node.nodeType )
    {
        case 1:
        case 9:
        case 11:
            child = node.firstChild;
            while ( child )
            {
                next = child.nextSibling;
                walk(child);
                child = next;
            }
            break;
 
        case 3:
            handleText(node);
            break;
    }
}
 
function handleText(textNode) {
    textNode.nodeValue = textNode.nodeValue.replace(regexp, 'REPLACED!');
}
 
walk(document.body);
})();

我在这里做了一个示例:https://jsfiddle.net/xgnocwbq/
我面临的最大问题是,在某些页面上,剧本起作用了。在其他人身上,它根本不起作用。例如,在Qwant搜索结果中,我的代码根本不起作用。在Google搜索结果中,它是。

7z5jn7bk

7z5jn7bk1#

JavaScript替换可见文本Regex

首先,你的代码中有一些主要的问题:

***动态内容:**Google或Facebook等网站使用AJAX等特殊方法来刷新和更新内容,而无需重新加载整个页面。您的代码仅在页面首次加载时查看页面一次。如果稍后页面上出现更多内容,您的代码将看不到它。通过使用MutationObserver,您可以轻松处理动态内容。
***性能:**当前您正在遍历每个节点,这在具有大量DOM元素的页面上可能会很慢。使用document.querySelectorAll提高性能。它只抓取文本节点,这是一种更快的方法。
以下是您的代码调整后的版本:

@resource mylist https: //example.com/mylist.json

    (function() {
        var mylist = JSON.parse(GM_getResourceText("mylist"));
        var regexp = new RegExp('\\b(' + mylist.join('|') + ')\\b(?!\\)\\))', "gi");

        function handleText(textNode) {
            textNode.nodeValue = textNode.nodeValue.replace(regexp, 'REPLACED!');
        }

        function processNode(node) {
            if (node.nodeType === 3) {
                handleText(node);
            } else {
                let childNodes = node.querySelectorAll('*');
                childNodes.forEach(processNode);
            }
        }

        // Processes the initial page content
        processNode(document.body);

        // Observes the changes in the DOM to handle dynamic content
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                mutation.addedNodes.forEach(processNode);
            });
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    })();

如果改进后的脚本在某些网站上仍然无法工作,则必须使用浏览器开发人员工具仔细检查该网站,以了解其可能干扰代码的特定行为或障碍。

更新:

请查看this answer,因为它修复了这个问题。

whhtz7ly

whhtz7ly2#

修复@AztecCodes工作,唯一的问题是使用querySelector()函数,而不是使用childNodes属性。

(function() {
  var mylist = JSON.parse(GM_getResourceText("mylist"));
  var regexp = new RegExp('\\b(' + mylist.join('|') + ')\\b(?!\\)\\))', "gi");

  function handleText(textNode) {
      console.log("Replacing text")
      textNode.nodeValue = textNode.nodeValue.replace(regexp, 'REPLACED!');
  }

  function processNode(node) {
      if (node.nodeType === 3) {
          handleText(node);
      } else {
          node.childNodes.forEach(processNode);
      }
  }

  // Processes the initial page content
  processNode(document.body);

  // Observes the changes in the DOM to handle dynamic content
  const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
          mutation.addedNodes.forEach(processNode);
      });
  });

  observer.observe(document.body, {
      childList: true,
      subtree: true
  });
})();

相关问题