javascript - 将 css 选择器与 RegExp 匹配在浏览器中不起作用

Question

我尝试匹配 css 选择器，如下所示: https://regex101.com/r/kI3rW9/1.它根据需要匹配测试字符串，但是当加载 .js 文件以在浏览器中对其进行测试时，它在 firefox 和 chrome 中均失败。

---

.js 文件:

window.onload = function() {
    main();
}
main = function() {
    var regexSel = new RegExp('([\.|#][a-zA-Z][a-zA-Z0-9.:_-]*) ?','g');
    var text = "#left_nav .buildings #rfgerf .rtrgrgwr .rtwett.ww-w .tw:ffwwwe";
    console.log(regexSel.exec(text));
}

在浏览器中返回:["#left_nav ", "#left_nav", index: 0, input: "#left_nav .buildings #rfgerf .rtrgrgwr .rtwett.ww-w .tw:ffwwe"]

所以看起来它只捕获第一个有和没有空格的选择器，尽管空格在 () 和全局标志集之外。

编辑:因此，循环 RegExp.exec(text) 或仅使用 String.match(str) 将导致正确的解决方案。感谢 Wiktor 的回答，我能够实现一种调用此功能的便捷方式:

function Selector(str){
	this.str = str;
}
with(Selector.prototype = new String()){
	toString = valueOf = function () {
		return this.str;
	};
}

Selector.prototype.constructor = Selector;
Selector.prototype.parse = function() {
	return this.match(/([\.|#][a-zA-Z][a-zA-Z0-9.:_-]*) ?/g);
}
//Using it the following way:
var text = new Selector("#left_nav .buildings #rfgerf .rtrgrgwr .rtwett.ww-w .tw:ffwwwe");
console.log(text.parse());

不过我决定使用/([\.|#][a-zA-Z][a-zA-Z0-9.:_-]*) ?/g over the suggested

/([.#][a-zA-Z][a-zA-Z0-9.:_-]*)(?!\S)/g 因为它匹配在我的测试字符串上，regex101.com 上的 44 步与 60 步。

Answer 1

你运行了一次exec，所以你得到了一个匹配对象。您需要在循环内运行它。

var regexSel = new RegExp('([\.|#][a-zA-Z][a-zA-Z0-9.:_-]*) ?','g');
var text = "#left_nav .buildings #rfgerf .rtrgrgwr .rtwett.ww-w .tw:ffwwwe";
while((m=regexSel.exec(text)) !== null) {
  console.log(m[1]);
}

末尾带有 (?!\S) 环视的正则表达式(如果在主要消费模式后没有非空白，则匹配失败)将允许更简单的代码:

var text = "#left_nav .buildings #rfgerf .rtrgrgwr .rtwett.ww-w .tw:ffwwwe";
console.log(text.match(/[.#][a-zA-Z][a-zA-Z0-9.:_-]*(?!\S)/g));

请注意，在定义 static 正则表达式时，您应该考虑使用正则表达式文字表示法。只有当您的模式是动态、有一些您不想转义的变量或太多/ 时，才更喜欢使用RegExp 的构造函数符号。

另请参阅 [.#]:点不必转义，| 内部被视为文字管道符号(不是交替运算符)。