Remove White Spaces from Start and End of String using JQuery

In this tutorial we will see how to Remove White Spaces from Start and End of String using JQuery. The JQuery $.trim() function is used for this purpose.

HTML Code

HTML Code is given below, This code contains our main string written inside the span tag. This string is trimmed and then displayed inside another span tag with the help of jQuery code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Remove White Spaces from Start and End of String using JQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <h1>Main String:</h1>
    <span id='main'>    This is HowToCodeSchool.com    </span>
    <h1>Trimmed String:</h1>
    <span id='trimmed'></span>
    <br><br>
    <button id='btn'>Trim Your String</button>
</body>
</html>

JQuery Code

JQuery Code is given below, In this code the JQuery trim() method is used. First when button is clicked, the value of string is read using .text() method, then the string is trimmed and displayed using .html method.

<script>
$('#btn').click(function(){
  var str = $("#main").text();
  var str1 = $.trim(str);
  $("#trimmed").html(str1);    
})
</script>

Demo

JQuery .trim() method

The JQuery .trim() method is used to remove the white spaces from the start and the end of the string. The $.trim() function removes all newlines, spaces and tabs from the start and the end of the string.

The trim function doesn't remove the whitespaces present in the middle of the string.

Video Tutorial

Watch video tutorial on how to Remove White Spaces from Start and End of String using JQuery.

jQuery Make Textarea Readonly Detect Enter Key Press in Textarea with jQuery Disable Textarea Resize Property with jQuery Clear Textarea Text with jQuery Get Textarea Tag Value in jQuery Count Characters of Textarea in jQuery Change value of href attribute of link using jQuery Check If Input Field is Empty in jQuery jQuery Select All HTML Elements Whose ID Start With Same String Count Checked Checkboxes of Specific Form with JQuery Enable and Disable Button using JQuery Add Class to HTML Tag On Click Using Jquery Change Class of HTML Tag Using JQuery Display Current Date and Time Using HTML and JQUERY Detect Change in Text Input using JQuery Refresh a Page With JQuery Execute a Function on Hover Using JQuery Open Select File Dialog Box Using JQuery Display Message When File Is Selected Using JQuery Get Class of Clicked Element Using JQuery