Regular expression to get only tag element in css styling string

Question

I am trying to capture selectors with html elements in a style tag string in a nodejs environment.

I need to exclude strings that have # or . in front of them like css style selectors for class and id.

Something is wrong with my regexp, but I don't know where. I tried with negative lookback, but failed.

Current regex that catches all selectors in string: /((([a-zA-Z0-9\[\]\=\"\'\.\-\_/:])*?)\s?\{)/

Link to test: https://regexr.com/5cjl0

Thanks in advance!

I am trying to capture only selectors with html elements in a style tag string in a nodejs environment. — stan.codes
– stan.codes, Commented Sep 23, 2020 at 6:50

Jan · Accepted Answer · 2020-09-23 06:15:35Z

3

If your file is really this well structured you may use

^(?![#.])\S*\s*\{

See a demo on regex101.com. Otherwise use a proper CSS parser instead.

answered Sep 23, 2020 at 6:15

Jan

43.3k11 gold badges57 silver badges87 bronze badges

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

1 Comment

stan.codes Over a year ago

I don't know how it will be structured, but most of the times this should work. Thank you! I am traversing a CSS string in a nodejs env, I don't think I need a CSS parser for now. The only issue with your regex is that in #outlook a{ padding:0; } the anchor tag doesn't get matched.

Inspiraller · Accepted Answer · 2020-09-23 07:14:50Z

2

For a single regex selection - Use below:

^ ensures the next character is at the start of the string
to reduce unnecessary use of additional A-Z in capitals, - /i ensures its any case

example:

const reg = /^[a-z]+$/i

You can add in the $ at the end to be even more explicit as I have done above to ensure the last character is also [a-z]. Since all html tags have no special characters this would be suitable.

For extracting the whole css object into multiple matches from a css file:

(If I have read your request correctly)

const regTags = /(^|\n)\s*([a-z]+)\s*\{[^\}]*\}/gi

Would return

applet {
  color: red;
}

or

div {
  background: blue
}

How to extract all tags using above regex

const arrTags = [];
let arrMatch;
while (arrMatch = regTags.exec(myCssContents)) {
  const strTag = regTags[2];
  console.log(strTag);
  arrTags.push(strTag);
}

edited Sep 23, 2020 at 7:14

answered Sep 23, 2020 at 7:01

Inspiraller

3,8026 gold badges42 silver badges85 bronze badges

2 Comments

stan.codes Over a year ago

That's cool but from the test string I provided in the link I need to extract only a{, img[src="https://example.com"]{, table{ and etc.

Inspiraller Over a year ago

Just remove the last bit and use this: /(^|\n)\s*([a-z]+)\s*\{/gi

Collectives™ on Stack Overflow

Regular expression to get only tag element in css styling string

2 Answers 2

1 Comment

For a single regex selection - Use below:

For extracting the whole css object into multiple matches from a css file:

How to extract all tags using above regex

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

For a single regex selection - Use below:

For extracting the whole css object into multiple matches from a css file:

How to extract all tags using above regex

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related