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

Question

在我正在做的一个页面上，我最终会得到这样的自定义 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 选择器吗？如果有，该怎么做？

Answer 1

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

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

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

来自formal specification：

[att^=val]

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

Working JSFiddle

Answer 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>

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