Free Online HTML Special Character Escaping Javascript Tool with Source Code

Sometimes when we try to display some HTML code in our websites or blogs, we face major difficulties. This is because the websites and blogs are created with HTML (Hyper Text Markup Language), and when we try to display HTML codes in these documents, the codes that are meant to be displayed, also gets executed by the web browsers. As a result, we only get to see results instead of those codes. We can bypass this problem by escaping the special HTML characters. I have made the following JavaScript tool to escape the HTML characters. Hope you'll find it useful:

HTML Special Character Escape Tool

Input code:

Escaped code:

Here is the source code. You can paste it anywhere inside your body tag:

<div style="margin:auto; display:inline-block;">
   <h3>HTML Special Character Escape Tool</h3>
   <h4>Input code:</h4>
    <textarea style="width:100%; height:90px; resize:none;" id="infld"></textarea><br /><br />
    <button style="float:right; background-color:#015264; color: white; text-align:center; border:none; padding:5px;" type="submit" onclick="escapeHtml()">Submit</button><br /><br />
    <h4>Escaped code:</h4>
    <textarea style="width:100%; height:90px; resize:none;" id="outfld"></textarea><br /><br />
    </div>
    <script>
    function escapeHtml() {
        var text = document.getElementById('infld').value;
  var change = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };

  document.getElementById('outfld').value = text.replace(/[&<>"']/g, function(c) { return change[c]; });
}
    </script>

You can use the HTML Special Character UnEscape Tool here.