替換 Curley 括號內的文本 JavaScript

Question

我正在嘗試使用 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);

上面的代碼應該輸出“這是約翰在 JavaScript 中的簡單字符串！是的，一個字符串！”。

這是發生的事情：

1. 我們得到一個字符串，其中大括號中的值需要替換
2. 循環使用“replaceArray”查找需要替換的花括號中的所有值
3. 這些值以及花括號將被替換為“replaceWith”數組中的相應值

但是，我沒有任何運氣，特別是因為一個值可能會在多個位置被替換，並且我正在處理正則表達式中的動態值。

誰能幫我解決這個問題，使用與上面類似的設置？

Answer 1

首先， String.replace不是破壞性的——它不會改變字符串本身，所以你必須設置myString = myString.replace(...) 。 其次，您可以使用new RegExp動態創建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]);
}

Answer 2

字符串是不可變的

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來簡化循環條件。

2017 年更新

現在你可以讓它變得更簡單：

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]);

見演示。

模板引擎

您基本上是在創建自己的模板引擎。 如果您想改用現成的解決方案，請考慮使用：

• John Resig 的微型模板
• 胡子
• jQuery 模板
• 車把
• js

或類似的東西。

您嘗試使用 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);

見演示。

Answer 3

這是一個接受字符串和替換數組的函數。 它足夠靈活，可以重復使用。 唯一的問題是，您需要在字符串中使用數字而不是字符串。 例如，

 var str = "{0} membership will start on {1} and expire on {2}."; var arr = ["Jamie's", '11/27/14', '11/27/15']; function personalizeString(string, replacementArray) { return string.replace(/{(\\d+)}/g, function(match, g1) { return replacementArray[g1]; }); } console.log( personalizeString(str, arr) )

演示： https : //jsfiddle.net/4cfy7qvn/

Answer 4

我找到的最好的方法是使用像其他人提到的那樣的內嵌替換功能​​，並且是我從他們那里借來的。 特別向@yannic-hamann 大聲喊出正則表達式和清晰的例子。 我不擔心性能，因為我這樣做只是為了構建路徑。

我在MDN 的文檔中找到了我的解決方案。

 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}`)

Answer 5

我真的很喜歡 rsp 的回答。 尤其是“無循環”部分。 盡管如此，我發現代碼並不那么直觀。 我知道這個問題來自兩個數組場景並且已經超過 7 年了，但是由於這個問題在搜索用花括號替換字符串時在 google 上顯示為 #1 並且作者要求類似的設置，我很想提供另一種解決方案。

話雖如此，可以使用復制和粘貼解決方案：

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 的正則表達式的更多信息。