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:ffwwwe"]

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

修改因此，循环使用RegExp.exec（文本）或仅使用String.match（str）将导致正确的解决方案。感谢Wiktor的回答，我能够实现一种调用此功能的便捷方式：

＆＃13;

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());

＆＃13;

我决定使用 /([\.|#][a-zA-Z][a-zA-Z0-9.:_-]*) ?/g超过建议的

/([.#][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时，应考虑使用正则表达式文字表示法。当你的模式动态时，只有RegExp的构造符表示法，有一些变量或者你想要逃避的/太多。

另请注意[.#]：点不必转义，内部|被视为文字管道符号（不是交替运算符）。

使用RegExp匹配css选择器不能在浏览器

1 个答案: