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
How to Iterate Over Characters of a String in JavaScript ?
There are several methods to iterate over characters of a string in JavaScript. 1. Using for LoopThe classic for loop is one of the most common ways to iterate over a string. Here, we loop through the string by indexing each character based on the string's length.Syntaxfor (statement 1 ; statement 2
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
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
JavaScript - Insert Character in JS String
In JavaScript, characters can be inserted at the beginning, end, or any specific position in a string. JavaScript provides several methods to perform these operations efficiently.At the BeginningTo insert a character at the beginning of a string, you can use string concatenation or template literals
1 min read
How To Split a String Into Segments Of n Characters in JavaScript?
When working with JavaScript, you might encounter a situation where you need to break a string into smaller segments of equal lengths. This could be useful when formatting a serial number, creating chunks of data for processing, or splitting a long string into manageable pieces. In this article, we
6 min read
JavaScript - How to Get Character Array from String?
Here are the various methods to get character array from a string in JavaScript.1. Using String split() MethodThe split() Method is used to split the given string into an array of strings by separating it into substrings using a specified separator provided in the argument. JavaScriptlet s = "Geeksf
2 min read