Add Space after each Comma in a String using JavaScript

avatar

Borislav Hadzhiev

Tue Nov 16 20212 min read

Add Space after each Comma in a String #

Use the replaceAll() method to add a space after each comma in a string, e.g. str.replaceAll(',', ', '). The replaceAll() method will return a new string, where all occurrences of a comma are replaced with a comma and a space.

index.js
const str = 'a,b,c'; const spaced = str.replaceAll(',', ', '); console.log(spaced); // ๐Ÿ‘‰๏ธ "a, b, c"

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

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

For our purposes, we replace each comma with a comma and a space.

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

The replaceAll method is not supported in Internet Explorer. If you need to support the browser, use the String.replace method instead.

To add a space after each comma in a string, call the replace() method on the string and replace each comma with a comma and a space, e.g. str.replace(/,/g, ', '). The replace method will return a new string where each comma is followed by a space.

index.js
// Supported in IE const str = 'a,b,c'; const spaced = str.replace(/,/g, ', '); console.log(spaced); // ๐Ÿ‘‰๏ธ "a, b, c"

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

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

Inside of the regex, we match a comma and we use the g (global) flag to match every occurrence of a comma in the string, 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.

The second parameter we passed to the replace method is the replacement string for each match.

If you're not a fan of regular expressions, you could use the String.split() method.

To add a space after each comma in a string:

  1. Call the split() method on the string and split it on each comma
  2. Call the join() method on the result and join it by a comma and a space
  3. The new string will have each comma followed by a space
index.js
// Supported in IE const str = 'a,b,c'; const spaced = str.split(',').join(', '); console.log(spaced); // ๐Ÿ‘‰๏ธ "a, b, c"

The only parameter we passed to the split() method is a separator. The method returns an array of substrings split on each occurrence of the provided separator.

index.js
const str = 'a,b,c'; // ๐Ÿ‘‡๏ธ ['a', 'b', 'c'] console.log(str.split(','));

The final step is to use the Array.join method and join the array into a string.

The parameter we passed to the join method is a separator - in our case a comma followed by a space.

This is a more manual approach of replacing each comma with a comma and a space.

My preferred approach would be to use the replaceAll method where possible, as it can be used without a regular expression and is pretty intuitive and easy to read.

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