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]

从“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>

我为您提供了一个不错的对象布局。

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

2 个答案:

Working JSFiddle