How to Replace Spaces with Underscores in JavaScript

# Replacing Spaces with Underscores in JavaScript

Use the String.replaceAll() method to replace all spaces with underscores in a JavaScript string, e.g. string.replaceAll(' ', '_').

The replaceAll method returns a new string with all whitespace characters replaced by underscores.

Copied!
const str = 'bobby hadz com';
const replaced = str.replaceAll(' ', '_');

console.log(replaced); // 👉️ bobby_hadz_com

The String.replaceAll() method returns a new string with all matches of a pattern replaced by the provided replacement.

The method takes the following parameters:

The String.replaceAll() method returns a new string with the matches of the pattern replaced. The method doesn't change the original string.

Strings are immutable in JavaScript.

If you have to do this often, define a reusable function.

Copied!
function replaceSpaceWithUnderscore(str) {
  return str.replaceAll(' ', '_');
}

const str = 'bobby hadz com';

const result = replaceSpaceWithUnderscore(str);
console.log(result); // 👉️ bobby_hadz_com

The function takes a string as a parameter, replaces all spaces with underscores in the string and returns the result.

If your string has leading and trailing spaces, you'd get leading and trailing underscores.

Copied!
const str = ' bobby hadz com ';

const result = str.replaceAll(' ', '_');
console.log(result); // 👉️ _bobby_hadz_com_

You can use the trim() method to remove the leading and trailing spaces before calling replaceAll().

Copied!
const str = ' bobby hadz com ';

const result = str.trim().replaceAll(' ', '_');
console.log(result); // 👉️ bobby_hadz_com

# Replace spaces with underscores in JavaScript using String.replace()

Alternatively, you can use the String.replace() method.

Copied!
const str = 'bobby hadz com';
const strUnderscores = str.replace(/ /g, '_');

console.log(strUnderscores); // 👉️ bobby_hadz_com

If you need to replace one or more spaces with a single underscore, use a plus +.

Copied!
const str = 'bobby    hadz    com';
const strUnderscores = str.replace(/ +/g, '_');

console.log(strUnderscores); // 👉️ bobby_hadz_com

The plus + character matches the preceding item (the space) one or more times.

The String.replace() method returns a new string with one, some, or all matches of a regular expression replaced with the provided replacement.

The method takes the following parameters:

The first argument we passed to the replace() method is a regular expression.

The forward slashes / / mark the beginning and end of the regular expression.

In our regular expression, we have a single space.

Copied!
const str = 'bobby hadz com';
const strUnderscores = str.replace(/ /g, '_');

console.log(strUnderscores); // 👉️ bobby_hadz_com

We added the g (global) flag to the regex, which makes the regular expression match all spaces in the string and not just the first occurrence.

# Replace the first occurrence of a space with an underscore

If you were to remove the g flag, only the first occurrence of a space would get replaced with an underscore.

Copied!
const str = 'bobby hadz com';
const strUnderscores = str.replace(/ /, '_');

console.log(strUnderscores); // 👉️ bobby_hadz com

The code sample doesn't use the g flag, so only the first space in the string is replaced by an underscore.

# Replace all whitespace characters with underscores

If you need to replace all whitespace characters with underscores, use the \s special character.

Copied!
const str = 'bobby\nhadz\tcom abc';
const strUnderscores = str.replace(/\s/g, '_');

console.log(strUnderscores); // 👉️ bobby_hadz_com_abc

The \s special character matches spaces, tabs and newlines.

# Replace all spaces with underscores using split() and join()

This is a two-step process:

1. Use the split() method to split the string on each space.
2. Use the join() method to join the array with an underscore separator.

Copied!
const str = 'bobby hadz com';

const result = str.split(' ').join('_');
console.log(result); // 👉️ bobby_hadz_com

The String.split() method takes a separator and splits the string into an array on each occurrence of the provided delimiter.

The String.split() method takes the following 2 parameters:

We split the string on each occurrence of a space.

Copied!
const str = 'bobby hadz com';

// 👇️ [ 'bobby', 'hadz', 'com' ]
console.log(str.split(' '));

The last step is to join the array with an underscore separator.

The Array.join() method concatenates all of the elements in an array using a separator.

The only argument the Array.join() method takes is a separator - the string used to separate the elements of the array.

Copied!
const str = 'bobby hadz com';

const result = str.split(' ').join('_');
console.log(result); // 👉️ bobby_hadz_com

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Replace the First Occurrence of Character in String in JS
• Replace the Last Character in a String in JavaScript
• Replace Last Occurrence of Character in String in JavaScript
• Replace Multiple Characters in a String using JavaScript
• How to Replace Single with Double Quotes in JavaScript