Matching css selectors with RegExp doesn't work in browser

Question

I try to match css selectors as can be seen here: https://regex101.com/r/kI3rW9/1 . It matches the teststring as desired, however when loading a .js file to test it in the browser it fails both in firefox and chrome.

The .js file:

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

In the browser it returns:["#left_nav ", "#left_nav", index: 0, input: "#left_nav .buildings #rfgerf .rtrgrgwr .rtwett.ww-w .tw:ffwwwe"]

So it appears it only captures the first selector with and without the whitespace, despite the whitespace beeing outside the () and the global flag set.

Edit: So either looping over RegExp.exec(text) or just using String.match(str) will lead to the correct solution. Thanks to Wiktor's answer i was able to implement a convenient way of calling this functionality:

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

I decided however using /([\.|#][a-zA-Z][a-zA-Z0-9.:_-]*) ?/g over the suggested

/([.#][a-zA-Z][a-zA-Z0-9.:_-]*)(?!\S)/g because it matches with 44 vs. 60 steps on regex101.com on my teststring.

You're misunderstanding the Global flag. If you want multiple matches, you'll need a loop. — SLaks
– SLaks, Commented Jul 27, 2016 at 15:11
Maybe just use (?!\S)? /([.#][a-zA-Z][a-zA-Z0-9.:_-]*)(?!\S)/g — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Jul 27, 2016 at 15:11
You just need to run the exec in a loop. Or use str.match(/[.#][a-zA-Z][a-zA-Z0-9.:_-]*(?!\S)/g) (regex) — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Jul 27, 2016 at 15:19

Wiktor Stribiżew · Accepted Answer · 2016-07-27 15:35:53Z

You ran exec once, so you got one match object. You'd need to run it inside a loop.

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

A regex with a (?!\S) lookaround at the end (that fails the match if there is no non-whitespace after your main consuming pattern) will allow simpler code:

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

Note that you should consider using regex literal notation when defining your static regexps. Only prefer constructor notation with RegExp when your patterns are dynamic, have some variables or too many / that you do not want to escape.

Look also at [.#]: the dot does not have to be escaped and | inside is treated as a literal pipe symbol (not alternation operator).

Collectives™ on Stack Overflow

Matching css selectors with RegExp doesn't work in browser

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related