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 g flag), 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!).

function As Replacer

What 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" replacer string won't work now!

But it's a little known fact that the replacer can be a function instead. 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 function replacer 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 string being replaced against, not the current in-progress string value that's being processed.

Another place where the function replacer comes in handy is if the string you're replacing with already has some of the special replacer string command sequences, like "$1" instance, because the returned value from the function is not interpolated like the regular string replacer 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 a string replacer because "$1" would have been interpreted as the first match. The only other option is to pre-escape your string replacer values, like "$$1.99", but no one wants to do that, so the function replacer is better.

Summary

Regular expression string replace is a more powerful mechanism than most developers give JS credit for.

Global /g regular expressions and function replacer values are just some of the useful but not as well known features of regular expression patterns and replace(..).

About Kyle Simpson

Kyle Simpson is a web-oriented software engineer, widely acclaimed for his "You Don't Know JS" book series and nearly 1M hours viewed of his online courses. Kyle's superpower is asking better questions, who deeply believes in maximally using the minimally-necessary tools for any task. As a "human-centric technologist", he's passionate about bringing humans and technology together, evolving engineering organizations towards solving the right problems, in simpler ways. Kyle will always fight for the people behind the pixels.

github.comPosts