我可以在 querySelectorAll 中使用正则表达式吗？

Posted 2023-05-09

【中文标题】我可以在 querySelectorAll 中使用正则表达式吗？

【英文标题】：Can I use a regular expression in querySelectorAll?

【发布时间】：2013-05-23 09:26:36

【问题描述】：

在我正在做的一个页面上，我最终会得到这样的自定义 link 元素：

<link rel="multiply" type="service/math" src="path/to/service">
<link rel="substract" type="service/math" src="path/to/service">
...

我正在尝试使用 querySelectorAll 检索指定类型为 service/... 的所有链接元素，但无处可去。

目前我正在选择这个：

root.querySelectorAll('link');

当我只想要 service/.* 类型的元素时，这给了我所有 <link> 元素

问题： 我可以将正则表达式添加到 QSA 选择器吗？如果有，该怎么做？

【问题讨论】：

看看这个答案***.com/a/38711853/7250868

【参考方案1】：

您不能真正在选择器中使用正则表达式，但 CSS 选择器的功能足以满足您的需求，它具有受正则表达式启发的“开头”语法。

您可以使用子字符串匹配属性选择器：link[type^=service]

读取“link 类型的节点，属性为type，以“服务”开头

来自formal specification：

[att^=val]

表示具有att属性的元素，其值以前缀“val”开头。如果 "val" 是空字符串，则选择器不代表任何内容。

Working JSFiddle

【讨论】：

@frequent 不客气！对于它的价值，通过元素检查其类型属性的.filter 调用也是一个完全有效的解决方案恕我直言。

这对于尝试使用 Angular JS 1.5+ 中的 Controller-As 语法访问控制器实例很有用。这正是我在使用 controller-as 语法更新我的 Angular 应用程序并希望对其范围进行控制台级访问时所需要的答案：angular.element( document.querySelectorAll( '[ng-controller^="' + <controller name> + '"' )[0] ).scope

【参考方案2】：

我知道这已经 7 岁了，但你就是这样做的（对于属性值）：

function DOMRegex(regex) 
    let output = [];
    for (let i of document.querySelectorAll('*')) 
        if (regex.test(i.type))  // or whatever attribute you want to search
            output.push(i);
        
    
    return output;

console.log(DOMRegex(/^service\//)); // your regex here

<link rel="multiply" type="service/math" src="path/to/service">
<link rel="substract" type="service/math" src="path/to/service">
<link rel="test" type="notservice/math" src="path/to/notservice">
<div id="some-other-node"></div>

要搜索所有元素属性，你可以这样：

function DOMRegex(regex) 
    let output = [];
    for (let i of document.querySelectorAll('*')) 
        for (let j of i.attributes) 
            if (regex.test(j.value)) 
                output.push(
                    'element': i,
                    'attribute name': j.name,
                    'attribute value': j.value
                );
            
        
    
    return output;

console.log(DOMRegex(/(?<!t)service/)); // your regex here

<link rel="multiply" type="service/math" src="path/to/service">
<link rel="substract" type="service/math" src="path/to/service">
<link rel="test" type="notservice/math" src="path/to/notservice">
<div id="some-other-node"></div>

我把它放在一个漂亮的对象布局中。

【讨论】：

我非常喜欢这个，所以我将这两个函数组合成一个参数化函数 - you can find a "gist" of that code here