TypeScript Replace function does not work if there are multiple cases

Issue

For creating some shortcodes, in TypeScript I replace a string with another string.

This looks like this:

output = output.replace(/\[+([^\][]+)]+/g,"<?php echo $settings['$1'] ?>");
output = output.replace(/\{+([^\][]+)}+/g,"<?php echo $settings['$1']['url'] ?>");

So this code:

<a href="[link]" class="test">
    <img src="{hoverimage}">
    <img src="{image}">
</a>

should be translated into this:

<a href="<?php echo $settings['link'] ?>" class="test">
    <img src="<?php echo $settings['hoverimage']['url'] ?>">
    <img src="<?php echo $settings['image']['url'] ?>">
</a>

What does not work

For some reason I get this:

<a href="<?php echo $settings['link'] ?>" class="test">
    <img src="<?php echo $settings['hoverimage}">
    <img src="{image']['url'] ?>">
</a>

So the problem are the parts with the brackets {}. Interesting: When I only have one line with brackets it works well. For example if I remove the second img, the replacing function works well.

Why this happens? Do you have an idea?

Solution

your current logic catches start of first match, and end of second match. to get rid of it use nongreedy search, by adding ? to + so it would become +?

output = output.replace(/\{+([^\][]+?)}+/g,"<?php echo $settings['$1']['url'] ?>");

Answered By - Andrei