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
  • 24,984
  • 66
  • 194
  • 362

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,457
  • 1
  • 9
  • 18
  • 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
  • 8,077
  • 4
  • 21
  • 51
0

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

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

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

sazr
  • 24,984
  • 66
  • 194
  • 362
  • 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