StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<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 < replaceArray.length; i ++) { myString = myString.replace(regexes[i], replaceWith[i]); } </code></pre> <p>As you can see, you can also use <code>i < replaceArray.length</code> instead of <code>i <= 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 => new RegExp(`\{${string}\}`, 'gi')); for(var i = 0; i < 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) => mapping[`{${e}}`] = replaceWith[i]); myString = myString.replace(/\{\w+\}/ig, n => mapping[n]); </code></pre> <p>See <a href="https://jsfiddle.net/rsp/nozn2p5f/" rel="nofollow 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="nofollow noreferrer">John Resig's Micro-Templating</a></li> <li><a href="http://mustache.github.com/" rel="nofollow noreferrer">Mustache</a></li> <li><a href="http://api.jquery.com/tmpl/" rel="nofollow noreferrer">jQuery Templates</a></li> <li><a href="http://handlebarsjs.com/" rel="nofollow noreferrer">Handlebars</a></li> <li><a href="http://olado.github.io/doT/" rel="nofollow 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="nofollow noreferrer"><strong>DEMO</strong></a>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload