如何在原生JavaScript中实现类似jQuery的动态字符串选择器筛选功能？

嘿，我完全懂你的需求——你想要在原生JS里复刻jQuery filter()的核心能力，而且必须支持动态的CSS选择器字符串，不管是标签、类、属性，还是逗号分隔的多选择器组合都得能处理，绝对不能硬编码判断条件对吧？

其实实现起来很简单，关键是利用原生的Element.matches()方法，它专门用来判断元素是否匹配指定的CSS选择器字符串，完美契合你需要的动态场景。

步骤1：编写自定义筛选函数 #

我们先写一个通用的筛选函数，它接收一个元素集合（比如querySelectorAll返回的NodeList）和选择器字符串，返回匹配的元素数组：

function filterElements(elements, selector) {
  // 把NodeList转换为数组，这样就能使用数组的filter方法
  return Array.from(elements).filter(element => {
    // 用matches判断当前元素是否匹配选择器
    return element.matches(selector);
  });
}

步骤2：使用示例 #

用你提到的场景来测试：

1. 先选取所有<div>和<p>元素：

var x = document.querySelectorAll("div, p");

2. 筛选出其中的<div>元素：

var divs = filterElements(x, "div");

3. 处理复杂的动态选择器（比如属性、类、多选择器组合）：

// 筛选带foo='asd'的div，或者拥有.bar类的元素
var complexFiltered = filterElements(x, "div[foo='asd'], .bar");

// 筛选id为hello、带xx='yy'属性的元素，或者所有<p>
var anotherFiltered = filterElements(x, "#hello, [xx='yy'], p");

补充说明 #

• Element.matches()支持所有标准CSS选择器，完全满足你动态选择器的需求，不需要提前知道选择器的具体内容。
• 如果需要兼容非常老旧的浏览器（比如IE11及更早），可以给matches加前缀兼容：

function matchesElement(element, selector) {
  const matchFn = element.matches 
    || element.msMatchesSelector 
    || element.webkitMatchesSelector;
  return matchFn.call(element, selector);
}
// 然后在filter里替换成return matchesElement(element, selector);

不过现在主流浏览器都已经支持标准的matches()方法了，一般不需要额外处理。

• 不建议直接修改NodeList的原型（比如给NodeList.prototype.filter加方法），这可能会和其他代码产生冲突，用独立的函数更安全。

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