如何在嵌套HTML中定位直接包含指定文本的元素

需求：在无ID和类属性的页面中，通过div内的特定文本查找元素，需排除因嵌套关系间接包含目标文本的父div，仅保留直接包含目标文本的div。

原代码（存在问题：会选中所有包含目标文本的父节点）：

function contains(selector, text) {
  var elements = document.querySelectorAll(selector);
  return Array.prototype.filter.call(elements, function(element){
    return RegExp(text).test(element.textContent);
  });
}

console.log(contains('div', 'CORRECT-TEXT'));

对应的HTML结构：

<div>othertext
  <div>othertext
    <div>othertext
      <div>othertext
         <div>othertext CORRECT-TEXT othertext</div>
      </div>othertext
    </div>othertext
  </div>othertext
</div>othertext

解决方案 #

核心思路：不使用textContent（会包含所有子元素文本），而是仅提取元素自身的文本节点内容进行匹配。

修改后的代码：

function containsDirectText(selector, text) {
  const elements = document.querySelectorAll(selector);
  return Array.from(elements).filter(element => {
    // 提取元素自身所有文本节点的内容，拼接成字符串
    const ownText = Array.from(element.childNodes)
      .filter(node => node.nodeType === Node.TEXT_NODE) // 筛选文本节点
      .map(node => node.nodeValue.trim()) // 去除文本前后空白
      .join(' ');
    // 匹配目标文本（可根据需求调整正则修饰符，如忽略大小写加i）
    return RegExp(text).test(ownText);
  });
}

console.log(containsDirectText('div', 'CORRECT-TEXT'));

代码说明 #

1. node.nodeType === Node.TEXT_NODE：筛选出元素的直接子节点中的文本节点，排除子元素节点
2. node.nodeValue.trim()：去除文本节点内容的前后空白，避免无关空格干扰匹配
3. 拼接所有自身文本节点内容后再匹配目标文本，确保仅检测元素自身包含的文本

在给定的HTML结构中，该函数只会返回最内层包含CORRECT-TEXT的div，不会选中任何父级div。

内容的提问来源于stack exchange，提问作者yenssen