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

Question

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

首先我使用正则表达式匹配 textContent （我为什么使用这种方法是因为我没有 textContent 所在的 div 的 ID 或名称，因此，我不能选择 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

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

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

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

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

Changing the background color of text on a webpage in JavaScript (when element ID or name isn't available)

javascript

background-color

document-body