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}};
}

Answer 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 .

Answer 2

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!