HTML escape tool

Jan 20, 2016 JavaScript Tool

It's fun to write small simple tools in the evening to come down. Here a tool to escape HTML as you can find it on every other HTML lerning website. It will replace the following characters with the right entities.

HTML entities

Just paste your text into the textarea and push the button. Feel free to use it. This tool is JavaScript based and your input will not leave your client.

The tool

JavaScript code behind

If you are interested in the code. Here is the necessary HTML and JavaScript code without styling elements and CSS (escaped with this tool).

<textarea id="not_escaped"></textarea>
<button onclick="escapeHtml();">escape</button>
<textarea id="escaped"></textarea>
<button onclick="unescapeHtml();">unescape</button>
<script>
var notEscaped = document.getElementById("not_escaped");
var escaped = document.getElementById("escaped");
var escapeMap = {
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
};
var unescapeMap = {
    "&amp;": "&",
    "&lt;": "<",
    "&gt;": ">",
    '&quot;': '"',
    '&#39;': "'",
    '&#x2F;': "/"
};

function escapeHtml() {
    escaped.value = String(notEscaped.value).replace(/[&<>"'\/]/g, function (s) {
        return escapeMap[s];
    });
}

function unescapeHtml() {
    notEscaped.value = String(escaped.value).replace(/&amp;|&lt;|&gt;|&quot;|&#39;|&#x2F;/g, function (s) {
        return unescapeMap[s];
    });
}
</script>