将css选择器与RegExp进行匹配'无法在浏览器中工作

Matching css selectors with RegExp doesn't work in browser

本文关键字：工作 浏览器 选择器 css RegExp      更新时间：2023-09-26

我尝试匹配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:ffwwwe"]

因此，它似乎只捕获了带有和不带有空格的第一个选择器，尽管空格在（）和全局标志集之外。

编辑：因此，无论是在RegExp.exc（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

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

您运行了一次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));

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

还可以看看[.#]：点不必转义，内部的|被视为文字管道符号（而不是交替运算符）。

相关文章：