How to remove the leading and trailing whitespace in text of HTML element using jQuery?

Remove the leading and trailing white space in text of HTML element using jQuery

trim function

trim function is used to remove the leading and trailing space in the text.

$.trim(" text   ")

each function

each function is used to iterates over arrays and objects.

// To parse array using each function
$.each(["1", "2", "3"], function(idx, val){
 //logic to parse array
});

//To parse objects using each function
$.each([key1: "val1", key2: "val2"], function(key, val) {
//logic to parse objects.
});

Example jQuery code to remove the leading and trailing space in text of HTML element 'span'

This jQuery parses the list of span tags in the HTML document and removes the leading and trailing space in text of 'span' HTML element.

<html>
   <head>
      <title>The jQuery Example - To remove space in text of HTML element 'span'</title>
      <style>
      span{
         background-color: blue;
         color: white;
       }
      </style>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>	
      <script type = "text/javascript">
        function get_all_paragraphs_text() {
	$.each($("span"), function(idx, val){
          $(val).text($.trim($(val).text()));
        });

        }
      </script>		
   </head>	
   <body>
<p><span>line 0   </span></p>
<p><span>line 1   </span></p>
<p><span>   line 2   </span></p>
<p><span>line 3</span></p>
<p><span>line 4   </span></p>
<p><span>line 5</span></p>
<p><span>   line 6   </span></p>
<input type="button" value="Remove Whitespace" onclick="get_all_paragraphs_text();"/>
   </body>
</html>
Output:

Before removing space, HTML page output:

when loading HTML page output

After removing space, HTML page output:

after removing leading and trailing space HTML page output

Privacy Policy  |  Copyrightcopyright symbol2020 - All Rights Reserved.  |  Contact us   |  Report website issues in Github   |  Facebook page   |  Google+ page

Email Facebook Google LinkedIn Twitter
^