JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div id="out"></div>

JavaScript

function escapeHtml(text) {
  return text
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

function html(literals, ...values) {
  let s = '';
  for (const literal of literals) {
    s += literal;
    if (values.length) {
      s += escapeHtml(String(values.shift()));
    }
  }
  return s;
}

let userInput = 'Hey, <p>alert(1)</p>'

out.innerHTML = html`
<strong>User Input</strong>: ${userInput}
`