Regex to match ids in a css file?

Question

With the following input:

#element{ color: #333; }
#element2,
.element3,
.whatever{ background: red; }

.test,
.test2, .test3,
#test111,
.element5555, #fooooooter{ display: none; }

#element8 tr .bacon{ font-size: 10000em; }

How do I use regex to match these:

#element  
#element2  
#element8
#test111

And not match these:

#333

I tried more variations so far and I can't come up with anything useful.

This is what I tried the latest:

(#).*[{]

But it seems to skip some selectors.

This is non-trivial for a few reasons. There's a lot of ambiguity between words and color identifiers. The following are all valid colors: `#abc`, `#beefee`, `#a12`, `#beef12`. Differentiating those from IDs won't be 100% perfect. You could ignore text between `{` braces `}`, but they can span multiple lines. You might be able to throw a `:` into the mix and get something good enough for your needs, but a perfect multi-line regex is non-trivial. Be wary of any simple-looking answers below, if you need something perfect. — Jim Stewart, Sep 21 '13 at 23:00
How come nobody has posted [the Chtulhu link](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags) yet? Don't use regex to parse structured information. — tripleee, Sep 22 '13 at 06:59
@tripleee all people answered this, don't like to parse these kind of dirty strings with regex patterns but they like to use their minds figuring out how to solve new problems come to mind, and also regex, apart from it's meaning (*regular expression*), is more than dirty to be used for just dirty things! — revo, Sep 22 '13 at 07:39

score 5 · Accepted Answer · edited May 23 '17 at 12:33

5

#-?[_a-zA-Z]+[_a-zA-Z0-9-]*(?=[^}]*\{)

It explicitly matches valid characters in CSS selector. Which characters are valid in CSS class names/selectors?

http://regexr.com?36e6v

Don't forget to remove comments and quotation like content: '{}' before applying this regex. Matching comments and quotations is possible with regex. Remove it using unrolling skill, separately. (I think unrolling is complicated and inefficient enough to rule the integration out.)

It does match color if {} blocks are nested as are in Sass, less

edited May 23 '17 at 12:33

Community

1
1

answered Sep 22 '13 at 08:03

Herrington Darkholme

5,979
1
27
43

If you do need parse structured text, RegExp shall be the last resort you turn to, though. – Herrington Darkholme Sep 22 '13 at 08:18

devavx · Answer 2 · 2013-09-21T23:05:15.307

0

OK,Check out this one,it exactly matches what you need;

^\#[a-z]+[0-9]* //(Multiline = true)

If you need to capture ID Name,use this;

^\#(?<IDName>[a-z]+[0-9]*)  //(Multiline = true)

This regex has a capture group named IDName which gives you name of the ID.

Demo here.

edited Sep 21 '13 at 23:05

answered Sep 21 '13 at 22:42

devavx

1,035
9
22

Sry, I don't want "element", I want "any ID". Fixed the question. – Frantisek Sep 21 '13 at 22:43
2

If the color is something like `#aaa`, this will match. – kalley Sep 21 '13 at 22:52
@Kalley Well,see if it matches *#aaa* or *#fooooooter* now,check out the demo. – devavx Sep 21 '13 at 23:01
http://regexr.com?36e59 – Frantisek Sep 21 '13 at 23:05

kalley · Answer 3 · 2013-09-21T23:20:33.273

0

Okay, I think I got it (http://regexr.com?36e5i):

#[^{,;]*(?:[{,\n]) will also match ids followed by other selectors (eg., #element8 tr .bacon)

#[^ {,;]*(?:[ {,\n]) will only match ids only (so you'd get the #element8 part from the example above, but not the rest)

edited Sep 21 '13 at 23:20

answered Sep 21 '13 at 22:56

kalley

18,072
2
39
36

Almost: http://regexr.com?36e4t – Frantisek Sep 21 '13 at 22:59
Updated, with a couple options based on what you need. – kalley Sep 21 '13 at 23:20

Ek1234 · Answer 4 · 2013-09-22T06:48:02.570

0

try this /#[^1-9]+/g

var t=" #element ";
var p=t.search(/#[^1-9]+/g);
alert(p);

or /#[^1-9.@#$%^&*()!]+/g if want to remove more symbols other then numbers

edited Sep 22 '13 at 06:48

answered Sep 22 '13 at 06:31

Ek1234

407
3
7
17

revo · Answer 5 · 2013-09-22T10:15:12.160

0

Upadated based on a comment

This will work for you:

/(?![^{]+})(#\S+)\b/g

Check it here: http://regex101.com/r/rF9iR9

edited Sep 22 '13 at 10:15

answered Sep 22 '13 at 07:17

revo

47,783
14
74
117

Naughty `linear-gradient` will break this... http://regex101.com/r/bP2bN3 – Herrington Darkholme Sep 22 '13 at 08:13
Yet Another CSS3 problem from box-shadow... http://regex101.com/r/pX9kY1 – Herrington Darkholme Sep 22 '13 at 08:39
@HerringtonDarkholme and Yet Another Update. – revo Sep 22 '13 at 09:20
But sadly... `box-shadow` accepts multiple values. `box-shadow: 0 0 10px #fff inset, 0 0 1px #000;` – Herrington Darkholme Sep 22 '13 at 09:57
1

@HerringtonDarkholme it seems like a nightmare. how about newly pattern? – revo Sep 22 '13 at 10:16
That's fine :) ... hold on, did we forget comments and quotations? (I think it's time for me to give up since stackoverflow is complaining about extended discussions...) – Herrington Darkholme Sep 22 '13 at 11:20
It catch `#nightmare:hover` too. – Feb 09 '15 at 17:06

Regex to match ids in a css file?

5 Answers5

Linked