Replace Spaces with Dashes in a String using JavaScript

avatar

Borislav Hadzhiev

Sat Nov 20 20213 min read

banner

Photo by Justin Luebke

Replace Spaces with Dashes in a String #

To replace the spaces with dashes in a string, call the replaceAll() method on the string, e.g. str.replaceAll(' ', '-'). The replaceAll method will return a new string where all spaces are replaced by dashes.

index.js
const str = 'apple kiwi mango'; // โœ… without regex const result1 = str.replaceAll(' ', '-'); console.log(result1); // ๐Ÿ‘‰๏ธ apple-kiwi-mango // โœ… with regex const result2 = str.replace(/\s+/g, '-'); console.log(result2); // โœ… replace only first space with dash const onlyFirst = str.replace(/\s+/, '-'); console.log(onlyFirst); // ๐Ÿ‘‰๏ธ "apple-kiwi mango"
The replaceAll() example replaces each space with a dash, whereas the replace example replaces one or more spaces next to one another with a single dash.

We passed the following 2 parameters to the String.replaceAll method:

  1. the substring we want to match in the string
  2. the replacement for each match

For our purposes, we replace all spaces with dashes.

The replaceAll method does not change the original string, it returns a new string. Strings are immutable in JavaScript.

An alternative approach is to use the String.replace method.

Replace Spaces with Dashes in a String using replace() #

To replace the spaces with dashes in a string, call the replace() method on the string, passing it the following regular expression - /\s+/g and a dash as parameters. The replace method will return a new string, where each space is replaced by a dash.

index.js
const str = 'apple kiwi mango'; const result1 = str.replace(/\s+/g, '-'); console.log(result1);

The first parameter we passed to the replace method is a regular expression, and the second - the replacement for each match.

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

The \s special character matches whitespace (spaces, tabs, newlines).

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

In other words, if we have three spaces next to one another, they would all count as a single match and get replaced by a single dash.

We used the g (global) flag, because we want to replace all occurrences of a space, and not just the first occurrence.

If you ever need help reading a regular expression, check out this regex cheatsheet from MDN. It's by far the best one out there.

If you only want to replace the first occurrence of a space with a dash, you can remove the g flag.

index.js
const str = 'apple kiwi mango'; // โœ… replace only first space with dash const onlyFirst = str.replace(/\s+/, '-'); console.log(onlyFirst); // ๐Ÿ‘‰๏ธ "apple-kiwi mango"

By default the replace method replaces only the first occurrence of the matched regular expression with the provided replacement string.

You might need to handle a scenario where the string contains leading or trailing spaces. In this case, you can use the trim() method.
index.js
const str = ' apple kiwi mango '; const result3 = str.trim().replace(/\s+/g, '-'); console.log(result3); // ๐Ÿ‘‰๏ธ "apple-kiwi-mango"

The String.trim removes any leading or trailing spaces from a string.

index.js
console.log(' aaa '.trim()); // ๐Ÿ‘‰๏ธ "aaa"

This handles the edge case where we replace the leading or trailing spaces from a string with dashes.

index.js
const str = ' apple kiwi mango '; const result3 = str.replace(/\s+/g, '-'); console.log(result3); // ๐Ÿ‘‰๏ธ "-apple-kiwi-mango-"

If trim() is not used and the string contains leading or trailing spaces, we get a result that starts/ends with a dash.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee