替换 javascript 模板中相同值的多个实例

Question

我有一个 javascript 模板，我想在整个模板的多个位置替换一个设置值，但是在我当前的代码中，只有值占位符的第一个实例发生了变化。

如何将所有 {{color}} 占位符替换为相同的值？

我的模板：

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

我的 JS：

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

结果：

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

Answer 1

Akamaozu 实在是懒得让他的代码有效了。 斜杠中必须包含正则表达式，而不是反斜杠。当您必须转义具有特殊含义的字符或创建具有特殊含义的元字符时，正则表达式中需要使用反斜杠。因此，当您将代码更改为此它将起作用：

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

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

DEMO.

Answer 2

替换：

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

与：

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

String.prototype.replace 将仅替换第一个匹配项。我所做的是将搜索字符串替换为将搜索所述搜索字符串的所有实例的正则表达式。

干杯！