javascript replace with regexp has strange behaviour

Question

Maybe someone can give me a hint...

I have the following code and experience a strange behaviour in javascript (node.js):

var a = "img{http://my.image.com/imgae.jpg} img{http://my.image.com/imgae.jpg}"
var html = a.replace(/img\{(.*)\}/g, '<img src="$1" class="image">');
//result: <img src="http://my.image.com/imgae.jpg"  class="image"">

As you can see, the occurrence in the string (a markup thing) is replaced by an img tag with source as expected.

But now something strange. In the markup are probably several elements of type img{src}

var a = "img{http://my.image.com/imgae.jpg} some text between img{http://my.image.com/imgae.jpg}"
var html = a.replace(/img\{(.*)\}/g, '<img src="$1" class="image">');
//result: <img src="http://my.image.com/imgae.jpghttp://my.image.com/imgae.jpg"  class="image"">

The result is strange. in $1 all matches are stored and accumulated... And there is only one image tag.

I am confused...

Community · Accepted Answer · 2017-05-23 12:13:03Z

1

Try: a.replace(/img\{(.*?)\}/g, '<img src="$1" class="image">');

I found out about adding ? makes regex non-greedy here

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Feb 12, 2014 at 0:19

bits

8,4209 gold badges49 silver badges57 bronze badges

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

Comments

Casimir et Hippolyte · Accepted Answer · 2014-02-12 00:19:27Z

1

Use this to stop at the first closing curly bracket.

var html = a.replace(/img{([^}]*)}/g, '<img src="$1" class="image">');

answered Feb 12, 2014 at 0:19

Casimir et Hippolyte

90k5 gold badges102 silver badges131 bronze badges

1 Comment

marschro Over a year ago

This is much better, yes

Matt Esch · Accepted Answer · 2014-02-12 00:32:43Z

I think it's probably more important that you understand how this is working. .* can be a dangerous regular expression if you don't understand what it will do because it is greedy and will consume as much as it can, and some linters will warn against it.

So if you break down your regex you will find that the img\{ part matches the first part of the string (.*) matches http://my.image.com/imgae.jpg} some text between img{http://my.image.com/imgae.jpg and the final } matches the closing } because this is the largest string that matches the expression.

The best solution is to use ([^}]*), which matches anything except } because you know that anything between the image {} will will not be a closing brace.

You can test your regex to see what it is matching:

var reg = /img\{(.*)\}/g
var a = "img{http://my.image.com/imgae.jpg} img{http://my.image.com/imgae.jpg}"
var groups = a.match(reg)

// we can see what the first group matched
// groups[0] === "http://my.image.com/imgae.jpg} img{http://my.image.com/imgae.jpg"

Collectives™ on Stack Overflow

javascript replace with regexp has strange behaviour

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related