我正在尝试使用JavaScript来动态替换花括号内的内容。这是我的代码示例：
var myString = "This is {name}'s {adjective} {type} in JavaScript! Yes, a {type}!";
var replaceArray = ['name', 'adjective', 'type'];
var replaceWith = ['John', 'simple', 'string'];
for(var i = 0; i <= replaceArray.length - 1; i ++) {
myString.replace(/\{replaceArray[i]\}/gi, replaceWith[i]);
}
alert(myString);
上面的代码应该输出“这是John在JavaScript中的简单字符串！是的，一个字符串！”。
这是发生的事情：
但是，我没有运气，特别是因为一个值可以在多个位置被替换，并且我在正则表达式中处理动态值。
任何人都可以帮我解决这个问题，使用与上面类似的设置吗？
首先，String.replace不是破坏性的 - 它不会改变字符串本身，所以你必须设置myString = myString.replace(...)。其次，您可以使用RegExp动态创建new RegExp对象，因此所有结果将是：
var myString = "This is {name}'s {adjective} {type} in JavaScript! Yes, a {type}!",
replaceArray = ['name', 'adjective', 'type'],
replaceWith = ['John', 'simple', 'string'];
for(var i = 0; i < replaceArray.length; i++) {
myString = myString.replace(new RegExp('{' + replaceArray[i] + '}', 'gi'), replaceWith[i]);
}
JavaScript中的字符串是不可变的。这意味着这将永远不会像您期望的那样工作：
myString.replace(x, y);
alert(myString);
这不仅仅是.replace()的问题 - 没有什么能在JavaScript中改变字符串。你可以做的是：
myString = myString.replace(x, y);
alert(myString);
JavaScript中的正则表达式文字不会插值，因此这仍然无效：
myString = myString.replace(/\{replaceArray[i]\}/gi, replaceWith[i]);
你必须做这样的事情：
myString = myString.replace(new RegExp('\{'+replaceArray[i]+'\}', 'gi'), replaceWith[i]);
但这有点乱，所以你可以先创建一个正则表列表：
var regexes = replaceArray.map(function (string) {
return new RegExp('\{' + string + '\}', 'gi');
});
for(var i = 0; i < replaceArray.length; i ++) {
myString = myString.replace(regexes[i], replaceWith[i]);
}
如您所见，您还可以使用i < replaceArray.length而不是i <= replaceArray.length - 1来简化循环条件。
现在你可以让它变得更简单：
var regexes = replaceArray.map(string => new RegExp(`\{${string}\}`, 'gi'));
for(var i = 0; i < replaceArray.length; i ++) {
myString = myString.replace(regexes[i], replaceWith[i]);
}
而不是一遍又一遍地循环和应用.replace()函数，你只能这样做一次：
var mapping = {};
replaceArray.forEach((e,i) => mapping[`{${e}}`] = replaceWith[i]);
myString = myString.replace(/\{\w+\}/ig, n => mapping[n]);
见DEMO。
您基本上是在创建自己的模板引擎。如果您想使用现成的解决方案，请考虑使用：
或类似的东西。
使用Mustache尝试做的一个例子是：
var myString = "This is {{name}}'s {{adjective}} {{type}} in JavaScript! Yes, a {{type}}!";
var myData = {name: 'John', adjective: 'simple', type: 'string'};
myString = Mustache.to_html(myString, myData);
alert(myString);
见DEMO。
这是一个接受字符串和替换数组的函数。它足够灵活，可以重复使用。唯一的问题是，您需要在字符串中使用数字而不是字符串。例如。，
var myString = "This is {0}'s {1} {2} in JavaScript! Yes, a {2}!";
function personalizeString(string, replacementArray) {
return string.replace(/({\d})/g, function(j) {
return replacementArray[j.replace(/{/, '').replace(/}/, '')];
});
}
但是：Kua zxsw指出
我发现这样做的最好方法是使用其他人提到的内联替换功能，以及我借用的功能。特别向@ yannic-hamann大喊大叫，以表达正则表达式和明确的例子。我并不担心性能，因为我只是这样做来构建路径。
我在http://jsfiddle.net/4cfy7qvn/找到了我的解决方案。
我真的很喜欢rsp的答案。特别是'没有循环'部分。尽管如此，我发现代码并不那么直观。我知道这个问题来自两个阵列场景，并且已经超过7年了，但是因为这个问题在谷歌搜索用花括号替换字符串时显示为＃1并且作者要求类似的设置我被诱惑提供另一种解决方案。
话虽这么说，一个复制和粘贴解决方案来玩：
const interpolateUrl = (string, values) => string.replace(/{(.*?)}/g, (match, offset) => values[offset]);
const path = 'theresalways/{what}/inthe/{fruit}-stand/{who}';
const paths = {
what: 'money',
fruit: 'banana',
who: 'michael',
};
const expected = 'theresalways/money/inthe/banana-stand/michael';
const url = interpolateUrl(path, paths);
console.log(`Is Equal: ${expected === url}`);
console.log(`URL: ${url}`)这个var myString = "This is {name}'s {adjective} {TYPE} in JavaScript! Yes, a { type }!";
var regex = /{(.*?)}/g;
myString.replace(regex, (m, c) => ({
"name": "John",
"adjective": "simple",
"type": "string"
})[c.trim().toLowerCase()]);
真的帮助我构建和理解上面的代码，并通过JavaScript了解有关正则表达式的更多信息。