How to replace white space inside a string in JavaScript

By

Learn how to remove or replace all the whitespace inside a string in JavaScript with a regular expression, using the whitespace metacharacter and the g flag.

~~~

To replace all the white space inside a string in JavaScript, call replace() with the regular expression /\s/g. It matches every whitespace character, and you decide what to put in its place.

Replacing all the white space inside a string is a very common need.

For example I last used this inside an API endpoint that received an image. I used the original image name to store it, but if it contained a space it was breaking my functionality (or other special chars, but let’s focus on spaces).

So I researched the best way to do what I wanted. Turns out, a regular expression was what I needed!

Here it is, in full:

const name = 'Hi my name is Flavio'
name.replace(/\s/g, '') //HimynameisFlavio

How to replace white space inside a string in JavaScript

The \s meta character in JavaScript regular expressions matches any whitespace character: spaces, tabs, newlines and Unicode spaces. And the g flag tells JavaScript to replace it multiple times. If you miss it, it will only replace the first occurrence of the white space:

'Hi my name is Flavio'.replace(/\s/, '') //Himy name is Flavio

That’s the pitfall to remember with replace(). If your result only lost the first space, the missing g flag is why.

Replacing with something else

You don’t have to replace with an empty string. For my file name problem, a dash worked better, because the name stays readable:

const fileName = 'photo of my desk.png'
fileName.replace(/\s/g, '-') //photo-of-my-desk.png

Watch out for consecutive spaces though. Each one gets its own replacement:

'photo  of  my desk.png'.replace(/\s/g, '-') //photo--of--my-desk.png

Add a + to the pattern to match one or more whitespace characters in a row, and collapse each run into a single dash:

'photo  of  my desk.png'.replace(/\s+/g, '-') //photo-of-my-desk.png

If you only care about whitespace at the start and end of the string, you don’t need a regular expression at all. trim() does it:

'  hello world  '.trim() //'hello world'

Strings are immutable

Remember that the name value does not change. replace() returns a new string, it never touches the original. So you need to assign the result to a new variable, if needed:

const name = 'Hi my name is Flavio'
const nameCleaned = name.replace(/\s/g, '')

If you need to clean pasted text without writing the regular expression, use my text cleaner.

~~~

Related posts about js: