我可以在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');

<link>当我只想要有类型的那些时,它给了我所有的元素service/.*

问题:
我可以在QSA选择器中添加正则表达式吗？如果是这样,怎么办？

Answer 1

你不能在选择器中真正使用正则表达式,但CSS选择器足够强大,可以满足您的需要,其灵感来自正则表达式.

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

读取" link具有type以"service"开头的属性的类型的节点

从正式规范:

[ATT ^ = VAL]

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

工作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>

我把它放在一个很好的对象布局中。

Answer 3

该帖子很旧，但可能对某人有帮助。如果like需要子句并且我们不想仅按开头进行搜索，则可以使用以下语法：

document.querySelectorAll('[type*=service]');