如何在querySelectorAll中使用正则表达式？

Answer 1

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

您可以使用子字符串匹配属性选择器：

link[type^=service]

读取“

link

类型的节点，其属性

type

以“服务”开头

来自正式规范：

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

要搜索all元素属性，你可以使用这个：

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]');

Answer 4

下面的例子：

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

您不能使用正则表达式（Regex），但可以使用CSS选择器为

querySelectorAll()

以及

querySelector()

如下所示。 *你可以看到6.2。子串匹配属性选择器.

link[type^="service"]

可以选择所有

<link>

的

type

属性从

service

开始：

document.querySelectorAll('link[type^="service"]');
// rel="multiply"'s <link> and rel="substract"'s <link>

[type^="service"]

也可以选择所有

<link>

的

type

属性从

service

开始，但我不推荐没有

link

的它，因为它不太具体所以它也可能选择其他元素：

document.querySelectorAll('[type^="service"]');
// rel="multiply"'s <link> and rel="substract"'s <link>

link[type*="service"]

也可以选择所有

<link>

的

type

属性包含

service

：

document.querySelectorAll('link[type*="service"]');
// rel="multiply"'s <link> and rel="substract"'s <link>

此外，

link[src&="service"]

还可以选择所有

<link>

的

src

属性以

service

结尾的：

document.querySelectorAll('link[src&="service"]');
// rel="multiply"'s <link> and rel="substract"'s <link>