Javascript Regex multiple group matches in pattern

Question

I have a question for a Javascript regex ninja: How could I simplify my variable creation from a string using regex grouping? I currently have it working without using any grouping, but I would love to see a better way!

The string is:

var url = 'resources/css/main.css?detect=#information{width:300px;}';

The code that works is:

var styleStr = /[^=]+$/.exec(url).toString();
var id = /[^\#][^\{]+/.exec(styleStr).toString();
var property = /[^\{]+/.exec(/[^\#\w][^\:]+/.exec(styleStr)).toString();
var value = /[^\:]+/.exec(/[^\#\w\{][^\:]+[^\;\}]/.exec(styleStr)).toString();

This gives:

alert(id)       //information
alert(property) //width
alert(value)    //300px

Any takers?

In fact, the grammar of CSS selectors is a little more complex. (See w3.org/TR/CSS2/grammar.html) — Gumbo
– Gumbo, Commented May 18, 2010 at 15:59

Matt · Accepted Answer · 2010-05-18 15:57:11Z

7

Sure..

var url = 'resources/css/main.css?detect=#information{width:300px;}';
var matches = url.match(/#([^{]+){([^:]+):([^;]+)/);
var id = matches[1];
var property = matches[2];
var value = matches[3];

answered May 18, 2010 at 15:57

Matt

44.1k6 gold badges105 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yaxhpal Over a year ago

I think the RegEx for multiple match should be like /RegEx/g, otherwise it will return only first match. So in above answer, it should have been var matches = url.match(/#([^{]+){([^:]+):([^;]+)/g);

Glycerine · Accepted Answer · 2010-05-18 15:58:29Z

1

#(?<type>.+){(?<property>.*?):(?<value>.*?);

Group "type":   information     31      11
Group "property":   width       43       5
Group "value":  300px

[Jay loves regexbuddy]

JS:

result = subject.match(/#([\s\S]+)\{([\s\S]*?):([\s\S]*?);/ig);

answered May 18, 2010 at 15:58

Glycerine

7,3874 gold badges42 silver badges68 bronze badges

Collectives™ on Stack Overflow

Javascript Regex multiple group matches in pattern

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related