Updated April 13, 2023
Definition of jQuery trim
The jQuery UI trim() method is used to remove the whitespace from both ends of a string. The jQuery UI trim() method is a built-in method. Sometimes we need to trim a string that removes the whitespace from the start and end of the string, but the whitespaces in the middle of the string are preserved, so jQuery provides the trim() method for this purpose. The trim() method is a string method, so when we call this method we will pass a string parameter.
The syntax of the JQuery trim() method.
jQuery.trim( mystr ) ;Parameters –
- mystr – This is not an optional parameter, that specifies a string that is to be trimmed.
- Return value – The return value of this method is a string after removing the whitespaces from both end.
Examples of jQuery trim
Example of jQuery UI trim() method for passing a string as a parameter.
Next, we write the HTML code to understand the jQuery UI trim() method more clearly with the following example, where the trim() method is used to remove the spaces from both sides of the string, as below.
Example #1
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery trim() method </title>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
pre {
display : block;
border : 2px solid green;
color : red;
padding : 6px;
margin : 12px;
}
</style>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
var str= " Hello, how are you ";
$(".original").html(str);
});
$("#btn2").click(function(){
var str= " Hello, how are you ";
var trimstr = jQuery.trim( str );
$(".trimmed").html(trimstr);
});
});
</script>
</head>
<body>
<h2> The Original string is : </h2>
<button id= "btn1"> Original </button>
<pre class= "original"> </pre>
<h2> The trimed string is : </h2>
<button id= "btn2">Trim</button>
<pre class= "trimmed"> </pre>
</body>
</html>An output of the above code is:
Once we click on the “original” button, the output is –
And once we click on the “Trim” button, the output is:
As in the above program the string ” Hello, how are you ” is store in the str variable, if we see this string contain the whitespaces in the front and end of the string. So to remove these spaces the trim() method is used which is accepted the ” Hello, how are you ” string and returned the output as “Hello, how are you”, which is printing as we can see in the output.
Example of jQuery UI trim() method for call on string.
Next we write the html code to understand the jQuery UI trim() method more clearly with the following example, where the trim() method is used to remove the spaces from the left side of the string by calling the trim() method on the string only, as below –
Example #2
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery trim() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
pre {
display : block;
border : 2px solid green;
color : red;
padding : 6px;
margin : 12px;
}
</style>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
var str= " Hello, how are you";
$(".original").html(str);
});
$("#btn2").click(function(){
var str = " Hello, how are you";
str = str.trim( str );
$(".trimmed").html(str);
});
});
</script>
</head>
<body>
<h2> The Original string is : </h2>
<button id= "btn1"> Original </button>
<pre class= "original"> </pre>
<h2> The trimed string is : </h2>
<button id= "btn2">Trim</button>
<pre class= "trimmed"> </pre>
</body>
</html>An output of the above code is:
Once we click on the “original” button, the output is –
And once we click on the “Trim” button, the output is –
As in the above program the string ” Hello, how are you” is store in the str variable, if we see this string contain the whitespace or spaces only in the front of the string. To remove this space the trim() method is used which is accepted the ” Hello, how are you” string and returned the output as “Hello, how are you”, so the trim() method is not removed anything from the end of the string because it does not contain any space at the end as we can see in the output.
Example of jQuery UI trim() method to remove tab spaces from the front end of the string –
Next, we write the HTML code to understand the jQuery UI trim() method, where the trim() method is used to remove the tab spaces from the left side of the string.
Example #3
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery trim() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
pre {
display : block;
border : 2px solid green;
color : red;
padding : 6px;
margin : 12px;
}
</style>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
var str= " Hello, how are you";
$(".original").html(str);
});
$("#btn2").click(function(){
var str= " Hello, how are you";
var trimstr = jQuery.trim( str );
$(".trimmed").html(trimstr);
});
});
</script>
</head>
<body>
<h2> The Original string is : </h2>
<button id= "btn1"> Original </button>
<pre class= "original"> </pre>
<h2> The trimed string is : </h2>
<button id= "btn2">Trim </button>
<pre class= "trimmed"> </pre>
</body>
</html>An output of the above code is:
Once we click on the “original” button, the output is:
And once we click on the “Trim” button, the output is:
As in the above program the string ” Hello, how are you” is store in the str variable, if we see this string contain the tab spaces only in the front of the string. To remove this space the trim() method is used which is accepted the ” Hello, how are you” string and returned the output as “Hello, how are you”.
Conclusion
The jQuery UI trim() method is a built-in method that is used to remove the spaces from both end of the string but not from the middle.
Recommended Articles
This is a guide to jQuery trim. Here we also discuss the description and Example of jQuery UI trim() method along with its code implementation. You may also have a look at the following articles to learn more –
