如何限制querySelectorAll()的嵌套匹配？求简便实现方法

有没有对应的CSS选择器？ #

没有原生CSS选择器能直接实现这种需求。原因有两点：

1. CSS选择器无法直接基于正则文本匹配来筛选元素；
2. 即便借助:has()选择器检查子元素状态，也没法结合文本匹配逻辑，反向排除那些存在子元素满足同一匹配条件的父元素。

简便实现方法 #

通过JavaScript在现有匹配结果的基础上，增加一层过滤逻辑：筛选出匹配正则，且没有子元素（同目标选择器）也匹配该正则的元素。

基础实现代码 #

针对第一个正则的示例：

const targetRegex = /quick\s+brown/;
// 先获取所有匹配正则的div
const allMatches = Array.from(document.querySelectorAll("div")).filter(el => targetRegex.test(el.innerText));
// 过滤掉有子div匹配同一正则的元素
const finalMatch = allMatches.find(el => {
  const childMatches = el.querySelectorAll("div");
  return !Array.from(childMatches).some(child => targetRegex.test(child.innerText));
});

可复用封装函数 #

如果需要多次调用，可以封装成通用函数：

function getTargetElement(selector, regex) {
  const allElements = Array.from(document.querySelectorAll(selector));
  // 先筛选出所有匹配正则的元素
  const regexMatches = allElements.filter(el => regex.test(el.innerText));
  // 找到第一个没有子元素（同选择器）匹配正则的元素
  return regexMatches.find(el => {
    const childElements = el.querySelectorAll(selector);
    return !Array.from(childElements).some(child => regex.test(child.innerText));
  });
}

// 使用示例
const quickBrownElement = getTargetElement("div", /quick\s+brown/);
const lazyDogElement = getTargetElement("div", /the\s+lazy\s+dog/);

逻辑说明 #

1. 第一步先筛选出所有满足正则文本匹配的目标元素；
2. 第二步对这些元素做二次过滤：检查当前元素的所有子元素（同选择器）中，是否存在也能匹配该正则的元素，若不存在则保留该元素；
3. 最终得到的就是符合需求的唯一元素——即自身匹配正则，且没有子元素匹配同一正则的最具体（最内层）匹配项。

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