Modern JavaScript (ES2021)

String.replaceAll()

Replace all occurrences at once - no regex needed!

Find videos you like?

Save to resource drawer for future reference!

What is String.replaceAll()?

replaceAll() replaces every occurrence of a substring! Unlike replace() which only replaces the first match, replaceAll() changes all matches - and you don't need regex!

No More Regex Gymnastics!

Before: str.replace(/find/g, 'replace'). Now: str.replaceAll('find', 'replace')!

Example 1: Replace All Occurrences

Simple string replacement without regex

javascript

code

DarkEditable

// Old way with replace() - only first match
const text1 = 'Hello Hello Hello';
const result1 = text1.replace('Hello', 'Hi');
console.log(result1);
// "Hi Hello Hello" ❌ (only first one replaced)

// Old way with regex - all matches
const result2 = text1.replace(/Hello/g, 'Hi');
console.log(result2);
// "Hi Hi Hi" ✅ (but requires regex)

// New way with replaceAll() - clean and simple!
const result3 = text1.replaceAll('Hello', 'Hi');
console.log(result3);
// "Hi Hi Hi" ✅ (no regex needed!)

// Replace with different string
const sentence = 'I love cats. Cats are great. My cat is cute.';
const updated = sentence.replaceAll('cat', 'dog').replaceAll('Cat', 'Dog');
console.log(updated);
// "I love dogs. Dogs are great. My dog is cute."

// Remove all occurrences (replace with empty)
const dirty = 'a-b-c-d-e';
const clean = dirty.replaceAll('-', '');
console.log(clean);
// "abcde"

// Replace numbers
const code = '123-456-789';
const masked = code.replaceAll(/\d/g, '*');  // Can use regex too
console.log(masked);
// "***-***-***"

Console Output

Click "Run Code" to see output here...

Example 2: Real-World Use Cases

Practical scenarios for replaceAll

javascript

code

DarkEditable

// 1. Clean user input
function sanitizeInput(input) {
  return input
    .replaceAll('<', '&lt;')
    .replaceAll('>', '&gt;')
    .replaceAll('&', '&amp;');
}

console.log(sanitizeInput('<script>alert("xss")</script>'));
// "&lt;script&gt;alert("xss")&lt;/script&gt;"

// 2. Format phone numbers
function formatPhone(phone) {
  return phone
    .replaceAll('(', '')
    .replaceAll(')', '')
    .replaceAll('-', '')
    .replaceAll(' ', '');
}

console.log(formatPhone('(555) 123-4567'));
// "5551234567"

// 3. Template replacement
function fillTemplate(template, data) {
  let result = template;
  
  for (let key in data) {
    result = result.replaceAll(`{{${key}}}`, data[key]);
  }
  
  return result;
}

const email = 'Hello {{name}}, your order {{orderId}} is ready!';
const filled = fillTemplate(email, {
  name: 'Alice',
  orderId: '#12345'
});

console.log(filled);
// "Hello Alice, your order #12345 is ready!"

// 4. Remove special characters
function slugify(text) {
  return text
    .toLowerCase()
    .replaceAll(' ', '-')
    .replaceAll('&', 'and')
    .replaceAll(/[^a-z0-9-]/g, '');
}

console.log(slugify('Hello World & Welcome!'));
// "hello-world-and-welcome"

// 5. Update configuration paths
function updatePaths(config, oldPath, newPath) {
  return config.replaceAll(oldPath, newPath);
}

const config = 'path=/old/path, backup=/old/path/backup';
console.log(updatePaths(config, '/old/path', '/new/path'));
// "path=/new/path, backup=/new/path/backup"

// 6. Replace with function
const text = 'Price: $10, Total: $20';
const converted = text.replaceAll(/\$(\d+)/g, (match, price) => {
  return `€${price * 0.85}`;
});

console.log(converted);
// "Price: €8.5, Total: €17"

Console Output

Click "Run Code" to see output here...

replaceAll() vs replace()

Feature	replace()	replaceAll()
String replacement	First only	All matches ✅
Regex with /g flag	All matches	All matches
Requires regex	For all matches	No ✅
ES Version	ES3	ES2021

Key Takeaways

🔄

All Matches

Replaces every occurrence, not just first

✨

No Regex Required

Plain strings work (but regex still supported)

🔧

Chainable

Can chain multiple replaceAll() calls

💡

ES2021

Modern convenience method

Previous Topic

Promise.any

Returns first fulfilled promise, ignoring rejections (ES2021).

Next Topic

WeakRef & FinalizationRegistry

Weak references and cleanup callbacks for advanced memory management (ES2021).

Ask a Question

Have a question about String.replaceAll? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

Modern JavaScript (ES2021)

String.replaceAll()

Replace all occurrences at once - no regex needed!

Find videos you like?

Save to resource drawer for future reference!

What is String.replaceAll()?

replaceAll() replaces every occurrence of a substring! Unlike replace() which only replaces the first match, replaceAll() changes all matches - and you don't need regex!

No More Regex Gymnastics!

Before: str.replace(/find/g, 'replace'). Now: str.replaceAll('find', 'replace')!

Example 1: Replace All Occurrences

Simple string replacement without regex

javascript

code

DarkEditable

// Old way with replace() - only first match
const text1 = 'Hello Hello Hello';
const result1 = text1.replace('Hello', 'Hi');
console.log(result1);
// "Hi Hello Hello" ❌ (only first one replaced)

// Old way with regex - all matches
const result2 = text1.replace(/Hello/g, 'Hi');
console.log(result2);
// "Hi Hi Hi" ✅ (but requires regex)

// New way with replaceAll() - clean and simple!
const result3 = text1.replaceAll('Hello', 'Hi');
console.log(result3);
// "Hi Hi Hi" ✅ (no regex needed!)

// Remove all occurrences (replace with empty)
const dirty = 'a-b-c-d-e';
const clean = dirty.replaceAll('-', '');
console.log(clean);
// "abcde"

// Replace numbers
const code = '123-456-789';
const masked = code.replaceAll(/\d/g, '*');  // Can use regex too
console.log(masked);
// "***-***-***"

Console Output

Click "Run Code" to see output here...

Example 2: Real-World Use Cases

Practical scenarios for replaceAll

javascript

code

DarkEditable

// 1. Clean user input
function sanitizeInput(input) {
  return input
    .replaceAll('<', '&lt;')
    .replaceAll('>', '&gt;')
    .replaceAll('&', '&amp;');
}

console.log(sanitizeInput('<script>alert("xss")</script>'));
// "&lt;script&gt;alert("xss")&lt;/script&gt;"

// 2. Format phone numbers
function formatPhone(phone) {
  return phone
    .replaceAll('(', '')
    .replaceAll(')', '')
    .replaceAll('-', '')
    .replaceAll(' ', '');
}

console.log(formatPhone('(555) 123-4567'));
// "5551234567"

const email = 'Hello {{name}}, your order {{orderId}} is ready!';
const filled = fillTemplate(email, {
  name: 'Alice',
  orderId: '#12345'
});

console.log(filled);
// "Hello Alice, your order #12345 is ready!"

// 4. Remove special characters
function slugify(text) {
  return text
    .toLowerCase()
    .replaceAll(' ', '-')
    .replaceAll('&', 'and')
    .replaceAll(/[^a-z0-9-]/g, '');
}

console.log(slugify('Hello World & Welcome!'));
// "hello-world-and-welcome"

// 5. Update configuration paths
function updatePaths(config, oldPath, newPath) {
  return config.replaceAll(oldPath, newPath);
}

const config = 'path=/old/path, backup=/old/path/backup';
console.log(updatePaths(config, '/old/path', '/new/path'));
// "path=/new/path, backup=/new/path/backup"

// 6. Replace with function
const text = 'Price: $10, Total: $20';
const converted = text.replaceAll(/\$(\d+)/g, (match, price) => {
  return `€${price * 0.85}`;
});

console.log(converted);
// "Price: €8.5, Total: €17"

Console Output

Click "Run Code" to see output here...

replaceAll() vs replace()

Feature	replace()	replaceAll()
String replacement	First only	All matches ✅
Regex with /g flag	All matches	All matches
Requires regex	For all matches	No ✅
ES Version	ES3	ES2021

Key Takeaways

🔄

All Matches

Replaces every occurrence, not just first

✨

No Regex Required

Plain strings work (but regex still supported)

🔧

Chainable

Can chain multiple replaceAll() calls

💡

ES2021

Modern convenience method

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Promise.any

WeakRef & FinalizationRegistry

JavaScript Code Editor

Building Your Learning Module...

String.replaceAll()

What is String.replaceAll()?

No More Regex Gymnastics!

Example 1: Replace All Occurrences

Example 2: Real-World Use Cases

Key Takeaways

All Matches

No Regex Required

Chainable

ES2021

Promise.any

WeakRef & FinalizationRegistry

JavaScript Code Editor

String.replaceAll()

What is String.replaceAll()?

No More Regex Gymnastics!

Example 1: Replace All Occurrences

Example 2: Real-World Use Cases

Key Takeaways

All Matches

No Regex Required

Chainable

ES2021