Trusted answers to developer questions

How to escape & unescape HTML characters in string in JavaScript

Get the Learn to Code Starter Pack

Break into tech with the logic & computer science skills you’d learn in a bootcamp or university — at a fraction of the cost. Educative's hand-on curriculum is perfect for new learners hoping to launch a career.

Escape HTML

Escaping HTML characters in a string means replacing the:

  • less than symbol (<) with &lt;
  • greater than symbol (>) with &gt;
  • double quotes (") with &quot;
  • single quote (’) with &#39;
  • ampersand (&) with &amp;

Let’s suppose we have an HTML element as a string:

<script> alert("hi") </script>

We can escape the HTML of the string using the replace method of the string.

function escape(htmlStr) {
return htmlStr.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#39;");
}
console.log(escape("<script>alert('hi')</script>"));

In the code above, we have used regex to globally replace the:

  • < with &lt;
  • > with &gt;
  • " with &quot;
  • ' with &#39;
  • & with &amp;

The replace method will return a new string by replacing the matched pattern with the replacement string.

Unescape HTML

Unescaping HTML in a string does the reverse of what we have done above, by replacing:

  • &lt; with <
  • &gt; with >
  • &quot; with "
  • &#39; with '
  • &amp; with &
function unEscape(htmlStr) {
htmlStr = htmlStr.replace(/&lt;/g , "<");
htmlStr = htmlStr.replace(/&gt;/g , ">");
htmlStr = htmlStr.replace(/&quot;/g , "\"");
htmlStr = htmlStr.replace(/&#39;/g , "\'");
htmlStr = htmlStr.replace(/&amp;/g , "&");
return htmlStr;
}
let unEscapedStr =unEscape(`&lt;script&gt;alert(&#39;hi&#39;)&lt;/script&gt;`);
console.log(unEscapedStr);

RELATED TAGS

javascript
html
Did you find this helpful?