如何获取所有包含指定字符串的任意类型网页元素

嗨，这个需求其实很好实现，咱们用原生JavaScript就能搞定，完全不需要依赖类库，也不用管元素的类型或者有没有类、ID这些属性。我给你两种不同场景的解决方案，你可以根据自己的需求选：

方案一：高亮所有包含目标字符串的元素（包括父元素） #

如果只要元素的文本内容（包括子元素的文本）里包含目标字符串就高亮，比如你的例子里，那个包含<span>*** YELLOW ***</span>的<p>标签，因为它的整体文本里有YELLOW，也会被高亮。代码如下：

// 定义要查找的目标字符串
const targetString = "YELLOW";

// 获取页面上所有HTML元素
const allElements = document.querySelectorAll("*");

// 遍历每个元素进行检查
allElements.forEach(element => {
  // 排除script、style这类不显示文本的元素，避免无效处理
  if (['SCRIPT', 'STYLE'].includes(element.tagName)) return;
  
  // 检查元素的文本内容是否包含目标字符串
  if (element.textContent.includes(targetString)) {
    // 给元素添加黄色背景高亮
    element.style.backgroundColor = "yellow";
  }
});

代码说明：

• document.querySelectorAll("*")会选中页面上所有类型的HTML元素，不管是div、p、span还是td都能覆盖到。
• element.textContent会获取元素的所有文本内容（包括子元素的文本），用includes()就能快速判断是否包含目标字符串。
• 排除script和style是因为这些元素的文本不会显示在页面上，没必要处理它们。

方案二：只高亮自身文本包含目标字符串的元素（排除子元素影响） #

如果你不想因为子元素包含目标字符串就高亮父元素，只想高亮那些自己的文本内容里直接有目标字符串的元素（比如你的例子里的单独<div>*** YELLOW ***</div>、<td>*** YELLOW ***</td>，还有嵌套的<span>），可以用这个版本：

const targetString = "YELLOW";
const allElements = document.querySelectorAll("*");

allElements.forEach(element => {
  if (['SCRIPT', 'STYLE'].includes(element.tagName)) return;
  
  let hasTargetText = false;
  // 遍历元素的直接子节点，只检查文本节点的内容
  element.childNodes.forEach(node => {
    // nodeType为3表示是文本节点
    if (node.nodeType === Node.TEXT_NODE && node.textContent.trim().includes(targetString)) {
      hasTargetText = true;
    }
  });
  
  if (hasTargetText) {
    element.style.backgroundColor = "yellow";
  }
});

代码说明：

• 这个版本会逐个检查元素的直接子节点，只看文本节点的内容，这样就不会因为子元素（比如span）包含目标字符串，而误高亮父元素（比如p）。
• node.textContent.trim()是为了排除空文本或者只有空格的情况，避免误判。

你可以把上面的代码直接放到浏览器的控制台里运行，就能看到你的示例HTML里符合条件的元素被黄色高亮啦～

备注：内容来源于stack exchange，提问作者Dominique Bauer