如何修改contains函数返回所有包含指定文本的div元素数组

问题原因排查 #

你提供的原函数逻辑上本身就是要返回所有匹配元素的数组，出现只返回第一个匹配结果的情况，通常是因为正则构造逻辑有缺陷：如果传入的检索文本包含正则特殊字符（比如.、*、?等）会导致匹配规则异常，或者你需要的是精确全量匹配，原规则做的是模糊包含匹配。

优化修改后的代码 #

function contains(selector, text, ignoreCase = false) {
  // 转义文本中的正则特殊字符，避免匹配异常
  const escapedText = text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  // 构造正则，支持是否忽略大小写
  const matchReg = new RegExp(escapedText, ignoreCase ? 'i' : '');
  // 转成标准数组后过滤匹配元素
  return Array.from(document.querySelectorAll(selector)).filter(element => {
    return matchReg.test(element.textContent.trim());
  });
}

调用示例 #

检索所有包含文本测试内容的div元素，直接调用即可得到所有匹配元素组成的数组：

const matchedDivs = contains('div', '测试内容');
// 输出所有匹配的div元素
console.log(matchedDivs);

如果需要忽略大小写匹配，可以加第三个参数为true：

const matchedDivs = contains('div', 'testcontent', true);

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