blocks|key|1121341|text|字符串是不可变的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1121342|JavaScript中的字符串是不可变的。这意味着这永远不会像你期望的那样起作用：|1121343|myString.replace(x,+y);
alert(myString);|code-block|syntax|javascript|1121344|这不仅仅是.replace()的一个问题--在JavaScript中没有任何东西可以改变字符串。相反，你可以做的是：|offset|length|style|CODE|1121345|myString+=+myString.replace(x,+y);
alert(myString);|1121346|Regex文字不插值值|1121347|JavaScript中的正则表达式文本不插值值，因此这仍然无法工作：|1121348|myString+=+myString.replace(/\{replaceArray[i]\}/gi,+replaceWith[i]);|1121349|你必须这样做，而不是：|1121350|myString+=+myString.replace(new+RegExp('\{'%2BreplaceArray[i]%2B'\}',+'gi'),+replaceWith[i]);|1121351|但是这有点混乱，所以您可以先创建一个regexes列表：|1121352|var+regexes+=+replaceArray.map(function+(string)+{
++++return+new+RegExp('\{'+%2B+string+%2B+'\}',+'gi');
});
for(var+i+=+0;+i+<+replaceArray.length;+i+%2B%2B)+{
++myString+=+myString.replace(regexes[i],+replaceWith[i]);
}|1121353|如您所见，您还可以使用i+<+replaceArray.length而不是i+<=+replaceArray.length+-+1来简化循环条件。|1121354|更新2017年|1121355|现在你可以让它变得更简单了：|1121356|var+regexes+=+replaceArray.map(string+=>+new+RegExp(`\{${string}\}`,+'gi'));
for(var+i+=+0;+i+<+replaceArray.length;+i+%2B%2B)+{
++myString+=+myString.replace(regexes[i],+replaceWith[i]);
}|1121357|无环|1121358|与其一次又一次地循环和应用.replace()函数，您只能这样做一次：|1121359|var+mapping+=+{};
replaceArray.forEach((e,i)+=>+mapping[`{${e}}`]+=+replaceWith[i]);
myString+=+myString.replace(/\{\w%2B\}/ig,+n+=>+mapping[n]);|1121360|见演示。|1121361|模板引擎|1121362|您基本上是在创建自己的模板引擎。如果您想要使用现成的解决方案，那么请考虑使用：|1121363|约翰·雷西格的微模板|unordered-list-item|1121364|八字胡|1121365|jQuery模板|1121366|车把|1121367|doT.js|1121368|或者类似的东西。|1121369|您正在尝试使用胡子的一个例子是：|1121370|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);|1121371|1121372|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/rsp/nozn2p5f/|1|http://ejohn.org/blog/javascript-micro-templating/|2|http://mustache.github.com/|3|http://api.jquery.com/tmpl/|4|http://handlebarsjs.com/|5|http://olado.github.io/doT/|6|http://jsfiddle.net/mUczR/^0|0|0|0|5|A|0|0|0|0|0|0|0|0|0|B|N|11|S|0|0|0|0|0|D|A|0|0|1|2|0|0|0|0|0|A|1|0|0|3|2|0|0|8|3|0|0|2|4|0|0|6|5|0|0|0|0|1|2|6|0^^$0|@$1|2|3|4|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|2R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|2S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|2T|8|@$K|2U|L|2V|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|2W|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|2X|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|2Y|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|2Z|8|@]|9|@]|A|$G|H]]|$1|W|3|X|5|6|7|30|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|F|7|31|8|@]|9|@]|A|$G|H]]|$1|10|3|11|5|6|7|32|8|@]|9|@]|A|$]]|$1|12|3|13|5|F|7|33|8|@]|9|@]|A|$G|H]]|$1|14|3|15|5|6|7|34|8|@$K|35|L|36|M|N]|$K|37|L|38|M|N]]|9|@]|A|$]]|$1|16|3|17|5|6|7|39|8|@]|9|@]|A|$]]|$1|18|3|19|5|6|7|3A|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|F|7|3B|8|@]|9|@]|A|$G|H]]|$1|1C|3|1D|5|6|7|3C|8|@]|9|@]|A|$]]|$1|1E|3|1F|5|6|7|3D|8|@$K|3E|L|3F|M|N]]|9|@]|A|$]]|$1|1G|3|1H|5|F|7|3G|8|@]|9|@]|A|$G|H]]|$1|1I|3|1J|5|6|7|3H|8|@]|9|@$K|3I|L|3J|1|3K]]|A|$]]|$1|1K|3|1L|5|6|7|3L|8|@]|9|@]|A|$]]|$1|1M|3|1N|5|6|7|3M|8|@]|9|@]|A|$]]|$1|1O|3|1P|5|1Q|7|3N|8|@]|9|@$K|3O|L|3P|1|3Q]]|A|$]]|$1|1R|3|1S|5|1Q|7|3R|8|@]|9|@$K|3S|L|3T|1|3U]]|A|$]]|$1|1T|3|1U|5|1Q|7|3V|8|@]|9|@$K|3W|L|3X|1|3Y]]|A|$]]|$1|1V|3|1W|5|1Q|7|3Z|8|@]|9|@$K|40|L|41|1|42]]|A|$]]|$1|1X|3|1Y|5|1Q|7|43|8|@]|9|@$K|44|L|45|1|46]]|A|$]]|$1|1Z|3|20|5|6|7|47|8|@]|9|@]|A|$]]|$1|21|3|22|5|6|7|48|8|@]|9|@]|A|$]]|$1|23|3|24|5|F|7|49|8|@]|9|@]|A|$G|H]]|$1|25|3|1J|5|6|7|4A|8|@]|9|@$K|4B|L|4C|1|4D]]|A|$]]|$1|26|3|-4|5|6|7|4E|8|@]|9|@]|A|$]]]|27|$28|$5|29|2A|2B|A|$2C|2D]]|2E|$5|29|2A|2B|A|$2C|2F]]|2G|$5|29|2A|2B|A|$2C|2H]]|2I|$5|29|2A|2B|A|$2C|2J]]|2K|$5|29|2A|2B|A|$2C|2L]]|2M|$5|29|2A|2B|A|$2C|2N]]|2O|$5|29|2A|2B|A|$2C|2P]]]]

<h2>Strings are immutable</h2>

<p>Strings in JavaScript are immutable. It means that this will never work as you expect:</p>

<pre><code>myString.replace(x, y);
alert(myString);
</code></pre>

<p>This is not just a problem with <code>.replace()</code> - nothing can mutate a string in JavaScript. What you can do instead is:</p>

<pre><code>myString = myString.replace(x, y);
alert(myString);
</code></pre>

<h2>Regex literals don't interpolate values</h2>

<p>Regular expression literals in JavaScript don't interpolate values so this will still not work:</p>

<pre><code>myString = myString.replace(/\{replaceArray[i]\}/gi, replaceWith[i]);
</code></pre>

<p>You have to do something like this instead:</p>

<pre><code>myString = myString.replace(new RegExp('\{'+replaceArray[i]+'\}', 'gi'), replaceWith[i]);
</code></pre>

<p>But this is a little bit messy, so you may create a list of regexes first:</p>

<pre><code>var regexes = replaceArray.map(function (string) {
    return new RegExp('\{' + string + '\}', 'gi');
});
for(var i = 0; i &lt; replaceArray.length; i ++) {
  myString = myString.replace(regexes[i], replaceWith[i]);
}
</code></pre>

<p>As you can see, you can also use <code>i &lt; replaceArray.length</code> instead of <code>i &lt;= replaceArray.length - 1</code> to simplify your loop condition.</p>

<h2>Update 2017</h2>

<p>Now you can make it even simpler:</p>

<pre><code>var regexes = replaceArray.map(string =&gt; new RegExp(`\{${string}\}`, 'gi'));
for(var i = 0; i &lt; replaceArray.length; i ++) {
  myString = myString.replace(regexes[i], replaceWith[i]);
}
</code></pre>

<h2>Without a loop</h2>

<p>Instead of looping and applying <code>.replace()</code> function over and over again, you can do it only once like this:</p>

<pre><code>var mapping = {};
replaceArray.forEach((e,i) =&gt; mapping[`{${e}}`] = replaceWith[i]);
myString = myString.replace(/\{\w+\}/ig, n =&gt; mapping[n]);
</code></pre>

<p>See <a href="https://jsfiddle.net/rsp/nozn2p5f/" rel="noreferrer"><strong>DEMO</strong></a>.</p>

<h2>Templating engines</h2>

<p>You are basically creating your own templating engine. If you want to use a ready solution instead, then consider using:</p>

<ul>
<li><a href="http://ejohn.org/blog/javascript-micro-templating/" rel="noreferrer">John Resig's Micro-Templating</a></li>
<li><a href="http://mustache.github.com/" rel="noreferrer">Mustache</a></li>
<li><a href="http://api.jquery.com/tmpl/" rel="noreferrer">jQuery Templates</a></li>
<li><a href="http://handlebarsjs.com/" rel="noreferrer">Handlebars</a></li>
<li><a href="http://olado.github.io/doT/" rel="noreferrer">doT.js</a></li>
</ul>

<p>or something like that.</p>

<p>An example of what you are trying to do using Mustache would be:</p>

<pre><code>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);
</code></pre>

<p>See <a href="http://jsfiddle.net/mUczR/" rel="noreferrer"><strong>DEMO</strong></a>.</p>


blocks|key|2318517|text|首先，String.replace不是破坏性的-它不会改变字符串本身，所以您必须设置myString+=+myString.replace(...)。其次，您可以使用RegExp动态创建new+RegExp对象，因此所有这些结果将是：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2318518|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%2B%2B)+{
++++myString+=+myString.replace(new+RegExp('{'+%2B+replaceArray[i]+%2B+'}',+'gi'),+replaceWith[i]);
}|code-block|syntax|javascript|2318519|entityMap^0|3|E|16|W|2B|6|2L|A|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|L|$]]

<p>First, <code>String.replace</code> is not destructive - it doesn't change the string itself, so you'll have to set <code>myString = myString.replace(...)</code>. Second, you can create <code>RegExp</code> objects dynamically with <code>new RegExp</code>, so the result of all that would be: </p>

<pre><code>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 &lt; replaceArray.length; i++) {
    myString = myString.replace(new RegExp('{' + replaceArray[i] + '}', 'gi'), replaceWith[i]);
}
</code></pre>


blocks|key|2318533|text|下面是一个接受字符串和替换数组的函数。它足够灵活，可以重复使用。唯一的问题是，您需要在字符串中使用数字而不是字符串。例如，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2318534|​|2318535|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%2B)}/g,+function(match,+g1)+{
++++return+replacementArray[g1];
++});
}

console.log(
++personalizeString(str,+arr)
)|code-block|syntax|javascript|2318536|2318537|演示：https://jsfiddle.net/4cfy7qvn/|offset|length|2318538|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/4cfy7qvn/^0|0|0|0|0|3|U|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|Z|8|@]|9|@$L|10|M|11|1|12]]|A|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|U]]]]

<p>Here's a function that takes the string and an array of replacements. It's flexible enough to be re-used. The only catch is, you need to use numbers in your string instead of strings. e.g.,</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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)
)</code></pre>
</div>
</div>
</p>
<p>Demo: <a href="https://jsfiddle.net/4cfy7qvn/" rel="nofollow noreferrer">https://jsfiddle.net/4cfy7qvn/</a></p>


blocks|key|2677651|text|我真的很喜欢rsp的回答。特别是“没有循环的”部分。尽管如此，我发现代码并没有那么直观。我知道这个问题来自于两个数组场景，这已经有7年多的历史了，但由于这个问题在google上出现为#1，所以在搜索用大括号替换字符串时，作者要求提供类似的设置，我很想提供另一个解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2677652|话虽如此，一种复制和粘贴解决方案来玩：|2677653|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()]);|code-block|syntax|javascript|2677654|这个资源确实帮助我构建和理解了上面的代码，并学习了更多关于使用JavaScript的正则表达式的知识。|offset|length|2677655|entityMap|0|LINK|mutability|MUTABLE|url|https://eloquentjavascript.net/09_regexp.html#h_k0YuTOu54D^0|0|0|0|2|2|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>I really like rsp's answer. Especially the '<strong><em>Without a loop</em></strong>' section. Nonetheless, I find the code not that intuitive. I understand that this question comes from the two arrays scenario and that is more than 7 years old, but since this question appears as #1 on google when searching to replace a string with curly braces and the author asked for <em>a similar setup</em> I am tempted to provide another solution.</p>

<p>That being said, a copy and paste solution to play around with:</p>

<pre><code>var myString = "This is {name}'s {adjective} {TYPE} in JavaScript! Yes, a { type }!";

var regex = /{(.*?)}/g;
myString.replace(regex, (m, c) =&gt; ({
    "name": "John",
    "adjective": "simple",
    "type": "string"
})[c.trim().toLowerCase()]);
</code></pre>

<p>This <a href="https://eloquentjavascript.net/09_regexp.html#h_k0YuTOu54D" rel="nofollow noreferrer">resource</a> really helped me to build and understand the code above and to learn more about regex with JavaScript in general.</p>


blocks|key|2318592|text|我找到的最好的方法，就是像其他人提到的那样，使用一个内联替换函数，我是从他那里借来的。特别呼喊@的正则表达式和明确的例子。我并不担心绩效，因为我这样做只是为了构建路径。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2318593|我在MDN文档找到了我的解决方案。|offset|length|2318594|​|2318595|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}`)|code-block|syntax|javascript|2318596|2318597|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace^0|0|2|5|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|11|8|@]|9|@]|A|$K|L]]|$1|M|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|U]]]]

<p>The best way I have found to do this, is to use an in-line replace function like others have mentioned, and from whom I borrowed. Special shout out to @yannic-hamann for the regex and clear example. I am not worried about performance, as I am only doing this to construct paths.</p>

<p>I found my solution in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace" rel="noreferrer">MDN's docs</a>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const interpolateUrl = (string, values) =&gt; string.replace(/{(.*?)}/g, (match, offset) =&gt; 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}`)</code></pre>
</div>
</div>
</p>


<p>I am trying to use JavaScript to dynamically replace content inside of curly braces. Here is an example of my code:</p>

<pre><code>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 &lt;= replaceArray.length - 1; i ++) {
  myString.replace(/\{replaceArray[i]\}/gi, replaceWith[i]);
}

alert(myString);
</code></pre>

<p>The above code, should, output "This is John's simple string in JavaScript! Yes, a string!".</p>

<p>Here is what happens:</p>

<ol>
<li>we are given a string with values in braces that need replaced</li>
<li>a loop uses "replaceArray" to find all of the values in curly braces that will need replaced</li>
<li>these values, along with the curly braces, will be replaced with the corresponding values in the "replaceWith" array</li>
</ol>

<p>However, I am not having any luck, especially since <strong>one value may be replaced in multiple locations</strong>, and that I am dealing a dynamic value inside of the regular expression. </p>

<p>Can anyone help me fix this, using a similar setup as above?</p>


Replacing Text Inside of Curley Braces JavaScript

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我试图使用JavaScript动态替换大括号中的内容。下面是我的代码示例：var myString = "This is {name}'s {adjective} {type} in JavaScript! Yes, a {type}!";var replaceArray = ['name', 'adjective',...

问替换Curley Braces JavaScript中的文本
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问替换Curley Braces JavaScript中的文本EN