How To Remove A Trailing Slash From A String In JavaScript

How to Remove a Trailing Slash from a String in JavaScript

This article will show you how to remove a Trailing Slash from a string in JavaScript. Here are some ways to do it with examples to make it easier for readers to understand.

How to remove a Trailing Slash from a string in JavaScript

The Trailing Slash is a slash that appears at the URL’s end.

A directory is indicated by a URL that ends with the slash https://learnshareit.com/category/python/. On the other hand, and a file typically appears at the end of a URL without a slash, such as https://learnshareit.com/category.

In some situations, we must use a Trailing Slash from a string; see how to do this below.

Use String.endsWith()method

The endsWith function checks if a text string ends with another string.

Syntax:

endsWith( Text, EndText )

Parameters:

  • Text: Required. Text to check.
  • EndText: Required. Text to search at the end of the Text. If EndText is an empty string, EndsWith will return true.

The following code is how you use the endWith() method to remove a Trailing Slash from a string.

Code:

import {useState} from 'react'

export default function App() {
  const [url,setUrl]=useState("https://learnshareit.com/category/python/");
 
  const handleClick=()=>{
    setUrl(url.endsWith('/') ? url.slice(0,-1) : url);
  }
  return (
    <div>
      <h2>Remove a Trailing Slash from a String | LearnShareIT</h2>
      <h3>Url: {url}</h3>
      <button onClick={handleClick}>Remove Trailing Slash</button>
    </div>
  );
}

Output:

Because endsWith() will return true and false, we can check if the URL ends with “/”. Then we will remove it and if not, keep it.

Use String.replace() method 

The String. replace() method finds a substring in the string and replaces it with a value provided by the user.

Syntax: 

string.replace(search value, new value)

Parameters:

  • Search value: The value to be searched for in the String.
  • New value: will be substituted for the search value in the new string returned by the method.

Code:

import {useState} from 'react'

export default function App() {
  const [url,setUrl]=useState("https://learnshareit.com/category/python/");
 
  const handleClick=()=>{
    setUrl(url.replace(/\/$/, ''));
  }
  return (
    <div>
      <h2>Remove a Trailing Slash from a String | LearnShareIT</h2>
      <h3>Url: {url}</h3>
      <button onClick={handleClick}>Remove Trailing Slash</button>
    </div>
  );
}

So when you encounter a “/” at the end of the URL, just like the definition of Trailing Slash, it will replace it with an empty string. The return results of the two methods above are the same. Good luck.

Summary

To summarize, this article showed you how to remove a Trailing Slash from a string in JavaScript. Some practical ways have been introduced in the article, like using the String.endsWith() and String. replace() method. Let’s try these methods to get your desired results. Good luck for you!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *