Can I escape HTML special chars in JavaScript?

Question

I want to display text to HTML by a JavaScript function. How can I escape HTML special characters in JavaScript? Is there an API?

Answer 1

Here's a solution that will work in practically every web browser:

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

If you only support modern web browsers (2020+), then you can use the new replaceAll function:

const escapeHtml = (unsafe) => {     return unsafe.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;'); } 

Answer 2

function escapeHtml(html){    var text = document.createTextNode(html);    var p = document.createElement('p');    p.appendChild(text);    return p.innerHTML;  }    // Escape while typing & print result  document.querySelector('input').addEventListener('input', e => {    console.clear();    console.log( escapeHtml(e.target.value) );  });

<input style='width:90%; padding:6px;' placeholder='&lt;b&gt;cool&lt;/b&gt;'>