How to Replace Multiple Spaces with a Single Space in JavaScript?

An straightforward way to replace multiple spaces with a single space in JavaScript is to use the String.replace() method. The replace() method takes two arguments: the pattern to search for(which can be a string or a regular expression), and the string or function to replace the matches found in the given string.

As we want to replace multiple spaces with a single space, therefore, we have to create a regular expression which can match single/multiple spaces within the string and then replace all those matches with a single space.

See this example:

// Original string
const str = "   This   is a    string    ";

// Replace multiple spaces with a single space
const newStr = str.replace(/\s+/g, " ");

console.log(newStr);
// Output: 👉 " This is a string "

In this example, we have passed a regular expression /\s+/g as a first argument to the replace() method which matches all the spaces(single or multiple) in the string and replaces them with the second argument i.e. a single space.

In the regular expression /\s+/g:

  • '/' – Represents the beginning and end of the regular expression.
  • '\s' – Matches any whitespace character including spaces, tabs, newlines, etc.
  • '+' – Represents one or more occurrences of the preceding character.
  • 'g' – This is a flag which represents that the whitespace character should be matched throughout the string. Without the g flag, only the first occurrence of multiple spaces will be replaced with a single space.

If you want to replace only the first occurrence of multiple spaces with a single space, you can remove the g flag from the regular expression.

One more thing, if you want to completely remove the spaces from the beginning and end of the string, you can simply call the trim() method on it.


2. Using split() and join() Methods

In this approach, we first split the given string at single or multiple spaces using the split() method and then join them back with a single space using the join() method.

The split() method takes a single argument which can be a string or a regular expression and on each occurrence of a match, we split the string into an array.

The join() method on the other hand joins all elements of an array with a given string.

See this example:

// Original string
const str = "   This   is a    string    ";

// Replace multiple spaces with a single space
const newStr = str.split(/[\s,\t,\n]+/g).join(" ");

console.log(newStr);
// Output: 👉 " This is a string "

In the regular expression /[\s,\t,\n]+/g, the characters \s, \t and \n represents whitespace, tab space and newline characters respectively. The remaining things remain same as discussed in previous example.

If you want to completely remove the spaces from the beginning and end of the string, you can call the trim() method on the string before calling the split() an join() methods.

See this example:

// Original string
const str = "   This   is a    string    ";

// Replace multiple spaces with a single space
const newStr = str.trim().split(/[\s,\t,\n]+/g).join(" ");

console.log(newStr);
// Output: 👉 "This is a string"

I hope you find this article helpful. Thanks for reading.

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts

Leave a Comment