Using String Replace in JavaScript
This is a quickie simple post on JavaScript techniques. We're going to cover how to use the regular expression driven
replace(..)
with JavaScript
string
values.
All
string
values have a
replace(..)
method available to them. This method allows you to pass a regular expression (or a
string
that will be interpreted as the pattern for a dynamically-created regular expression!) to represent what should be found in the main
string
value for replacing.
Single vs Global
Consider:
var a = "The quick brown fox jumped over the lazy dog."; var pattern = /the/i; a.replace( pattern, "THE" ); // THE quick brown fox jumped over the lazy dog.You can see only the first "The" was replaced. Many developers just leave that fact as is, and never ask, "Why?".
Well, it's because you didn't use a global regular expression (that is, with the
gflag), so clearly JS only applies the expression in a single context. See:var a = "The quick brown fox jumped over the lazy dog."; var pattern = /the/ig; // notice "g" here now! a.replace( pattern, "THE" ); // THE quick brown fox jumped over THE lazy dog.The replacer
string("THE"in our example) can include certain special commands, such as "$1" for dropping in the value of the first( )group match (there is none in our example!).
functionAs ReplacerWhat if you wanted to do a more sophisticated replacement, like for instance capitalizing any of a set of words found, using a pattern like this?
var pattern = /quick|brown|lazy/ig;Obviously, hard-coding the
"THE"replacerstringwon't work now!But it's a little known fact that the replacer can be a
functioninstead. For example:var a = "The quick brown fox jumped over the lazy dog."; var pattern = /quick|brown|lazy/ig; a.replace( pattern, function replacer(match){ return match.toUpperCase(); // The QUICK BROWN fox jumped over the LAZY dog.The
functionreplacer gets several arguments. The first is always the matched string, which is often all you want/need. If the pattern has any( )group match(es), those will be passed as the next argument(s). The next argument will be the numeric indexed position of the match in the bigger string.The final argument is the full original
stringbeing replaced against, not the current in-progress string value that's being processed.Another place where the
functionreplacer comes in handy is if the string you're replacing with already has some of the special replacerstringcommand sequences, like "$1" instance, because thereturned value from the function is not interpolated like the regularstringreplacer is:var prices = { "pr_1": "$1.99", "pr_2": "$9.99", "pr_3": "$5.00" var template = ".."; // some ecommerce page template template.replace( /(<span id=")(.*?)(">)(<\/span>)/g, function(match,$1,$2,$3,$4){ return $1 + $2 + $3 + prices[$2] + $4;The value
"$1.99"couldn't have been used as astringreplacer because "$1" would have been interpreted as the first match. The only other option is to pre-escape yourstringreplacer values, like "$$1.99", but no one wants to do that, so thefunctionreplacer is better.Summary
Regular expression
stringreplace is a more powerful mechanism than most developers give JS credit for.Global
/gregular expressions andfunctionreplacer values are just some of the useful but not as well known features of regular expression patterns andreplace(..).About Kyle Simpson
Kyle Simpson is a Human-Centric Technologist. His mission is to show the world that the culture of empathy and relational information exchange are keys to unlocking the full potential of every human in the workplace. JS and open web technologies are among Kyle's favorite tools to augment human endeavors. Kyle has published 11+ books on JS, taught thousands of developers from teams around the world, and his training videos have been watched over 800,000 hours. He's always fighting for the people behind the pixels.
Nice explanation. Thanks.
How have I not known about this sooner? Thanks!
Nice David, I`ve gisted a generalization some years ago that use the String.replace callback function. I find it very useful and just wanted to share it:
https://gist.github.com/fedeghe/7562904
Sorry… nice explanation Kyle!!!
Nice post! The replace with callback fuction will be very useful for me!
You can see Tmpl.js https://github.com/GC92/tmpl
Wow, thanks Kyle. I can already picture where I could have used the function replacer in my code.
Fun fact, “The quick brown fox jumped over the lazy dog” has no ‘s’.
Good post – thanks Kyle. Do you ever use libraries like string.js for this sort of thing?
down and dirty. fast too.
str = str.split('string to replace').join('string to insert')The function bit was so incredibly useful. Thank you! :)
FWIW, I have recently implemented a very simple way to replace strings with a big legibility trade-off over performance, see http:// github.com/FagnerMartinsBrack/str-replace
There was a erroneous space between “http://” and the host in the last comment. The correct link should be: http://github.com/FagnerMartinsBrack/str-replace