Sanitize Input

by Matthew Day

HTML

<div class="y-wrap">
  <input type="text" placeholder="Enter your text here." name="userInput" id="userInput" />
  <div id="sanitize">Sanitize</div>
  <h4>With HTML</h4>
  <div id="output1" class="outputs"></div>
  <h4>With HTML Removed</h4>
  <div id="output2" class="outputs"></div>
</div>

CSS

* {
  box-sizing: border-box;
  color: #666;
  font-family: 'Arial', sans-serif;
}

.y-wrap {
  margin: 0 auto;
  padding: 24px 0;
  text-align: center;
  width: 90%;
}

input {
  font-size: inherit;
  outline: none;
  padding: 8px 4px;
  text-align: center;
  width: 100%;
}

#sanitize {
  background: #007db8;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: 0.775rem;
  margin-top: 16px;
  padding: 6px 12px;
  text-transform: uppercase;
  transition: background 600ms ease-in-out;
}

#sanitize:hover {
  background: crimson;
}

h4 {
  font-size: 0.875rem;
  font-weight: 400;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.outputs {
  background: white;
  border: 1px solid #ccc;
  height: 32px;
  padding: 6px 12px;
  width: 100%;
}

JavaScript

(function($) {

	let app = {
  
  	dictionaryHTML: {
      "~": "&tilde;",
      "&": "&amp;",
      "<": "&lt;",
      ">": "&gt;",
      '"': '&quot;',
      "'": '&apos;',
      "`": "&grave;",
      ",": "&comma;",
      "!": "&excl;",
      "@": "&commat;",
      "$": "&dollar;",
      "%": "&percnt;",
      "(": "&lpar;",
      ")": "&rpar;",
      "=": "&equals;",
      "+": "&plus;",
      "{": "&lcub;",
      "}": "&rcub;",
      "[": "&lsqb;",
      "]": "&rsqb;",
      "/": "&#x2F;",
      "?": "&quest;",
      "#": "&num;",
      "*": "&ast;",
      "^": "&Hat;",
      ":": "&colon;",
      ";": "&semi;",
      ".": "&period;",
      "-": "&minus;"
    },
    // This could be written more efficiently as an array since each key has the same value but you get the idea.
  	dictionaryRemove: {
      "~": "",
      "&": "",
      "<": "",
      ">": "",
      '"': "",
      "'": "",
      "`": "",
      ",": "",
      "!": "",
      "@": "",
      "$": "",
      "%": "",
      "(": "",
      ")": "",
      "=": "",
      "+": "",
      "{": "",
      "}": "",
      "[": "",
      "]": "",
      "/": "",
      "?": "",
      "#": "",
      "*": "",
      "^": "",
      ":": "",
      ";": "",
      ".": "",
      "-": ""
    },
    doSanitize: function() {
    	$(document).on('click', '#sanitize', function() {
				let text = $('#userInput').val();
        return app.sanitize(text);
      });
    },
  	init: function() {
      app.doSanitize();
    },
    sanitize: function(text) {
      let sanitizedHTML = String(text).replace(/[~&<>"'`,!@$%()=+{}\[\]\/?#*^:;.-]/g, function(s) {
        return app.dictionaryHTML[s];
      });
      let sanitizedRemove = String(text).replace(/[~&<>"'`,!@$%()=+{}\[\]\/?#*^:;.-]/g, function(s) {
        return app.dictionaryRemove[s];
      });
      $('#output1').empty().append(sanitizedHTML);
      $('#output2').empty().append(sanitizedRemove);
    }
  };
  
  $(document).ready(function() {
  	app.init();
 ...