Replace Spaces with Dashes in a String using JavaScript

avatar

Borislav Hadzhiev

Last updated: Aug 17, 2022

banner

Photo from Unsplash

Replace Spaces with Dashes in a String #

Use the replaceAll() method to replace spaces with dashes in a 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 doesn't 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() #

Use the replace() method to replace spaces with dashes in a string, e.g. str.replace(/\s+/g, '-'). 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 argument we passed to the replace method is a regular expression, and the second is 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 would 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.

If you only want to replace the first occurrence of a space with a dash, 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, 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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.