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 use Escape Characters to Log Quotes in JavaScript?
In JavaScript, escape characters are used to include special characters like quotes within strings without causing syntax errors. By placing a backslash (`\`) before a quote, you can ensure that the quote is treated as part of the string rather than as a delimiter. This is essential for correctly lo
3 min read
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 Escape a String in JavaScript?
These are the following ways to Escape a String in JavaScript: 1. Using BackslashesThe most straightforward way to escape characters is by using backslashes (\). This method allows you to include special characters like quotes (" or '), backslashes, and control characters within a string. [GFGTABS]
1 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 Truncate a String in JavaScript ?
In JavaScript, there are several ways to truncate a string which means cutting off a part of the string to limit its length. Truncating a string is useful when we want to display only a certain number of the characters in the user interfaces such as previewing a longer text or ensuring that text fit
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
How to Concatenate Strings in JavaScript ?
Here are the various methods to concatenate strings in JavaScript 1. Using Template Literals (Template Strings)Template literals (introduced in ES6) provide a simple way to concatenate strings. With template literals, you can embed expressions inside a string using ${} syntax. This method makes the
3 min read
Add Characters to a String in JavaScript
Here are the various approaches to add characters to a string in JavaScript Using the + Operator - Most PopularThe + operator is the simplest way to add characters to a string. It concatenates one or more strings or characters without modifying the original string. [GFGTABS] JavaScript const s1 =
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
How to specify the character encoding used in an external script file in HTML5 ?
To specify the character encoding used in an external script file in HTML5 we use <script> charset attribute. The charset attribute specifies the character encoding for the HTML document when used by the <meta> element. The charset attribute specifies the character encoding used in an ex
1 min read