Remove the Leading and Trailing Comma from a String in JS

avatar

Borislav Hadzhiev

Tue Oct 26 20212 min read

Remove the Leading and Trailing Comma from a String #

To remove the leading and trailing comma from a string, call the replace() method with the following regular expression as the first parameter - /(^,)|(,$)/g and an empty string as the second. The method will return a copy of the string without the leading or trailing comma.

index.js
const str = ',apple,banana,kiwi,grapefruit,'; const removed = str.replace(/(^,)|(,$)/g, ''); // ๐Ÿ‘‡๏ธ "apple,banana,kiwi,grapefruit" console.log(removed);
If you're looking to avoid regular expressions, scroll down to the next code snippet.

In the code snippet, we used the String.replace method to remove all the commas from the string.

We passed the following parameters to the replace method:

  1. a regular expression to match in the string.
  2. the replacement for each match. Because we want to remove the leading and trailing comma, we provided an empty string as the replacement.

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

The caret ^ matches the beginning of the input and the dollar sign $ - the end of the input.

The pipe | symbol in our regular expression stands for or. We match for a comma in the beginning or a comma in the end of the string.

We used the g (global) flag, because we want to match not just the first occurrence (the comma in the beginning), but also the comma in the end.

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 the string contains no leading or trailing comma, the replace method would just return a copy of the string.

An alternative approach is to use the startsWith and endsWith methods to verify if the string starts with and / or ends with a comma.

index.js
function removeCommas(str) { if (str.startsWith(',') && str.endsWith(',')) { return str.slice(1, -1); } if (str.startsWith(',')) { return str.slice(1); } if (str.endsWith(',')) { return str.slice(0, -1); } return str; } // ๐Ÿ‘‡๏ธ "apple,banana,kiwi,grapefruit" console.log(removeCommas(',apple,banana,kiwi,grapefruit,')); // ๐Ÿ‘‡๏ธ "apple,banana,kiwi,grapefruit" console.log(removeCommas('apple,banana,kiwi,grapefruit,')); // ๐Ÿ‘‡๏ธ "apple,banana,kiwi,grapefruit" console.log(removeCommas(',apple,banana,kiwi,grapefruit')); // ๐Ÿ‘‡๏ธ "apple,banana,kiwi,grapefruit" console.log(removeCommas('apple,banana,kiwi,grapefruit'));

We handle multiple scenarios:

  1. The string contains both a leading and a trailing comma
  2. The string contains only a leading comma
  3. The string contains only a trailing comma
  4. The string contains no leading or trailing commas

We passed the following parameters to the String.slice method:

  1. start index - the index of the first character to be included in the new string
  2. end index - extract characters up to, but not including this index. A negative index of -1 means go up to, but not including the last character of the string
Passing an end index parameter of -1 and str.length - 1 is the same. We instruct the slice method to go up to, but not including the last character in the string.

This function is definitely a bit more verbose than the regex, but depending on your expertise with regular expressions, you might find it easier to read.

Further Reading #

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