Kodeclik Blog

Javascript trimEnd()

Sometimes in Javascript you have a string variable that might contain extraneous whitespace characters at the end and we might wish to delete those nuisance characters. trimEnd() is a method of the String class that serves exactly this purpose!

To explore how this works we need to we will write and embed our Javascript code inside a HTML page like so:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Javascript trimEnd()</title>
</head>

<body>
  <script>
  </script>
</body>

</html>

In the above HTML page you see the basic elements of the page like the head element containing the title (“Javascript trimEnd()”) and a body with an empty script tag. The Javascript code goes inside these tags. So in the code examples below, remember to substitute that code in between the tags.

Now let us move onto the actual Javascript code. Below is a simple example:

let str = "Kodeclik Online Academy   ";
console.log(str.length); 
str = str.trimEnd();
console.log(str.length)
console.log(str);

In this example, the trimEnd() method removes the whitespace from the end of the string, leaving only the text " Kodeclik Online Academy". If you insert the above Javascript code in between the script tags of your HTML page and load the page in your browser, you will see the following in your console:

26
23
Kodeclik Online Academy

We can use trimEnd() in situations where we want to remove whitespace from the end of a string, but not from the beginning or middle. For example, if we are working with user input and want to remove any trailing whitespace before processing the input, we can use trimEnd() to ensure that the input is clean and consistent

To show how that can work, let us create a simple webpage with an input textbox where a user can type a string and lets place a button which upon clicking will invoke the trimEnd() method and display the trimmed string. To make sure it really trimmed it, we will append a dollar character at the end of the string (so it makes it clear there are no whitespace characters on the page). Here is some code to do precisely this:

<!DOCTYPE html>
<html>
  <head>
    <title>Trim End Example</title>
  </head>
  <body>
    <label for="input">Enter some text:</label>
    <input type="text" id="input">
    <button onclick="trimInput()">Trim End</button>
    <p id="output"></p>
    <script>
      function trimInput() {
        let input = document.getElementById("input").value;
        let trimmed = input.trimEnd() + "$";
        document.getElementById("output").textContent = trimmed;
      }
    </script>
  </body>
</html>

In the above code, we create an HTML page with a label, an input textbox, a button, and a paragraph element. We also include a script that defines a function called trimInput(). When the button is clicked, the trimInput() function is called. The function gets the value of the input textbox, trims the whitespace from the end of the string using trimEnd(), adds the dollar character, and sets the text content of the paragraph element to the trimmed string.

Below is an example of how this works (we typed Kodeclik followed by some space characters in the textbox):

Thus trimEnd() is a very useful method in Javascript that will come in handy when you are building pages that process user input that might have a lot of extraneous characters. We can use this code in situations where we want to allow users to input text and then clean up any trailing whitespace before processing the input. The $ character can be replaced with any other character or symbol that makes sense for the context of the application (or removed completely because we are using it here simply for purposes of display).

If you liked this blogpost and want to learn more about validating values, see our blogpost on the Javascript double question mark operator. Also learn about Javascript toFixed().

Want to learn Javascript with us? Sign up for 1:1 or small group classes.

Javascript trimEnd()

Join our mailing list