Matching multiple instances of pattern in string

Question

I'm trying to save helper strings (kind of like Stack's [enter link description here][1]) to the database and compile them as HTML when retrieved/viewed. A sample text is:

var str = 'This is just a sample text followed by an {{image: imageUrl1}}. And here is another {{image: imageUrl2}}.';

I tried the following RegEx:

str.match(`/(\{\{image:)[^(.*\}\})]*.*(\}\})/g`);

But I just get ["{{image: imageUrl1}}. And here is another {{image: imageUrl2}}"].

What should be the RegEx pattern so that the result is ["{{image: imageUrl1}}", "{{image: imageUrl2}}"]?

Tushar · Accepted Answer · 2016-10-07 03:15:52Z

1

The regex is greedy(matches all possible results to satisfy the condition). That means, the regex will match the string from {{ to the last }}. To match only until the first }} symbols, make it lazy by adding ? quantifier after the * quantifier.

/{{image:[^}]*?}}/g

Here's live demo on RegEx101

Explanation:

{{image:: Match {{image: literal
[^}]*?: Match anything but } lazily
}}: Match }} literals

Note that surrounding the regex by back-ticks makes it string. Use the regex literal syntax.

var str = 'This is just a sample text followed by an {{image: imageUrl1}}. And here is another {{image: imageUrl2}}.';

var matches = str.match(/{{image:[^}]*?}}/g);
console.log(matches);

To extract the URL, use the capturing group and get the first captured group.

/{{image:\s*([^}]*?)}}/

var str = 'This is just a sample text followed by an {{image: http://someURLHERE.domain}}. And here is another {{image: imageUrl2}}.';

var regex = /{{image:\s*([^}]*?)}}/g;
var match = '';
var urls = [];

while (match = regex.exec(str)) {
    urls.push(match[1]);
}

console.log(urls);

edited Oct 7, 2016 at 3:15

answered Oct 7, 2016 at 3:04

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

2 Comments

dork Over a year ago

what does greedy mean?

Tushar Over a year ago

@dork Please see What do lazy and greedy mean in the context of regular expressions?

Collectives™ on Stack Overflow

Matching multiple instances of pattern in string

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related