Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
html
communitycreator

How to escape & unescape HTML characters in string in JavaScript

Programming Bytes

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
communitycreator
RELATED COURSES

View all Courses

Keep Exploring