Replace multiple instances of the same value in a javascript template

Question

I have a javascript template were I want to replace a set value in multiple locations throughout the template, however in my current code only the first instance of the value placeholder is changing.

How do I replace all {{color}} placeholders with the same value?

My template:

<script type="text/template" id="styleTemplate">    
.item {
    color: {{color}};
    border-color:{{color}};
}
</script>

My JS:

var thisColor = "#000";
var template = $("#styleTemplate").html();
$('#styleTarget').html(template.replace("{{color}}",thisColor));

The result:

.item {
    color: #000;
    border-color:{{color}};
}

Martin Ernst · Accepted Answer · 2014-11-14 10:12:47Z

1

Akamaozu is really too lazy to make his code valid. A regular expression must be included in slashes, not backslashes. A backslash is needed inside a regex when you have to escape a character that otherwise has a special meaning or to create a metacharacter with a special meaning. So when you change your code to this it will work:

var thisColor = "#000",
    search = /{{color}}/g,
    template = $("#styleTemplate").html();

$('#styleTarget').html(template.replace(search, thisColor));

DEMO.

edited Nov 14, 2014 at 10:12

answered Nov 14, 2014 at 10:06

Martin Ernst

3,2891 gold badge15 silver badges12 bronze badges

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

1 Comment

akamaozu Over a year ago

zing. I can't even explain why I thought back slash made sense, even after I posted the link to a regexp validator. 7 am is not my prime time, it seems.

akamaozu · Accepted Answer · 2014-11-14 06:06:56Z

0

Replace:

$('#styleTarget').html(template.replace("{{color}}",thisColor));

With:

$('#styleTarget').html(template.replace(\{{color}}\g,thisColor));

String.prototype.replace will replace only the FIRST match. What I've done is replaced the search string with a regular expression that will search for all instances of said search string.

Cheers!

edited Nov 14, 2014 at 6:06

answered Nov 14, 2014 at 5:38

akamaozu

7051 gold badge7 silver badges15 bronze badges

3 Comments

Adam Wilson Over a year ago

Thanks Akamaozu, I tried your solution but unfortunately it didn't work. See JSfiddle here: jsfiddle.net/2uu6f1v1

akamaozu Over a year ago

I replaced the faulty regex I used (didn't remove your quotes around the regex) but jsfiddle still kept giving me issues with it, so .. regex101.com/r/pI3nY3/1

akamaozu Over a year ago

@AdamWilson Also, if you run jshint on the jsfiddle sample, you'll see it freak out over the regexp even though it's totally valid and does work. i'd put the code on my server but i'm really lazy atm. If you aren't able to confirm this when I'm less lazy, I will

Collectives™ on Stack Overflow

Replace multiple instances of the same value in a javascript template

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related