String Structure Checker in Javascript

Submitted by Yorkiebar on Tuesday, April 15, 2014 - 20:19.
Introduction: This tutorial is on how to create a structure checker for basic plain text in Javascript. Why? This tool would be used for ensuring data that is getting parsed through functions, databases and/or files is in the correct format and would not cause an error. This example tool is for removing multiple spaces at once, for example; ->Hi there! would be replaced with: ->Hi there! HTML: The HTML is basic HTML and just includes two textareas. One textarea has the id of 'fromBox' which is where the function will get the plain text from to parse through the checking function while the second box has an id of 'toBox' and is where the text will be placed once/while the function is checking the text from the 'fromBox'. Finally we just have a basic button with the text of 'Check' which runs the javascript function 'checker' once it is clicked, which is created by the line...
  1. onclick='checker();'
...
  2.         <head>
  3.         </head>
  4.         <body>
  5.                 <textarea id='fromBox'></textarea>
  6.                 <textarea id='toBox'></textarea>
  7.                 <button onclick='checker();'>Check</button>
  8.         </body>
  9. </html>
Javascript: Now for the actual javascript. First we create the basic code block for the function 'checker'...
  1. <head>
  2.         <script>
  3.                 function checker() {
  4.                 }
  5.         </script>
  6. </head>
Next we create a variable named 'text' which gets all the entered plain text from the 'fromBox' HTML textarea through its 'value' attribute. We also create another variable named 'wasPreviouslySpace' which has a default value of 0/false...
  1. <head>
  2.         <script>
  3.                 function checker() {
  4.                         var text = document.getElementById('fromBox').value;
  5.                         var wasPreviouslySpace = 0;
  6.                 }
  7.         </script>
  8. </head>
Finally we want to iterate through each character of our 'text' variable - the plain text value of the 'fromBox' HTML textarea, and ensure that we don't parse any double spaces. For each characer we parse, we add it to the 'toBox' - the second HTML textarea, if necessary. The 'wasPreviouslySpace' variable holds whether the previously checked character within the iterating for loop was a space or not, if it was, we do not want to add another one, so we add the needed logic here...
  1. <head>
  2.         <script>
  3.                 function checker() {
  4.                         var text = document.getElementById('fromBox').value;
  5.                         var wasPreviouslySpace = 0;
  6.                         for (var i=0;i<text.length;i++) {
  7.                                 if (wasPreviouslySpace && text[i] != ' ') {
  8.                                         wasPreviouslySpace = 0;
  9.                                         document.getElementById('toBox').value += text[i];
  10.                                 }else if(!wasPreviouslySpace && text[i] == ' ') {
  11.                                         wasPreviouslySpace = 1;
  12.                                         document.getElementById('toBox').value += ' ';
  13.                                 }else if(!wasPreviouslySpace && text[i] != ' ') {
  14.                                         wasPreviouslySpace = 0;
  15.                                         document.getElementById('toBox').value += text[i];
  16.                                 }
  17.                         }
  18.                 }
  19.         </script>
  20. </head>
Finished!
Tags
String
Structure Checker
Javascript
Remove Duplicate Spaces

Add new comment

About text formats
  • 17 views