Regular expression Javascript all occurrences

Question

I want a regex that match all the occurrences in a string of a certain patter:

\d+

My string is a CSS rule, so I know that it starts with a property and should end with a semicolon. I want to get what is in the middle.

For example, in the string:

margin: 0px 3px 2px;

I wish to get:

0px 3px 2px

I'm trying something like:

margin:\s*?(\d+)px

but it matches only the first. Then I don't know how to say that after the digit, can be two characters (em|px), just one (%) or nothing at all.

Any regex guru can helps me?

I preferred to open a new question, but this post is related to my previuos here: CSS Regular Expression

Split by :, then split by space character. You should get an array containing the 0px, 3px, 2px tokens. The "solution" above may or may not work for all cases, since I don't know the exact format of CSS rule, so you need to look at the specification. — nhahtdh
– nhahtdh, Commented Dec 10, 2012 at 13:38

WTK · Accepted Answer · 2012-12-11 07:55:48Z

1

How about:

// returns array: ["0px", "3px", "2px"]
"margin: 0px 3px 2px;".match(/\d+(?:px|em)?/g)

Use g (global) flag, to match against whole string instead of stopping at first match.

// other example - returns array: ["3em", "2px", "39"]
"margin: 3em 2px 39;".match(/\d+(?:px|em)?/g)

To further clarify how this works:

\d+ matches numbers (one or more following each other)
(?:px|em)? skips capturing (but still matches!) this group - looks for px or em strings. Question mark at the end means that this whole group may not be found (for when there are numbers without units).

Edit: To answer OP concerns from the comment below.

Doing this: new RegExp(/\d+(?:px|em)?/g).exex(mystring) doesn't work because of two reasons. First - you can't provide flags (g) when creating new RegExp from another (which is the case here - /\d+(?:px|em)?/g is equivalent of RegExp object, just like [] is equivalent of new Array(). Correct way of creating RegExp object using new RegExp construct is passing two string arguments. First is pattern, second are flags. So it above would become: new RegExp('\d+(?:px|em)?', 'g'). Second thing is that .exec() method always returns first match (not all) so it won't work for what you're after.

So, to reuse that regular expression in couple of places in your script you would have to assign it to variable, and then pass to .match() function. It could look like this:

var reg = new RegExp('\d+(?:px|em)?', 'g');
// somewhere down the road...
mystring.match(reg);
// and on some other string...
myotherstring.match(reg);

edited Dec 11, 2012 at 7:55

answered Dec 10, 2012 at 13:44

WTK

17.1k6 gold badges39 silver badges46 bronze badges

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

2 Comments

Davide Over a year ago

This works ... sincerly I don't understand why this works "mystring.match(/\d+(?:px|em)?/g)" and this don't new RegExp(/\d+(?:px|em)?/g).exex(mystring) .. I'm going to study again the methods :) Thank you very much

WTK Over a year ago

I've updated my answer to address your concerns about why your approach with new RegExp... doesn't work.

user160820 · Accepted Answer · 2012-12-10 13:44:30Z

0

I think instead of margin:\s*?(\d+)px you should try margin:.*?;

with back reference something like

margin:(.*?);

answered Dec 10, 2012 at 13:44

user160820

15.3k22 gold badges72 silver badges95 bronze badges

Comments

Nick.T · Accepted Answer · 2012-12-10 13:46:31Z

0

Maybe you need this :

var re = /^\w+:(.+);$/;
var st = "margin: 0px 3px 3px;";
re.exec(st);

or fiddle about with it in Regex Tester. Keep the website in your favorites for future uses

answered Dec 10, 2012 at 13:46

Nick.T

5774 silver badges20 bronze badges

Collectives™ on Stack Overflow

Regular expression Javascript all occurrences

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related