求助：将含:contains()的jQuery代码转换为原生JavaScript

你的原生JS函数未成功，核心是和jQuery的:contains()行为存在两处关键差异，以及正则特殊字符的处理疏漏：

• jQuery的:contains()是大小写不敏感的匹配
• 直接用RegExp(text)会把文本中的正则元字符（如.、*、?）当成正则语法解析，导致匹配逻辑出错

以下是两种可靠的替代实现：

方案一：使用字符串includes（推荐，更简洁） #

利用字符串includes方法，统一转成小写实现大小写不敏感匹配，同时规避正则的潜在问题：

function contains(selector, text) {
  const lowerText = text.toLowerCase();
  return Array.from(document.querySelectorAll(selector)).filter(element => {
    return element.textContent.toLowerCase().includes(lowerText);
  });
}

// 使用方式
const hoveredProjectActive = contains("#cursor-outer .project__caption", hoveredProject);

方案二：转义正则后匹配 #

如果偏好使用正则，需要先转义文本中的特殊字符，再开启大小写不敏感模式：

// 转义正则特殊字符的工具函数
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

function contains(selector, text) {
  const regex = new RegExp(escapeRegExp(text), 'i');
  return Array.from(document.querySelectorAll(selector)).filter(element => {
    return regex.test(element.textContent);
  });
}

// 使用方式
const hoveredProjectActive = contains("#cursor-outer .project__caption", hoveredProject);

补充说明 #

• 原生JS返回的是DOM元素数组，而jQuery返回的是jQuery对象。如果需要类似jQuery的链式操作（如addClass），可以遍历数组直接操作DOM元素。
• 两种方案均与jQuery的:contains()行为保持一致：匹配元素及其子元素文本中包含目标文本的元素。

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