如何用Vanilla JavaScript查找直接包裹指定文本的HTML元素？

当然可以实现，而且能精准定位到直接包裹目标文本的最内层元素，不会把包含该元素的父容器也选进来。

实现思路 #

要达成类似jQuery :contains(text)但排除父元素的效果，核心是两点：

1. 检查元素的直接文本内容（而非所有后代文本的总和）是否包含目标文本
2. 确保该元素的子元素里没有任何一个包含目标文本（避免选中父容器）

代码示例 #

function findDirectTextElements(targetText) {
  const matchedElements = [];
  // 可根据需求缩小遍历范围，比如替换为document.getElementById('container').querySelectorAll('*')
  const allElements = document.body.querySelectorAll('*');

  allElements.forEach(el => {
    // 提取元素自身的直接文本节点内容（排除子元素的文本）
    const directText = Array.from(el.childNodes)
      .filter(node => node.nodeType === Node.TEXT_NODE)
      .map(node => node.textContent.trim())
      .join('');

    // 判断直接文本是否包含目标内容
    const hasTarget = directText.includes(targetText);
    // 判断子元素中是否存在包含目标文本的元素
    const hasMatchingChild = Array.from(el.children).some(child => 
      child.textContent.includes(targetText)
    );

    // 同时满足：自身直接文本含目标，且子元素无匹配，才加入结果
    if (hasTarget && !hasMatchingChild) {
      matchedElements.push(el);
    }
  });

  return matchedElements;
}

// 使用方式
const targetElements = findDirectTextElements('你要找的文本');
// 输出匹配到的元素
console.log(targetElements);

额外优化点 #

• 大小写不敏感匹配：把判断条件改成 directText.toLowerCase().includes(targetText.toLowerCase())
• 精确文本匹配：如果需要完全匹配文本而非包含，将includes替换为directText.trim() === targetText.trim()

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