HTML Escape / Unescape

HTML Escape and HTML Unescape are two operations that are commonly used in web development to manage special characters in HTML content.

HTML Escape:
HTML Escape refers to the process of converting special characters in text into HTML entities so that they can be safely displayed on a web page. When certain characters (such as <, >, &, ", ') are used directly in HTML, they can cause issues because they have specific meanings in HTML syntax. Escaping these characters ensures they are displayed as plain text rather than being interpreted as HTML tags or special characters.

For example:

Character < would be escaped as &lt;.
Character > would be escaped as &gt;.
Character & would be escaped as &amp;.
Character " would be escaped as &quot;.
Character ' would be escaped as &apos;.
Example of HTML Escape:
html

Original Text: <div>Welcome to the "World"</div>

Escaped Text: &lt;div&gt;Welcome to the &quot;World&quot;&lt;/div&gt;
Purpose: This is typically used to prevent XSS (Cross-Site Scripting) attacks, where malicious users could inject scripts into web pages by injecting HTML or JavaScript code.

HTML Unescape:
HTML Unescape refers to the process of converting HTML entities back into their original characters. This is the reverse operation of HTML escaping. When text with HTML entities is received (for example, from a database or external source), it needs to be unescaped so that the special characters are displayed as intended.

For example:

HTML Entity &lt; would be unescaped to <.
HTML Entity &gt; would be unescaped to >.
HTML Entity &amp; would be unescaped to &.
HTML Entity &quot; would be unescaped to ".
HTML Entity &apos; would be unescaped to '.
Example of HTML Unescape:
html

Escaped Text: &lt;div&gt;Welcome to the &quot;World&quot;&lt;/div&gt;

Original Text: <div>Welcome to the "World"</div>
Use Cases:
HTML Escape:

Preventing HTML injection and XSS attacks.
Displaying raw HTML code on a webpage as text.
When generating content dynamically to be displayed in a browser.
HTML Unescape:

Converting escaped HTML entities back to readable content.
When parsing text that contains HTML-encoded content to display as original text.
Dealing with content retrieved from databases or APIs that has been HTML-encoded.
Example in JavaScript:
HTML Escape in JavaScript:
javascript

function htmlEscape(str) {
return str.replace(/[<>"&]/g, function (match) {
switch (match) {
case "<": return "&lt;";
case ">": return "&gt;";
case "&": return "&amp;";
case '"': return "&quot;";
case "'": return "&apos;";
}
});
}

let escapedText = htmlEscape('<div>Welcome to "World"</div>');
console.log(escapedText); // Output: &lt;div&gt;Welcome to &quot;World&quot;&lt;/div&gt;
HTML Unescape in JavaScript:
javascript

function htmlUnescape(str) {
var doc = new DOMParser().parseFromString(str, "text/html");
return doc.documentElement.textContent;
}

let unescapedText = htmlUnescape('&lt;div&gt;Welcome to &quot;World&quot;&lt;/div&gt;');
console.log(unescapedText); // Output: <div>Welcome to "World"</div>
Conclusion:
HTML Escape is used to safely encode special characters into HTML entities, making them safe to display as plain text.
HTML Unescape is used to decode HTML entities back to their original characters.