How to use regex with replace in JavaScript

Regular expressions in JavaScript are powerful tools for pattern matching and text manipulation. At their core, regexes are objects that describe a search pattern. They can be created using literal syntax with slashes /pattern/flags or by invoking the RegExp constructor.

Flags modify the behavior of the regex. The most common ones include:

g for global matching (find all matches rather than stopping at the first),

i for case-insensitive matching,

m for multiline mode, which affects anchors ^ and $.

Here’s a quick example of a regex literal:

const regex = /hello/i;
const str = "Hello World";

console.log(regex.test(str));  // true

The test() method returns a boolean indicating whether the pattern exists in the string. It’s a fast way to check for presence without extracting the match.

Another common method is exec(). This returns an array with detailed info about the match or null if there’s no match. Useful when you want to extract captured groups:

const dateRegex = /(d{4})-(d{2})-(d{2})/;
const result = dateRegex.exec("2024-06-15");

if (result) {
  console.log("Year:", result[1]);
  console.log("Month:", result[2]);
  console.log("Day:", result[3]);
}

Parentheses capture parts of the string for extraction. The indexes in the result array correspond to the full match at result[0] and groups starting at result[1].

Character classes let you define sets of characters to match. For example, [a-z] matches any lowercase letter, while d is shorthand for digits ([0-9]), and w matches word characters (letters, digits, and underscore).

Quantifiers control how many times a pattern is matched:

• * – zero or more times
• + – one or more times
• ? – zero or one time (optional)
• {n} – exactly n times
• {n,} – at least n times
• {n,m} – between n and m times

Anchors like ^ and $ are used to assert position rather than matching characters. ^ matches the start of a string, and $ matches the end.

For example, validating a string that only contains digits:

const onlyDigits = /^d+$/;
console.log(onlyDigits.test("12345"));   // true
console.log(onlyDigits.test("123a45"));  // false

Remember, regexes are greedy by default, meaning they match as much as possible. Adding a ? after a quantifier makes it lazy (match as little as possible).

For example, matching the smallest tag in a string:

const lazyMatch = //;
const str = "<div>Hello</div>";

console.log(str.match(lazyMatch)); // ["<div>"]

That’s the gist of regex basics. Next, you’ll see how to harness these concepts with replace() to transform strings efficiently, especially when dealing with patterns and dynamic content.

Practical examples of using replace with regex

The replace() method in JavaScript allows you to search for a pattern in a string and replace it with a new substring. That is particularly useful when working with regular expressions, as it enables dynamic text manipulation based on patterns.

When using replace(), you can pass either a string or a function as the second parameter. If you use a string, it will simply replace the matched substring with that string. If you use a function, you can have more control over the replacement process, which will allow you to generate dynamic replacements based on the match information.

Here’s a basic example using a regex pattern to replace all occurrences of the word “cat” with “dog”:

const text = "The cat sat on the mat. The cat is happy.";
const newText = text.replace(/cat/g, "dog");

console.log(newText); // "The dog sat on the mat. The dog is happy."

In this case, the g flag allows for a global replacement, affecting all instances of “cat” in the string.

Now, let’s explore a more complex example where we want to format dates from “YYYY-MM-DD” to “DD/MM/YYYY”. We can use capturing groups to extract the year, month, and day:

const dateStr = "2024-06-15";
const formattedDate = dateStr.replace(/(d{4})-(d{2})-(d{2})/, "$3/$2/$1");

console.log(formattedDate); // "15/06/2024"

In this example, the capturing groups (d{4}), (d{2}), and (d{2}) allow us to reference the matched year, month, and day in the replacement string using $1, $2, and $3, respectively.

Using a function for the replacement can provide even more flexibility. The function receives the matched substring and any captured groups as arguments. Here’s an example that adds a prefix to each matched word:

const textWithNumbers = "I have 1 apple and 2 bananas.";
const newTextWithPrefix = textWithNumbers.replace(/(d+)/g, (match) => (${match}));

console.log(newTextWithPrefix); // "I have (1) apple and (2) bananas."

In this case, the function takes the matched number and wraps it in parentheses, demonstrating how you can manipulate matches programmatically.

Another practical use case is sanitizing user input by removing unwanted characters. For example, if you want to remove all non-alphanumeric characters from a string, you can do the following:

const dirtyInput = "Hello! @World #2024.";
const cleanInput = dirtyInput.replace(/[^a-zA-Z0-9 ]/g, "");

console.log(cleanInput); // "Hello World 2024"

Here, the regex [^a-zA-Z0-9 ] matches any character this is not a letter, digit, or space, effectively cleaning the string.

Regular expressions combined with the replace() method are essential for efficient string manipulation and can significantly streamline your JavaScript code when dealing with complex text transformations.