How to escape & unescape HTML characters in string in JavaScript?

Escaping and unescaping HTML characters is important in JavaScript because it ensures proper rendering of content, preventing HTML injection attacks and preserving text formatting when displaying user-generated or dynamic content on web pages.

Escape HTML Characters

• < : <
• > : >
• " : "
• ' : ' or '
• & : &

Unescape HTML Characters

• < : <
• > : >
• " : "
• ' or ' : '
• & : &

Below are the approaches to escape and unescape HTML characters in a string in JavaScript:

Using replace( ) method

In this approach, we are using the replace method with regular expressions to escape HTML characters by replacing special characters like <, >, &, ", and ' with their corresponding HTML entities. Then, we use another set of replacement methods to unescape these HTML entities back to their original characters.

Syntax:

string.replace(searchValue, replaceValue)

Example: The below example uses the replace() method to escape & unescape HTML characters in a string in JavaScript.

let originalStr = '<p>Hello, GFG!</p>';
let escapeStr = originalStr.replace(/&/g, '&amp;')
  .replace(/</g, '&lt;')
  .replace(/>/g, '&gt;')
  .replace(/"/g, '&quot;')
  .replace(/'/g, '&#39;');
console.log('Escaped String:', escapeStr);
let unescapeStr = escapeStr.replace(/&amp;/g, '&')
  .replace(/&lt;/g, '<')
  .replace(/&gt;/g, '>')
  .replace(/&quot;/g, '"')
  .replace(/&#39;/g, "'");
console.log('Unescaped String:', unescapeStr);

Escaped String: <p>Hello, GFG!</p>
Unescaped String: <p>Hello, GFG!</p>

Using Built-in Functions

JavaScript provides the encodeURIComponent() function to encode special characters in a URI component, including HTML characters. To decode HTML entities back to their original characters, JavaScript offers the decodeURIComponent() function.

Syntax:

const escapedString = encodeURIComponent(originalString);
const unescapedString = decodeURIComponent(escapedString);

Example: Implementation to showcase how to escape & unescape HTML characters using inbuilt functions.

// Original string containing HTML characters
const originalString =
    '<script>alert("Geeksfor Geeks!")</script>';

// Escape HTML characters using encodeURIComponent
const escapedString =
    encodeURIComponent(originalString);
console.log("Escaped String:", escapedString);

// Unescape HTML characters using decodeURIComponent
const unescapedString =
    decodeURIComponent(escapedString);
console.log("Unescaped String:", unescapedString);

Escaped String: %3Cscript%3Ealert(%22Geeksfor%20Geeks!%22)%3C%2Fscript%3E
Unescaped String: <script>alert("Geeksfor Geeks!")</script>

Using Lodash Library

In this approach, we are using the Lodash library's escape method to convert HTML characters in the originalStr into their corresponding HTML entities, ensuring safe rendering in HTML documents. Then, we use unescape to revert the escaped HTML entities to their original characters in the escapeStr.

Use the below command to install lodash library:

npm install lodash

Syntax:

const _ = require('lodash');

Example: The below example uses Lodash Library to escape & unescape HTML characters in string in JavaScript.

const _ = require('lodash');
let originalStr = '<p>Hello, GFG!</p>';
let escapeStr = _.escape(originalStr);
console.log('Escaped String:', escapeStr);
let unescapeStr = _.unescape(escapeStr);
console.log('Unescaped String:', unescapeStr);

Output

Escaped String: <p>Hello, GFG!</p>
Unescaped String: <p>Hello, GFG!</p>