62

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

4

2 回答 2

109

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

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

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

从正式规范：

[att^=val]

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

工作 JSFiddle

于 2013-05-28T12:03:14.877 回答
13

我知道这已经 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>

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

于 2020-06-02T03:51:10.790 回答