Trimming Whitespaces in JavaScript

FOCUS

Is to trim whitespace from start and end any string value entered into a Textbox by a user. Regretfully JavaScript does not natively provide any trim functionality to the String object. In order to trim whitespace that could exist at the start and end of string we use a user created function based on a Regular Expression. Regular Expressions is a form of pattern matching that can be applied to textual content. In this the regular expression is pretty simple as all we are trying to do is eliminate white space at the start or end of any textual matter entered by a user into an HTML Textbox.

HTML code snippet

 
<div class="divStyling">
  <p>
    Type in the box below and you will see the trimmed output dynamically.
    You must enter spaces <strong>BEFORE</strong> and 
    <strong>AFTER</strong> the string to see a difference.
  </p>
</div>
<table border="1" cellpadding="1" cellspacing="2" width="40%">
  <tr>
    <td colspan="3" >Trimming leading white space.</td>
  </tr>
  <tr>
    <td>Client Id</td>
    <td>
      <input type="text" id="txtClientId" name="txtClientId" value="" />
    </td>
    <td>
      <input type="submit" id="btnLtSubmit" name="btnLtSubmit" value="Submit"
      onclick="trimLeftValues()" />
    </td>
  </tr>
</table>
 
<table border="1" cellpadding="1" cellspacing="2" width="40%">
  <tr>
    <td colspan="3" >Trimming trailing white space.</td>
  </tr>
  <tr>
    <td>Client First Name</td>
    <td>
      <input type="text" id="txtFName" name="txtFName" value="" />
    </td>
    <td>
      <input type="submit" id="btnRtSubmit" name="btnRtSubmit" value="Submit"
      onclick="trimRightValues()" />
    </td>
  </tr>
</table>
 
<table border="1" cellpadding="1" cellspacing="2" width="40%">
  <tr>
    <td colspan="3" >Trimming leading and trailing white space.</td>
  </tr>
  <tr>
    <td>Client Last Name</td>
    <td>
      <input type="text" id="txtLName" name="txtLName" value="" />
    </td>
    <td>
      <input type="submit" id="btnBothSubmit" name="btnBothSubmit" value="Submit"
      onclick="trimBothValues ()" />
    </td>
  </tr>
</table>

JavaScript code snippet

 
<script type="text/javascript">
 
//NOTE: Trimming leading white space.
function trimLeftValues()
{
  var m_lttrim1 = document.getElementById('txtClientId').value
  //creating m_lttrim1 and storing the value from textbox 
  //txtClientId in it along with any whitespaces
 
  var m_lttrim2 = m_lttrim1.value.replace(/^\s+/,"");
  //creating m_lttrim2 and storing the value of m_lttrim1 in m_lttrim2 
  //after stripping leading whitespace
 
  alert("All leading whitespace has been trimmed.");
 
  document.getElementById('txtClientId').value = m_lttrim2;
  // inserting the trimmed value back in the textbox txtClientId
 
  document.getElementById('txtClientId').disabled = true;
  //disabling the textbox after its value has been trimmed to 
  //prevent further user changes
}
 
 
//NOTE: Trimming trailing white space.
function trimRightValues()
{
  var m_trim2 = document.getElementById('txtFName').value
  //creating a m_trim2 and storing the value from textbox 
  //txtFName in it along with any whitespaces
 
  var m_rttrim2 = m_rttrim1.replace(/\s+$/,"");
  //creating m_rttrim2 and storing the value of m_lttrim1 in m_lttrim2 
  //after stripping trailing whitespace
 
  alert("All trailing whitespace has been trimmed.");
 
  document.getElementById('txtFName').value = m_trim2;
  // inserting the trimmed value back in the textbox
 
  document.getElementById('txtFName').disabled = true;
  //disabling the textbox after its value has been trimmed to 
  //prevent further user changes
}
 
//NOTE: Trimming leading and trailing white space.
function trimBothValues()
{
  var m_bothtrim1 = document.getElementById('txtLName').value
  // creating m_bothtrim1 and storing the value from textbox 
  //txtLName in it along with any whitespaces
 
  var m_bothtrim2 = m_bothtrim1.replace(/^\s+|\s+$/g,""); ;
  //creating m_bothtrim2 and storing the value of m_bothtrim1 in 
  //m_bothtrim2 after stripping leading
  // and trailing whitespace
 
  alert("Leading and Trailing Whitespace has been trimmed.");
 
  document.getElementById('txtLName').value = m_bothtrim2;
  //inserting the trimmed value back in the textbox
 
  document.getElementById('txtLName').disabled = true;
  //disabling the textbox after its value has been trimmed to prevent 
  //further user changes
}
</script>

How the leading spaces are trimmed from the HTML input box:

When the command button whose id is btnLtSubmit is clicked a user defined JavaScript method trimLeftValues(); is invoked.

 
var m_lttrim1 = document.getElementById('txtClientId').value

In the above codespec, a memvar var m_lttrim1 is created which will hold the value retrieved from the textbox 'txtClientId' with leading whitespaces, if any.

 
var m_lttrim2 = m_lttrim1.replace(/^\s+/,"");

In the above codespec, second memvar var m_lttrim2 is created which accepts value from m_lttrim1 after its contents have had all their leading spaces trimmed by the regular expression.

\- Escapes special characters to literal and literal characters to special.
^ - Matches beginning of input
/(\s)/ - matches any whitespace and captures the match.

 
document.getElementById('txtClientId').value = m_lttrim2;

Next, replace the contents of the html textbox 'txtClientId' using the Javascript DOM.

 
document.getElementById('txtClientId').disabled = true;

Output:

Diagram 1 a

Diagram 1 b

Note: xxxxxxx denotes leading whitespaces

After loading the Textbox with a value that has all its leading spaces deleted, simply disable the HTML Textbox to prevent its content from being changed by the user.

How the trailing spaces are trimmed from the HTML input box:

When the command button whose id is btnRtSubmit is clicked a user defined JavaScript method trimRightValues(); is invoked.

 
var m_rttrim1 = document.getElementById('txtFName').value

In the above codespec, a memvar var m_rttrim1 is created which will hold the value retrieved from the textbox 'txtFName' with leading whitespaces, if any.

 
var m_rttrim2 = m_rttrim1.replace(/\s+$/,"");

In the above codespec, second memvar var m_rttrim2 is created which accepts value from m_rttrim1 after its contents have had all their leading spaces trimmed by the regular expression.

/(\s)/ - matches any whitespace and captures the match.
+ - is short for {1,}, matches one or more times.
\- Escapes special characters to literal and literal characters to special.
$ - Matches end of input.

 
document.getElementById('txtFName').value = m_lttrim2;

Next, replace the contents of the html textbox 'txtFName' using the Javascript DOM.

 
document.getElementById('txtFName').disabled = true;

Output:

Diagram 2 a

Diagram 2 b

Note: xxxxxxx denotes trailing whitespaces

After loading the Textbox with a value that has all its trailing spaces deleted, simply disable the HTML Textbox to prevent its content from being changed by the user.

How the leading and trailing spaces are trimmed from the HTML input box:

When the command button whose id is btnBothSubmit is clicked a user defined JavaScript method trimBothValues(); is invoked.

 
var m_bothtrim1 = document.getElementById('txtLName').value

In the above codespec, a memvar var m_bothtrim1 is created which will hold the value retrieved from the textbox 'txtLName' with leading whitespaces, if any.

 
var m_bothtrim2 = m_bothtrim1.replace (/^\s+|\s+$/g,"");

In the above codespec, second memvar var m_bothtrim2 is created which accepts value from m_bothtrim1 after its contents have had all their leading spaces trimmed by the regular expression.

/ = Start the regular expression
^ = Match the START of the line
\s = Match spaces
+ = One or more of them
| = OR (think of this as ALSO)
\s = Match spaces
+ = One or more of them
$ = To the END of the line
/ = End of the regular expression
g = GLOBAL (do this for EVERY MATCHING CASE) this will cause the expression to match the start, and then go on to the end. Otherwise it would quit after the first match (the start of the line).

 
document.getElementById('txtLName').value = m_bothtrim2;

Next, replace the contents of the html textbox 'txtLName' using the JavaScript DOM.

 
document.getElementById('txtLName').disabled = true;

Output:

Diagram 3 a

Diagram 3 b

Note:xxxxxxx denotes leading and trailing whitespaces

After loading the Textbox with a value that has all its leading spaces deleted, simply disable the HTML Textbox to prevent its content from being changed by the user.

The Complete code:

 
<html>
<head>
  <title>Triming Values in Javascript</title>
  <style>
    body
    {
      font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
      font-size:12pt;
      color:#000000;
      text-align: center;
    }
 
    .divStyling
    {
      padding:0 1% 0 1%;
      width:45%;
      border:1px dotted #990000;
      text-align: justify;
    }
  </style>
  <script type="text/javascript">
    //NOTE: Trimming leading white space.
    function trimLeftValues()
    {
      var m_lttrim1 = document.getElementById('txtClientId').value
      //creating m_lttrim1 and storing the value from textbox 
      //txtClientId in it along with any whitespaces
 
      var m_lttrim2 = m_lttrim1.value.replace(/^\s+/,"");
      //creating m_lttrim2 and storing the value of m_lttrim1 in m_lttrim2 
      //after stripping leading whitespace
 
      alert("All leading whitespace has been trimmed.");
 
      document.getElementById('txtClientId').value = m_lttrim2;
      // inserting the trimmed value back in the textbox txtClientId
 
      document.getElementById('txtClientId').disabled = true;
      //disabling the textbox after its value has been trimmed to 
      //prevent further user changes
    }
 
 
    //NOTE: Trimming trailing white space.
    function trimRightValues()
    {
      var m_trim2 = document.getElementById('txtFName').value
      //creating a m_trim2 and storing the value from textbox 
      //txtFName in it along with any whitespaces
 
      var m_rttrim2 = m_rttrim1.replace(/\s+$/,"");
      //creating m_rttrim2 and storing the value of m_lttrim1 in m_lttrim2 
      //after stripping trailing whitespace
 
      alert("All trailing whitespace has been trimmed.");
 
      document.getElementById('txtFName').value = m_trim2;
      // inserting the trimmed value back in the textbox
 
      document.getElementById('txtFName').disabled = true;
      //disabling the textbox after its value has been trimmed to 
      //prevent further user changes
    }
 
    //NOTE: Trimming leading and trailing white space.
    function trimBothValues()
    {
      var m_bothtrim1 = document.getElementById('txtLName').value
      // creating m_bothtrim1 and storing the value from textbox 
      //txtLName in it along with any whitespaces
 
      var m_bothtrim2 = m_bothtrim1.replace(/^\s+|\s+$/g,""); ;
      //creating m_bothtrim2 and storing the value of m_bothtrim1 in 
      //m_bothtrim2 after stripping leading
      // and trailing whitespace
 
      alert("Leading and Trailing Whitespace has been trimmed.");
 
      document.getElementById('txtLName').value = m_bothtrim2;
      //inserting the trimmed value back in the textbox
 
      document.getElementById('txtLName').disabled = true;
      //disabling the textbox after its value has been trimmed to prevent 
      //further user changes
    }
  </script>
 
</head>
 
<body>
  <div class="divStyling">
    <p>
    Type in the box below and you will see the trimmed output dynamically.
    You must enter spaces <strong>BEFORE</strong> and 
    <strong>AFTER</strong> the string to see a difference.
    </p>
  </div>
  <table border="1" cellpadding="1" cellspacing="2" width="40%">
    <tr>
      <td colspan="3" >Trimming leading white space.</td>
    </tr>
    <tr>
      <td>Client Id</td>
      <td>
        <input type="text" id="txtClientId" name="txtClientId" value="" />
      </td>
      <td>
        <input type="submit" id="btnLtSubmit" name="btnLtSubmit" value="Submit"
        onclick="trimLeftValues()" />
      </td>
    </tr>
  </table>
 
  <table border="1" cellpadding="1" cellspacing="2" width="40%">
    <tr>
      <td colspan="3" >Trimming trailing white space.</td>
    </tr>
    <tr>
      <td>Client First Name</td>
      <td>
        <input type="text" id="txtFName" name="txtFName" value="" />
      </td>
      <td>
        <input type="submit" id="btnRtSubmit" name="btnRtSubmit" value="Submit"
        onclick="trimRightValues()" />
      </td>
    </tr>
  </table>
 
  <table border="1" cellpadding="1" cellspacing="2" width="40%">
    <tr>
      <td colspan="3" >Trimming leading and trailing white space.</td>
    </tr>
    <tr>
      <td>Client Last Name</td>
      <td>
        <input type="text" id="txtLName" name="txtLName" value="" />
      </td>
      <td>
        <input type="submit" id="btnBothSubmit" name="btnBothSubmit" 
        value="Submit" onclick="trimBothValues ()" />
      </td>
    </tr>
  </table>
</body>
</html>