JavaScript: Using RegExp with Replace()

JavaScript: Using RegExp with Replace()

Replace()

Replace() in JavaScript is a string method that takes a pattern as the first parameter and replace it with what is passed as the second parameter. The pattern passed as the first parameter can either be a string or a RegExp. The second parameter which is the replacement can be a string or a function that is called on every occurrence of the pattern.

Using RegExp with Replace()

newStr = str.replace(/([a-z])([A-Z])/g, "$1 $2");

You say what!? That can't be right.

Yes, that was my expression the first time I saw a code like that. I understand the concept of Regular Expressions also known as "RegExp", what I didn't understand at the time was what the "$1 $2" meant.

If everything looks like gibberish to you now, not to worry. Hopefully by the end of this article you will be proud of yourself.

REGULAR EXPRESSION

What is it?

It is a mixture of symbols and characters used to search, match, replace text patterns in strings. It is a very useful tool when trying to manipulate and transform strings or when you want to ensure that a particular string complies with a set pattern you have defined.

The power of using RegExp in searching for patterns in strings lies in its versatility. You can conduct a case-sensitive search, you can search for just digits or just alphabets or anything but digits and alphabets. You can specify if what you are searching for should be at the beginning of the string or at the end of the string. You can determine if the search should be for the first occurrence of the pattern or for all the occurrences of the pattern. There is so much manipulation that can be achieved using RegExp.

In JavaScript, you can either write a regular expression literal like this;

let newPat = /^abc/;

or it could be calling the constructor function of RegExp object like this;

let newPat = new RegExp('^abc');

Regular expressions literal are place within two forward slashes like this;

/^abc/

However, regular expression flags are placed outside the second forward slash to further refine the pattern.

RegExp can be used with a number of methods like match(), exec(), test(), search(), split() etc. But I will use replace() as my case study.

How it works

Let me illustrate with a simple example:

let str = "Today123is456a789Great000Day";
let newStr = str.replace(/\d/g, " ");
console.log(newStr); //Today   is   a   Great   Day

In the above illustration the RegExp "/\d/g" translates to this:

  • "\d" represents all the digits in the string "str". The backslash before the "d" is used to escaped the "d". This is necessary to show that then "d" is a special character that represents all the digits in the string and not a literal character "d". Consider this code
let str = "Today123is456a789Great000Day";
let newStr = str.replace(/d/g, " ");
console.log(newStr); //To ay123is456a789Great000Day

The code above without the backslash only replaced the character "d" with a white space.

  • the "g" after the forward slash is a flag to represent global. This means that the pattern created will be replaced globally and not just one time.

The replacement

It's quite simple, once you have successfully crafted the pattern you want to replace, the second parameter passed into the replace() method is what you want to replace the pattern with.

In the scenario below, the pattern is being replaced with white space.

let str = "Today123is456a789Great000Day";
let newStr = str.replace(/\d/g, " ");
console.log(newStr); //Today   is   a   Great   Day

Now taking our initial code into consideration

newStr = str.replace(/([a-z])([A-Z])/g, "$1 $2");

Using parenthesis around any part of the pattern will cause that part to be remembered and therefore it can be recalled. Having two parenthesis has created two patterns to be remembered sort of. The first is all lowercase alphabet globally and the second is all uppercase alphabet globally. The RegExp will look globally in the string for instances where a lowercase letter is followed by an uppercase letter. it will capture the lowercase letter in "$1" and the uppercase letter in "$2" and add a white space in between. Like this

let str = "ThisIsTheLagalCodeBlog";
let newStr = str.replace(/([a-z])([A-Z])/g, "$1 $2");
console.log(newStr); //This Is The Lagal Code Blog

See... So many amazing things you can do with the knowledge of RegExp.

You can find a full reference to RegExp here and here