JavaScript 改变网页文本的背景颜色（当元素ID或名称不可用时）

Question

我想要实现的是，加载 web 页面后，在其中找到一些文本并突出显示文本。 到目前为止，我编写的代码如下。

首先，我使用正则表达式匹配textContent （为什么我使用这种方法是因为我没有textContent所在的div的 ID 或名称，因此，我不能为 go 获取getElementsByName()或getElementById() ） . 为了检查文本是否存在，我首先比较它的长度，然后继续突出显示它。

我找到的文本位于text变量的索引 0 处。 我无法访问backgroundColor()方法，这就是它现在被注释掉的原因。 我可以访问fontcolor()但即使它似乎也不起作用。

我是 JS 的新手，所以一些方向将不胜感激。

• 我想知道为什么fontcolor()即使我可以访问它也不起作用。
• 解决这个问题的最佳方法是什么，因为我无法访问backgroundColor() 。

(function highlightText(){ 
   let text = document.body.textContent.match(/abcxyz/);
   if (text[0].length == 6)
   {
      text[0].fontcolor('yellow');
      //text[0].backgroundColor('yellow');
      console.log(text[0]);                //prints abcxyz
      return text[0];
   }
   return null;
})()

解决方案：该方法基于@forlen 提供的解决方案：

我所做的是遍历所有节点，如果textContent与正则表达式匹配，则将它们推入一个数组，我知道我想要的是根元素，所以我得到了数组的最后一个元素并更改了它的backgroundColor 。

    (function highlightText() {
        let allNodes = document.body.getElementsByTagName("*");
    
        var arr= [];
        for (let node of allNodes) {
           if (node.textContent.match(/abcxyz/)) {
               arr.push(node);
           }
        }
    
        text = arr[(arr.length)-2];
        text.style.backgroundColor = "yellow";
    })();

Answer 1

我建议遍历 body 中的所有节点并像这样更改样式：

(function highlightText() {
        let allNodes = document.body.getElementsByTagName("*");

        for (let node of allNodes) {
           if (node.textContent === "abcxyz") {
              node.style.color = "yellow";
           }
        }
     })();