How to escape & unescape HTML characters in string in JavaScript?
Last Updated :
18 Apr, 2024
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.
JavaScript
let originalStr = '<p>Hello, GFG!</p>';
let escapeStr = originalStr.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
console.log('Escaped String:', escapeStr);
let unescapeStr = escapeStr.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, "'");
console.log('Unescaped String:', unescapeStr);
OutputEscaped 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.
JavaScript
// 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);
OutputEscaped 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.
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>
Similar Reads
How to Convert Special Characters to HTML in JavaScript? In JavaScript, special characters like less-than (<), greater-than (>), and others can cause rendering issues in HTML because they are interpreted as tags. To display these characters correctly in HTML, it's necessary to convert them into their respective HTML entities. This process prevents t
2 min read
How to convert Unicode values to characters in JavaScript ? The purpose of this article is to get the characters of Unicode values by using JavaScript String.fromCharCode() method. This method is used to return the characters indicating the Unicode values. Description: Unicode is a character encoding standard that assigns a unique number to every character,
2 min read
How to check if a string is html or not using JavaScript? The task is to validate whether the given string is valid HTML or not using JavaScript. we're going to discuss a few techniques. Approach Get the HTML string into a variable.Create a RegExp which checks for the validation.RegExp should follow the rules of creating an HTML document. Example 1: In thi
2 min read
JavaScript - Prevent Unicode Characters from Rendering as Emoji in HTML When Unicode characters are rendered in HTML, browsers often display them as graphical emojis. To prevent this and display them as plain text, you can use specific JavaScript techniques.1. Escape Unicode CharactersTo display Unicode characters as plain text, use codePointAt(0) to retrieve the Unicod
2 min read
How to create self string using special characters? Creating self-string using special characters in JavaScript is a useful technique for adding unique and dynamic elements to your code. In this article, we will explore several methods for creating self-strings using special characters in JavaScript, including the use of escape characters, template l
3 min read