0

I am attempting to extract a element's id from a selector. For example if I have the following selector body .foo #bar I wish to extract the #bar text. And for #foo:hover I wish to extract #foo. I have created a regular expression that works for all cases except for selectors that contain :, so it doesn't work for my last example #foo:hover. It seems to be greedy and grabs all text #foo:hover instead of just #foo

See here for an example of my issue: https://regex101.com/r/7Rk6AL/2

Can you suggest how I edit my regex to achieve my goal of just getting the selector id and not the :hover part?

sazr
  • 23,396
  • 63
  • 179
  • 330

3 Answers3

1

An ID must begin with a letter and may be followed by any number of letters, digits, hyphens ("-"), underscores ("_"), colons (":"), and periods (".")

Because you do not want things like ::after and :hover, this will work as well

#[a-zA-Z0-9|\-|_|\.]+
bron
  • 1,273
  • 1
  • 8
  • 16
  • Please note that the regex is also true if the first character of the id is not a letter. This is done to handle some `
    ` generators who do not follow the w3c rules. The id's accepted by the regex are also accepted by all browsers.
     – bron Jan 03 '20 at 18:22
0

This is due of you using the .* selector for your id. it won't just stop at the colon. What you could do is replace this selector with a more specific one ([a-zA-Z0-9\-_.], ref).

(#[a-zA-Z0-9_\-.]*)(?:[:|\s]{1})

You can use this regex101 to test more cases.

Nicolas
  • 7,819
  • 3
  • 20
  • 47
0

Seems like this works, if anyone knows a better solution please let me know:

/(#.*?)(:|\s)/gmi

https://regex101.com/r/7Rk6AL/3

sazr
  • 23,396
  • 63
  • 179
  • 330
  • the accepted answer isn't 100% correct. We can start ID's with intergers: https://jsfiddle.net/bvge2uwd/1/ .. related: https://stackoverflow.com/a/6732899/8620333 – Temani Afif Dec 29 '19 at 19:47