Skip to main content

How to Replace All Dots in a String in JavaScript

Replacing all occurrences of a specific character in a string is a very common task. You might need to replace dots with dashes to create a URL-friendly slug, convert a version number like 1.2.3 to 1_2_3, or simply remove all dots from a string. Modern JavaScript provides a simple and highly readable method for this: String.prototype.replaceAll().

This guide will show you how to use replaceAll() to handle this task effectively. We will also cover the classic replace() method with a regular expression, explaining a critical pitfall to avoid, and briefly touch on the older split()/join() technique.

The replaceAll() method is the most direct and modern way to replace every occurrence of a substring. It is easy to read and clearly expresses your intent.

For example, you have a string with dots that you want to replace with another character, or remove entirely.

// Problem: Replace all dots in this string.
const versionString = '1.2.3';

The solution is to provide the dot character as the first argument and your replacement character as the second. To remove the dots, use an empty string ('') as the replacement.

const versionString = '1.2.3';

// Replace all dots with dashes
const withDashes = versionString.replaceAll('.', '-');
console.log(withDashes);    // Output: '1-2-3'

// Remove all dots
const withoutDots = versionString.replaceAll('.', '');
console.log(withoutDots);   // Output: '123'

Output:

1-2-3
123
note

Important: Strings are immutable in JavaScript. The replaceAll() method does not change the original string; it returns a new, modified string.

The Classic Method: replace() with a Regular Expression​

Before replaceAll() was introduced, the standard way to replace all occurrences was to use the replace() method with a regular expression that had the global (g) flag.

This method is still very common, but it has a significant pitfall when dealing with dots. The dot (.) is a special character in regular expressions—it means "match any character."

This is a common error that causes problems:

  • If you forget that . is a special character, you will get unexpected and incorrect results.
const str = 'a.b.c';

// WRONG: This regex means "replace any character, globally".
const result = str.replace(/./g, '-');

console.log(result);

Output (This is NOT what we wanted!)

-----

The solution is to escape it with a backslash (\) in the regular expression in order to match a literal dot:

const str = 'a.b.c';

// CORRECT: The \. matches a literal dot.
const result = str.replace(/\./g, '-');

console.log(result);

Output:

a-b-c
note

Because of this extra complexity and the potential for error, replaceAll() is the preferred method for simple, literal string replacements.

An Alternative (Verbose) Method: split() and join()​

Another classic technique is to split the string into an array using the dot as a delimiter, and then immediately join the array back together with a new character.

Solution:

const str = 'a.b.c';

// 1. Split the string by the dot into an array.
const parts = str.split('.');
console.log(parts);     // ['a', 'b', 'c']

// 2. Join the array back into a string with a new separator.
const newString = parts.join('-');

console.log(newString); // a-b-c

Output:

['a', 'b', 'c']
a-b-c
note

While this works perfectly, it is less direct and readable than replaceAll(). It's a useful pattern to know but is no longer the primary choice for this task.

Conclusion​

JavaScript offers several ways to replace all dots in a string, but the modern solution is the clearest.

  • The string.replaceAll('.', '-') method is the recommended best practice. It is explicit, highly readable, and has no special character pitfalls.
  • The string.replace(/\./g, '-') method is a powerful classic, but you must remember to escape the dot (\.) to avoid bugs. It's best reserved for more complex pattern-based replacements.
  • The string.split('.').join('-') method is a functional alternative but is less direct than replaceAll().

For simple, literal replacements, replaceAll() is the most professional and maintainable choice.

Table of Contents