CODEWITHSUNDEEP
regex
Diederik
Diederik

Reputation: 612

Find multiple instances with regex

I am currently in a bit of a pickle with JS Regex. From the following code, we need to extract the content inside the div or span:

<span class="code">
    !(true ^ false)
</span>

<span class="code">
    (true ^ false)
</span>

So we need to match both !(true ^ false) and (true ^ false)

I came up with the following regex: /<(div|span) class="code">([\s\S]+)<\/(div|span)>/im. This works when there is only one div or span in the to be matched text. However, in the situation outlined above, the match is:

    ! (true ^ false)
</span>

<span class="code">
    !(true ^ false)

So basically it only takes the opening and the ending tag. How do I fix this ?

Upvotes: 1

Views: 45

Answers (2)

F.P
F.P

Reputation: 17831

All you really need is to put a ? behind your + to make the match non-greedy and then add the g modifier to continue searching after the first match:

<(div|span) class="code">\s*([\s\S]+?)<\/(div|span)>

Demo

Upvotes: 1

user2705585
user2705585

Reputation:

Should fix it by matching <div> with </div> and <span> with </span> and making regex lazy using ?

Regex: <(div|span) class="code">([\s\S]+?)<\/\1>

Explanation:

  • Matching <div> with </div> should be done by using back-referencing for first captured group using \1.

  • Made regex to match minimum tags using ?.

Regex101 Demo

Upvotes: 2

Related Questions