替换Curley Braces JavaScript中的文本
我试图使用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中John的简单字符串！是的，一个字符串！”
下面是发生的情况：
- 我们将得到一个字符串，其中包含需要替换的大括号中的值。
- 循环使用"replaceArray“查找大括号中需要替换的所有值。
- 这些值以及大括号将被替换为"replaceWith“数组中的相应值。
但是，我没有任何运气，特别是因为一个值可能在多个位置中被替换，而且我正在处理正则表达式中的一个动态值。
谁能帮我解决这个问题，使用类似的设置，如上面？
回答 5
Stack Overflow用户
发布于 2011-03-17 03:00:51
首先，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]);
}Stack Overflow用户
发布于 2019-03-01 02:19:13
我找到的最好的方法，就是像其他人提到的那样，使用一个内联替换函数，我是从他那里借来的。特别呼喊@的正则表达式和明确的例子。我并不担心绩效，因为我这样做只是为了构建路径。
我在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}`)
Stack Overflow用户
发布于 2011-03-17 02:59:14
字符串是不可变的
JavaScript中的字符串是不可变的。这意味着这永远不会像你期望的那样起作用：
myString.replace(x, y);
alert(myString);这不仅仅是.replace()的一个问题--在JavaScript中没有任何东西可以改变字符串。相反，你可以做的是：
myString = myString.replace(x, y);
alert(myString);Regex文字不插值值
JavaScript中的正则表达式文本不插值值，因此这仍然无法工作：
myString = myString.replace(/\{replaceArray[i]\}/gi, replaceWith[i]);你必须这样做，而不是：
myString = myString.replace(new RegExp('\{'+replaceArray[i]+'\}', 'gi'), replaceWith[i]);但是这有点混乱，所以您可以先创建一个regexes列表：
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]);见演示。
模板引擎
您基本上是在创建自己的模板引擎。如果您想要使用现成的解决方案，那么请考虑使用：
- 约翰·雷西格的微模板
- 八字胡
- jQuery模板
- 车把
- doT.js
或者类似的东西。
您正在尝试使用胡子的一个例子是：
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);见演示。
https://stackoverflow.com/questions/5334380
复制相似问题
腾讯云开发者
