How to Remove a Trailing Slash from a String in JavaScript


Borislav Hadzhiev

Last updated: Jul 25, 2022


Photo from Unsplash

Remove a Trailing Slash from a String #

Use the String.replace() method to remove a trailing slash from a string, e.g. str.replace(/\/+$/, ''). The replace method will remove the trailing slash from the string by replacing it with an empty string.

function removeTrailingSlash(str) { return str.replace(/\/+$/, ''); } // 👇️ "" console.log(removeTrailingSlash('')); // 👇️ "" console.log(removeTrailingSlash('')); // 👇️ "" console.log(removeTrailingSlash(''));
If you're looking to avoid regular expressions, scroll down to the next code snippet.

We used the String.replace method to get a new string that doesn't contain any trailing slashes.

We passed the following 2 arguments to the replace method:

  1. A regular expression we want to match in the string.
  2. A replacement string for each match. We want to remove the trailing slash, so we provided an empty string as the replacement.

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

We had to escape the forward slash with a backslash because it is a special character.

The plus + matches the preceding item (the forward slash) 1 or more times.

The dollar $ sign matches the end of the input.

In its entirety the regular expression matches one or more trailing slashes at the end of the string.

If you ever need help reading a regular expression, check out this regex cheatsheet from MDN.

The replace method doesn't change the original string, it returns a new string with one or more matches replaced. Strings are immutable in JavaScript.

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

To remove a trailing slash from a string:

  1. Call the endsWith() method on the string and check if it ends with a slash.
  2. If it ends with a slash, use the slice method to remove the last character from the string.
  3. If it doesn't end with a slash, return the string as is.
function removeTrailingSlash(str) { return str.endsWith('/') ? str.slice(0, -1) : str; } // 👇️ "" console.log(removeTrailingSlash('')); // 👇️ "" console.log(removeTrailingSlash(''));

We used the String.endsWith method to check if the string ends with a slash character.

The method returns true if the string ends with the supplied character and false otherwise.

We used the ternary operator, which is very similar to an if / else statement.

If the string ends with a slash, we call the String.slice method and return the entire string up to the last character.

We passed the following parameters to the 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

JavaScript indexes are zero-based, meaning the index of the first character in the string is 0 and the index of the last character is str.length - 1.

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.

If the string doesn't end with a slash, we simply return the entire string.

Note that this approach doesn't handle the scenario where the string ends with multiple slashes. We only remove the last slash when using the slice method.

Further Reading #

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.