JavaScript Escape HTML Function

Escaping HTML in JavaScript is a critical security practice used to prevent Cross-Site Scripting (XSS) attacks. Whenever user input is displayed on a webpage, it must be sanitized to ensure that HTML tags and scripts are not executed by the browser.

This page explains what HTML escaping is, why it matters, and how to implement a reusable JavaScript escape HTML function with practical examples

Contents

  1. Basic Escape HTML Function
  2. Escape HTML Using DOM
  3. Unescape HTML (Reverse Function)

What Is HTML Escaping?

HTML escaping is the process of converting special characters such as <, >, ", and & into safe HTML entities so they are displayed as text instead of executed as code.

Example:

HTML
<script>alert('XSS')</script>

Escaped output:

HTML
&lt;script&gt;alert('XSS')&lt;/script&gt;

Characters That Must Be Escaped

  • < Less Than Sign - &lt;
  • > Greater Than Sign - &gt;
  • & Ampersand - &amp;
  • " Double Quote - &quot;
  • ' Single Quote - &#039;

Why Escaping HTML Is Important

  • Prevents XSS vulnerabilities
  • Protects user data and sessions
  • Required when displaying user-generated content

When Should You Escape HTML?

You should always escape HTML when inserting dynamic text using.

  • Displaying user input
  • Rendering comments, messages, reviews
  • Outputting data inside HTML innerHTML

Do NOT escape when:

You intentionally render trusted HTML. You use textContent instead of innerHTML

JavaScript
element.textContent = userInput;

Basic Escape HTML Function

Live Demo:

Here is a simple and reusable JavaScript function to escape HTML:
JavaScript
const escapeHTML = (str) => {
    if (typeof str !== "string") return str;

    return str
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
};

Usage Example:
HTML
<div id="preview-text"></div>
JavaScript
const userInput = "<h1>Hello</h1>";
const safeText = escapeHTML(userInput);

const preview = document.getElementById("preview-text");
preview.innerHTML = safeText;
Run codeTry it yourself
Escape HTML Using DOM (Safest Method)
Live Demo:
You can also escape HTML using the browser DOM API
JavaScript
const escapeHTMLDOM = (str) => {
    const div = document.createElement("div");
    div.textContent = str;
    return div.innerHTML;
};

Usage:
HTML
<div id="preview-dom-text"></div>
JavaScript
const userInput = "<div>HTML</div>";
const safeText = escapeHTMLDOM(userInput);

const preview = document.getElementById("preview-dom-text");
preview.innerHTML = safeText;
Run codeTry it yourself
Why This Works
  • textContent automatically escapes HTML
  • Avoids manual regex replacements
  • Safer for complex strings


Unescape HTML (Reverse Function)
Live Demo:
Sometimes you need to convert escaped HTML entities back into normal text. This process, called unescaping, turns &lt; back into <, &gt; back into >, and so on. It is useful when you receive user input or stored data that was previously escaped, and you want to display it as readable text without executing it as HTML.
JavaScript
const unescapeHTML = (str) => {
    const textarea = document.createElement("textarea");
    textarea.innerHTML = str;
    return textarea.value;
};

Usage:
HTML
<textarea id="input" placeholder="Enter HTML here"></textarea>
<button onclick="runEscape()">Escape HTML</button>
<pre id="output"></pre>
JavaScript
const runEscape = () => {
    const value = document.getElementById("input").value;
    document.getElementById("output").textContent = unescapeHTML(value);
};
Run codeTry it yourself