How to Remove a Trailing Slash from a String in JavaScript

# Table of Contents

1. Remove a Trailing Slash from a String in JavaScript
2. Remove a trailing slash from a String using String.endsWith()

# Remove a Trailing Slash from a String in JavaScript

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.

Copied!
function removeTrailingSlash(str) {
  return str.replace(/\/+$/, '');
}

// 👇️ "bobbyhadz.com"
console.log(removeTrailingSlash('bobbyhadz.com/'));

// 👇️ "bobbyhadz.com"
console.log(removeTrailingSlash('bobbyhadz.com///'));

// 👇️ "bobbyhadz.com"
console.log(removeTrailingSlash('bobbyhadz.com'));

The String.replace() method returns a new string with one, some, or all matches of a regular expression replaced with the provided replacement.

The method takes the following parameters:

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

Copied!
function removeTrailingSlash(str) {
  return str.replace(/\/+$/, '');
}

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

We had to escape the forward slash with a backslash because the forward slash is a special character in regular expressions.

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 your string doesn't end with a forward slash, the replace() method returns the string as is, without removing anything.

Copied!
function removeTrailingSlash(str) {
  return str.replace(/\/+$/, '');
}

// 👇️ "bobbyhadz.com"
console.log(removeTrailingSlash('bobbyhadz.com/'));

// 👇️ "bobbyhadz.com"
console.log(removeTrailingSlash('bobbyhadz.com///'));

// 👇️ "bobbyhadz.com"
console.log(removeTrailingSlash('bobbyhadz.com'));

The third string - bobbyhadz.com doesn't end with a trailing slash, so the regular expression is not matched in the string and the replace method returns the original string.

The String.replace() method returns a new string with the matches of the pattern replaced. The method doesn't change the original string.

Copied!
const str = 'bobbyhadz.com/';

const result = str.replace(/\/+$/, '');
console.log(result); // 👉️ "bobbyhadz.com"

console.log(str); // 👉️ "bobbyhadz.com/"

Strings are immutable in JavaScript.

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

# Remove a trailing slash from a String using String.endsWith()

This is a three-step process:

1. Use the endsWith() method to check if the string ends with a slash.
2. If it does, use the slice() method to remove the last character from the string.
3. If it doesn't return the string as is.

Copied!
function removeTrailingSlash(str) {
  return str.endsWith('/') ? str.slice(0, -1) : str;
}

// 👇️ "bobbyhadz.com"
console.log(removeTrailingSlash('bobbyhadz.com/'));
// 👇️ "bobbyhadz.com"
console.log(removeTrailingSlash('bobbyhadz.com'));

The String.endsWith method returns true if the string ends with the specified substring and false otherwise.

Copied!
console.log('bobbyhadz.com/'.endsWith('/')); // 👉️ true
console.log('bobbyhadz.com'.endsWith('/')); // 👉️ false

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

The String.slice() method extracts a section of a string and returns it, without modifying the original string.

The String.slice() method takes the following arguments:

The String.slice() method can be passed negative indexes to count backward.

Copied!
const str = 'bobbyhadz.com';

console.log(str.slice(0, -1)); // 👉️ bobbyhadz.co
console.log(str.slice(0, -2)); // 👉️ bobbyhadz.c

Using an end index of -1 and an end index of string.length - 1 is the same.

We instruct the String.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.

Copied!
function removeTrailingSlash(str) {
  return str.endsWith('/') ? str.slice(0, -1) : str;
}

// 👇️ "bobbyhadz.com"
console.log(removeTrailingSlash('bobbyhadz.com/'));
// 👇️ "bobbyhadz.com"
console.log(removeTrailingSlash('bobbyhadz.com'));

The ternary operator is very similar to an if/else statement.

If the expression to the left of the question mark is truthy, the operator returns the value to the left of the colon, otherwise, the value to the right of the colon is returned.

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.

If you need to remove one or more trailing slashes from a string, use the String.replace() method from the previous subheading.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Get the Part after Last Occurrence in a String in JavaScript
• Replace or Remove all Backslashes in a String in JavaScript