Skip to main content

String Structure Checker in Javascript


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();'

...

  1. <head>
  2. </head>
  3. <body>
  4. <textarea id='fromBox'></textarea>
  5. <textarea id='toBox'></textarea>
  6. <button onclick='checker();'>Check</button>
  7. </body>
  8. </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!

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.