String Manipulation with Regular Expressions in JavaScript

Regular expressions, often abbreviated as regex or regexp, are powerful tools for string manipulation in JavaScript. They allow you to find, replace, and modify text based on specific patterns. In this guide, we’ll explore how regular expressions can be used for string manipulation, providing practical examples and insights into their application.

Finding Patterns in Strings

Regular expressions excel at finding patterns in strings. Let’s look at some common tasks and how to achieve them using regex.

1. Searching for Patterns

You can use the RegExp object’s test method or the String object’s match method to find patterns in strings. For example, to search for all occurrences of the word “apple” in a string:

JavaScript:

const text = 'I have an apple, and I love apples.';
const pattern = /apple/g;

const matches = text.match(pattern);
console.log(matches); // ['apple', 'apples']

2. Extracting Email Addresses

Regular expressions are handy for extracting data, such as email addresses, from text. Here’s how you can extract email addresses from a string:

JavaScript:

const text = 'Contact us at support@example.com or info@company.com';
const emailPattern = /[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}/g;

const emailMatches = text.match(emailPattern);
console.log(emailMatches); // ['support@example.com', 'info@company.com']

Replacing Text

Regular expressions can be used to replace text in strings. You can use the String object’s replace method for this purpose.

1. Replacing All Instances

If you want to replace all instances of a word with another word, you can use a regular expression with the global flag /g. For example, replacing all occurrences of “apple” with “fruit” in a string:

JavaScript:

const text = 'I have an apple, and I love apples.';
const pattern = /apple/g;

const replacedText = text.replace(pattern, 'fruit');
console.log(replacedText); // 'I have an fruit, and I love fruits.'

2. Replacing Case-Insensitive

Regular expressions can also handle case-insensitive replacements. To replace “apple” with “fruit” regardless of case, use the case-insensitive flag /i:

JavaScript:

const text = 'I have an Apple, and I love Apples.';
const pattern = /apple/gi;

const replacedText = text.replace(pattern, 'fruit');
console.log(replacedText); // 'I have an fruit, and I love fruits.'

3. Dynamic Replacements

You can even perform dynamic replacements. For instance, replacing numbers with their squares:

JavaScript:

const text = 'The squares of 2, 3, and 4 are 4, 9, and 16, respectively.';
const pattern = /\d+/g;

const replacedText = text.replace(pattern, match => {
  const num = parseInt(match);
  return num * num;
});

console.log(replacedText); // 'The squares of 4, 9, and 16 are 16, 81, and 256, respectively.'

Validation and Sanitization

Regular expressions are also invaluable for validating and sanitizing user inputs.

1. Email Validation

You can validate email addresses using regular expressions to ensure they match the expected format:

JavaScript:

const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
const email = 'user@example.com';

if (emailPattern.test(email)) {
  console.log('Valid email address');
} else {
  console.log('Invalid email address');
}

2. Removing HTML Tags

Regular expressions can help remove or sanitize HTML tags from user-generated content to prevent cross-site scripting (XSS) attacks:

JavaScript:

const htmlContent = '<h1>Welcome!</h1><p>Click <a href="https://example.com">here</a></p>';
const sanitizedContent = htmlContent.replace(/<\/?[^>]+(>|$)/g, '');

console.log(sanitizedContent); // 'Welcome!Click here'

Conclusion

Regular expressions are a versatile tool for string manipulation in JavaScript. They allow you to find, replace, and validate text based on specific patterns. By mastering regular expressions, you can efficiently handle a wide range of tasks related to string manipulation and text processing.