JavaScript String trim() Method

Quiz

The JavaScript String trim() method removes white spaces from both sides of a string and returns a new string. If the original string has no white spaces at the beginning or end, it returns the same string.

To remove whitespace characters from only one end of a string, you can use the trimStart() or trimEnd() methods, depending on which end you want to trim.

Syntax

Following is the syntax of JavaScript String trim() method −

trim()

Parameters

It does not accept any parameters.

Return value

This method returns a new string after removing white-spaces from both its beginning and end.

Example 1

If the original string has no white spaces at both the ends, it returns the same string.

<html>
<head>
<title>JavaScript String trim() Method</title>
</head>
<body>
<script>
   const str = "Tutorials Point";
   document.write("Original string: ", str);
   document.write("<br>New string: ", str.trim());
</script>    
</body>
</html>

Output

The above program returns "Tutorials Point".

Original string: Tutorials Point
New string: Tutorials Point

Example 2

In this example, we use the JavaScript String trim() method to remove the whitespace from both ends of the string " Hello World! ".

<html>
<head>
<title>JavaScript String trim() Method</title>
</head>
<body>
<script>
   const str = " Hello World! ";
   document.write("Original string: ", str);
   document.write("<br>Length of original string: ", str.length);
   document.write("<br>New string: ", str.trim());
   document.write("<br>Length of new string: ", str.trim().length);
</script>    
</body>
</html>

Output

After executing the above program, it trimmed the white spaces from both ends and returned a new string "Hello World!".

Original string: Hello World!
Length of original string: 14
New string: Hello World!
Length of new string: 12

Example 3

Let's see the real-time usage of the JavaScript String trim() method. This method can be used to prevent users from logging in with an empty username and password in the input field.

<html>
<head>
<title>JavaScript String trim() Method</title>
</head>
<body>
<input type="text" placeholder="Username" id = 'uname'>
<br><br>
<input type="password" placeholder="Password" id = 'psw'>
<br><br>
<button onclick="Login()">Submit</button>
<span id = 'msg'></span>
<script>
   function Login(){
      let uname = document.getElementById("uname").value;
      let psw = document.getElementById("psw").value;
      let msg = document.getElementById("msg");
      if(uname.trim().length == 0){
         msg.innerHTML = "Username can't be empty...!";
      }
      else if(psw.trim().length == 0){
         msg.innerHTML = "Password can't be empty...!";
      }
      else{
         msg.innerHTML = "Submitted successfully...!";
      }
    }
</script>    
</body>
</html>

Output

The program displays a UI in the top left corner of the screen. It has two input fields for username and password, and a button. If the fields are blank and the button is clicked, some error messages appear near the button.

Print Page