JavaScript Notes

JavaScript String Replacing - replace(), replaceAll() & Regex Patterns Guide

Master JavaScript string replacing: replace(), replaceAll(), regex patterns, capture groups, callback replacer functions, and real-world text transformation examples.

What is String Replacing?

String replacing creates a new string where matched text is swapped out for replacement text. The original string is never changed (immutable).

Think of it like Find & Replace in a word processor — you search for a word and replace it, but JavaScript gives you much more power with regex and callback functions.

replace() — Replace First Match

js example

const sentence = "JavaScript is great. JavaScript is fun.";

const result = sentence.replace("JavaScript", "JS");
console.log(result);
console.log(sentence); // original unchanged

Output

JS is great. JavaScript is fun.
JavaScript is great. JavaScript is fun.

replace() only replaces the first occurrence when given a plain string.

replaceAll() — Replace All Matches (ES2021)

js example

const text = "cat and cat and cat";

const result = text.replaceAll("cat", "dog");
console.log(result);

Output

dog and dog and dog

replace() with Regex — Replace ALL (Classic Way)

Using the g (global) flag on a regex is the classic pre-ES2021 way to replace all occurrences:

js example

const message = "Hello World, Hello JavaScript, Hello Students";

// Using regex with g flag — replaces ALL
const result1 = message.replace(/Hello/g, "Hi");
console.log(result1);

// Case-insensitive replace with gi flags
const result2 = message.replace(/hello/gi, "Hey");
console.log(result2);

Output

Hi World, Hi JavaScript, Hi Students
Hey World, Hey JavaScript, Hey Students

replace() vs replaceAll() — When to Use Which

Situation	Method	Example
Replace only FIRST occurrence	`replace("old", "new")`	Fix one typo
Replace ALL (modern code)	`replaceAll("old", "new")`	Replace all words
Replace ALL (older code / pattern)	`replace(/pattern/g, "new")`	Classic approach
Case-insensitive replace	`replace(/pattern/gi, "new")`	Only regex supports this
Pattern-based replace	`replace(/regex/, "new")`	Complex patterns
Replace with dynamic logic	`replace(/regex/, fn)`	Callback replacer

Replace with Regex Patterns

Remove all digits

js example

const mixed = "Hello123World456";
const lettersOnly = mixed.replace(/\d/g, "");
console.log(lettersOnly);

Output

HelloWorld

Remove all non-alphanumeric characters

Example

const dirty = "Hello!!! World@#$%"; const clean = dirty.replace(/[^a-zA-Z0-9\s]/g, ""); console.log(clean);

Output

Hello World

Replace multiple spaces with one

js example

const text = "Hello   World    JavaScript";
const normalized = text.replace(/\s+/g, " ");
console.log(normalized);

Output

Hello World JavaScript

Replace with Capture Groups

Capture groups (pattern) in regex let you reuse matched parts in the replacement using $1, $2, etc.

js example

// Reformat date from YYYY-MM-DD to DD/MM/YYYY
const isoDate = "2026-06-12";
const formatted = isoDate.replace(/(\d{4})-(\d{2})-(\d{2})/, "$3/$2/$1");
console.log(formatted);

Output

12/06/2026

text example

Pattern:  (\d{4}) - (\d{2}) - (\d{2})
Capture:  $1       $2         $3

"2026" → $1
"06"   → $2
"12"   → $3

Replace with: "$3/$2/$1" → "12/06/2026"

Swap first and last name

js example

const name = "Sharma, Priya";
const swapped = name.replace(/(\w+),\s(\w+)/, "$2 $1");
console.log(swapped);

Output

Priya Sharma

Replace with a Callback Function

The replacement can be a function — called for each match, its return value becomes the replacement.

Example

// Capitalize first letter of each word const title = "the javascript master course"; const capitalized = title.replace(/\b\w/g, char => char.toUpperCase()); console.log(capitalized);

Output

The Javascript Master Course

Censor specific words

Example

const badWords = ["bad", "terrible", "awful"]; const review = "The service was bad and the food was terrible"; const censored = review.replace( new RegExp(badWords.join("|"), "gi"), match => "*".repeat(match.length) ); console.log(censored);

Output

The service was *** and the food was ********

Double all numbers in text

Example

const formula = "Price: 50, Tax: 10, Discount: 5"; const doubled = formula.replace(/\d+/g, n => Number(n) * 2); console.log(doubled);

Output

Price: 100, Tax: 20, Discount: 10

Real World Use Cases 🌍

1. Generate URL slug

Example

function generateSlug(title) { return title .toLowerCase() .trim() .replace(/[^a-z0-9\s-]/g, "") // remove special chars .replace(/\s+/g, "-") // spaces to hyphens .replace(/-+/g, "-"); // multiple hyphens to one } console.log(generateSlug(" JavaScript Master Course! (2026) ")); console.log(generateSlug("How to use React & Node.js together?"));

Output

javascript-master-course-2026
how-to-use-react-nodejs-together

2. Sanitize user input

js example

function sanitizeInput(input) {
  return input
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;");
}

const userInput = '<script>alert("XSS")</script>';
console.log(sanitizeInput(userInput));

Output

&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;

3. Format phone number

js example

function formatPhone(raw) {
  const digits = raw.replace(/\D/g, ""); // remove non-digits
  return digits.replace(/(\d{5})(\d{5})/, "$1-$2");
}

console.log(formatPhone("9876543210"));
console.log(formatPhone("+91 98765 43210"));

Output

98765-43210
98765-43210

4. Highlight search term in text

js example

function highlight(text, term) {
  const regex = new RegExp(`(${term})`, "gi");
  return text.replace(regex, "**$1**");
}

console.log(highlight("JavaScript is a scripting language", "script"));

Output

Java**Script** is a **script**ing language

Common Mistakes ❌

1. Using replace() to replace all, forgetting it's first-only

js example

// ❌ Wrong — only replaces first "a"
const str = "banana";
console.log(str.replace("a", "o")); // "bonana"

// ✅ Correct — replace all with replaceAll or regex
console.log(str.replaceAll("a", "o")); // "bonono"
console.log(str.replace(/a/g, "o"));   // "bonono"

2. Mutating the original (forgetting to capture return)

js example

// ❌ Wrong — result discarded
let msg = "Hello World";
msg.replace("World", "JavaScript");
console.log(msg); // "Hello World" — unchanged!

// ✅ Correct — capture the new string
msg = msg.replace("World", "JavaScript");
console.log(msg); // "Hello JavaScript"

3. Special characters in replacement string

js example

// ❌ Unexpected: $ has special meaning in replacement
const str = "price: 100";
console.log(str.replace("100", "$50")); // "$50" has special meaning

// In replacement string:
// $& = matched substring
// $1 = first capture group
// $` = text before match
// $' = text after match

// ✅ Escape the $ if you want a literal dollar sign
console.log(str.replace("100", "\\$50")); // "price: $50"

Interview Questions 🎯

Q1. What is the difference between replace() and replaceAll()? > replace() replaces only the first occurrence when given a string. replaceAll() replaces all occurrences. To replace all with replace(), use a regex with the g flag.

Q2. How do you make a case-insensitive replacement? > Use a regex with the i flag: str.replace(/pattern/gi, "replacement"). Neither replace() nor replaceAll() with a plain string supports case-insensitivity.

Q3. What are capture groups in replace? > Parentheses (pattern) in regex create capture groups. In the replacement string, $1, $2 refer to what those groups matched. Great for reformatting strings like dates or names.

Q4. How can you use a function as the replacement in replace()? > str.replace(regex, (match, ...groups) => newValue). The function receives the match and capture groups, and its return value is used as the replacement.

Q5. Does replace() mutate the original string? > Never. Strings are immutable. replace() returns a new string. You must assign the result.

Q6. How do you remove all whitespace from a string? > str.replace(/\s+/g, "") removes all whitespace. Or str.replaceAll(" ", "") for only spaces.

Q7. How do you dynamically create a regex for replace? > Use new RegExp(pattern, flags). E.g., new RegExp(word, "gi") creates a case-insensitive global regex from a variable.

Key Takeaways 🏁

replace() replaces only the first match with a plain string
replaceAll() replaces all matches (ES2021)
Use replace(/pattern/g, ...) for regex-based replace-all
Capture groups $1, $2 in replacement allow reformatting
Callback function as replacer enables dynamic, logic-based replacement
All methods return new strings — always capture the return value
The i flag makes matching case-insensitive (only in regex, not plain string)

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript String Replacing - replace(), replaceAll() & Regex Patterns Guide.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, strings, string, replacing

Continue learning this concept

StringsJavaScript String Basics - Complete Guide to Strings with ExamplesMaster JavaScript string fundamentals: creation, indexing, immutability, length, escape characters, string comparison, and core concepts with visual diagrams and examples.StringsJavaScript String Methods - Complete Reference with Examples & OutputComplete JavaScript string methods guide: toUpperCase, toLowerCase, trim, slice, split, join, padStart, repeat, at(), and all essential methods with examples and output blocks.StringsJavaScript String Programs - Practice Problems with SolutionsSolve JavaScript string programs: palindrome, anagram, reverse, capitalize, count vowels, remove duplicates, and common coding interview string problems with complete solutions.StringsJavaScript String Searching Methods - includes, indexOf, startsWith, match GuideMaster JavaScript string searching: includes(), indexOf(), lastIndexOf(), startsWith(), endsWith(), search(), match() with visual comparisons and real-world examples.StringsJavaScript Template Literals (ES6) - Complete Guide with Tagged TemplatesMaster JavaScript template literals: string interpolation, multi-line strings, expressions, nested templates, tagged templates, and real-world HTML generation examples.Advanced JavascriptJavaScript apply() Method - Complete Guide with ExamplesMaster JavaScript apply() method with syntax, this binding, array arguments, function borrowing, real-world use cases, common mistakes, and interview Q&A.

PreviousJavaScript String Programs - Practice Problems with Solutions NextJavaScript String Searching Methods - includes, indexOf, startsWith, match Guide