Regex to convert CSS selector into blocks

Question

I would like to create an Array out of this string:

// string
'a b[text="Fly to San Fran",text2="More"] c foo[text=Fly to San Fran,text2=More] bar d'

// resulting array:
[
    'a',
    'b[t="Fly to San Fran",text2=More]',
    'c',
    'foo[t=Fly to San Fran,text2=More]',
    'bar',
    'd'
]

How would a regex look like to split the string or is this the wrong approach?

So far I tried the following, which results in way too many null values.

/([a-zA-Z]*\[[a-z]*\])|([\w]*)/g

=>
[
   'a',
   null,
   'b[t="Fly to San Fran",text2=More]',
   null,
   'c',
   null
   'foo',
   null,
   [t=Fly to San Fran,text2=More]',
   null,
   'bar',
   null,
   'd'
]

bobble bubble · Accepted Answer · 2023-01-01 13:05:36Z

3

\[[a-z]*\] matches only letters within [...]. But there occur " = , and spaces. Better use negation \[[^\]\[]*\] here. This would match any character that is neither [ nor ] inside.

const s = `a b[text="Fly to San Fran",text2="More"] ` +
          `c foo[text=Fly to San Fran,text2=More] bar d`;

let res = s.match(/[a-zA-Z]*\[[^\]\[]*\]|\w+/g);

res.forEach(element => console.log(element));

edited Jan 1, 2023 at 13:05

answered Jan 1, 2023 at 12:41

bobble bubble

18.8k4 gold badges32 silver badges52 bronze badges

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

4 Comments

Dinkheller Over a year ago

Thanks a lot. I updated the regex to /\w*\[[^\]\[]*\]|\w+/g and it seems to work just as I wanted it. Thanks again.

bobble bubble Over a year ago

Hey @Dinkheller you're welcome and a good new year. :)

The fourth bird Over a year ago

^hap{2}y\s+202(?![0124-9])\d!$

bobble bubble Over a year ago

🙂 Thank you @\b\d(?<![^4])th 🐦 You too happy 2023! ✨

Spectric · Accepted Answer · 2023-01-01 01:22:55Z

Using a regex in this case would be extremely tedious.

I would recommend using a CSS selector parsing library.

In the following example, we can use the parsel library to tokenize the selector, then reduce over the tokens to combine the adjacent ones.

const str = `a b[text="Fly to San Fran",text2="More"] c foo[text=Fly to San Fran,text2=More] bar d`
const tokens = parsel.tokenize(str).map(e => e.content)
const res = tokens.slice(1).reduce((acc, curr) => {
  const prev = acc[acc.length - 1]
  return curr == " " || prev == " " ? acc.push(curr) : acc[acc.length - 1] += curr, acc
}, [tokens[0]]).filter(e => e != " ")
console.log(res)

<script src="https://projects.verou.me/parsel/dist/nomodule/parsel.js"></script>

Collectives™ on Stack Overflow

Regex to convert CSS selector into blocks

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related