Regex match pattern more than once in the same line

Question

I am trying to perform this transformation to a string (using javascript):

Input:

[hello]{world}and[good]{night}

Output:

<span class="top">hello<span class="bottom">world</span></span>and<span class="top">good<span class="bottom">night</span></span>

To do that I am using the following regex:

text.replace(/\[(.*)\]\{(.*)\}/gim, "<span class='top'>$1<span class='bottom'>$2</span></span>")

It works correctly when only setting one occurrence of the pattern in a string [hello]{world}

But if I add a string with more than one, the regex matches the first [] and the last {} instead, and prints this:

<span class='top'>hello]{world}and[good<span class='bottom'>night</span></span>

How can I tell regex to match the first pattern and the second pattern instead of matching it as one bigger pattern?

Note that between the [] and {} I expect there to be no text. So [hello]world and good{night} should not be matched.

Can there be strings like`[hi] and then [hello]{world}and[good]{night}`? — Wiktor Stribiżew, Jul 25 '22 at 09:26
Then you need `/\[([^\][]*)]\{([^{}]*)}/g`, i.e. negated character classes. — Wiktor Stribiżew, Jul 25 '22 at 09:27
@WiktorStribiżew your comment answered my question correctly. Not sure why it is marked as duplicate, because the replies on the other question do not solve one of the problems I was facing. But anyways, thanks. — lpares12, Jul 25 '22 at 09:34

score 0 · Answer 1 · answered Jul 25 '22 at 09:22

You need to put ? after .* to make the quantifier lazy, instead of greedy.

const text = '[hello]{world}and[good]{night}'


const result = text.replace(/\[(.*?)\]\{(.*?)\}/gim, "<span class='top'>$1<span class='bottom'>$2</span></span>")


console.log(result)

Regex match pattern more than once in the same line

1 Answers1