JSFiddle - React, Tailwind, and code Playground

by Alphonsio

HTML

<input id="input" type="text" value='& < >  \ " /  ` ='>
<div id="output"></div>

CSS

body {
  background-color: #eee;
}

JavaScript

function escapeHTML(str) {
    return str.replace(/[&<>"'`=\/]/g, function(match) {
        switch (match) {
            case '&': return '&amp;';
            case '<': return '&lt;';
            case '>': return '&gt;';
            case '"': return '&quot;';
            case "'": return '&#39;';
            case '/': return '&#x2F;';
            case '`': return '&#x60;';
            case '=': return '&#x3D;';
        }
    });
}

let input = document.getElementById("input");
let output = document.getElementById('output');

function update() {
	output.textContent = escapeHTML(input.value);
}

input.addEventListener("input", update)

update();