HTML Escape is the process of converting special HTML characters (like <, >, &, ") into HTML entities (like <, >, &, ").
Unescape is the reverse process, converting HTML entities back to their original characters.
Why Do We Need HTML Escaping?
- Prevent XSS (Cross-Site Scripting): Escaping is the first line of defense against XSS attacks. It prevents malicious HTML/JavaScript injection and is essential when displaying user-generated content.
- Display HTML Code as Text: Show HTML examples in documentation, render code snippets on web pages, or debug template engines.
- Data Serialization: Safely embed HTML in JSON/XML, prepare content for API responses, or store HTML in databases.
- Email & Header Safety: Escape special characters in email subjects, prepare data for HTTP headers, or handle form data correctly.
Entity Format Comparison
| Character | Named Entity | Decimal Entity | Hex Entity |
|---|---|---|---|
| < | < | < | < |
| > | > | > | > |
| & | & | & | & |
| " | " | " | " |
| ' | ' | ' | ' |
Code Examples
JavaScript (Browser)
// Escape HTML
function escapeHtml(text) {
const map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return text.replace(/[&<>"']/g, m => map[m]);
}
// Unescape HTML
function unescapeHtml(html) {
const doc = new DOMParser().parseFromString(html, 'text/html');
return doc.documentElement.textContent;
}
// Usage
const escaped = escapeHtml('<script>alert("XSS")</script>');
console.log(escaped);
// <script>alert("XSS")</script>Node.js (using 'he' library)
const he = require('he');
// Encode
const encoded = he.encode('<div class="test">Hello & goodbye</div>');
console.log(encoded);
// <div class="test">Hello & goodbye</div>
// Decode
const decoded = he.decode('<div>Hello</div>');
console.log(decoded); // <div>Hello</div>
// Different formats
he.encode('<tag>', { useNamedReferences: true }); // <tag>
he.encode('<tag>', { decimal: true }); // <tag>
he.encode('<tag>', { hexadecimal: true }); // <tag>Python
import html
# Escape
escaped = html.escape('<script>alert("XSS")</script>')
print(escaped)
# <script>alert("XSS")</script>
# Unescape
unescaped = html.unescape('<div>Hello</div>')
print(unescaped) # <div>Hello</div>Security Best Practices
⚠️ Important Security Notes:
- Escaping is NOT Enough: Combine with Content Security Policy (CSP) and backend validation.
- Context Matters: Use appropriate escaping for HTML content, JavaScript strings, URLs, and SQL.
- Don't Trust User Input: Always validate and sanitize on both client and server side.
- Use Framework Built-ins: React, Vue, and Angular escape by default—leverage these features.
Common Use Cases
- XSS Prevention: Escape user input before displaying:
<script>alert('XSS')</script>→<script>alert('XSS')</script> - Displaying Code: Show HTML code examples on web pages by escaping tags.
- JSON with HTML: Prepare HTML fragments for JSON serialization.
- Email Content: Escape special characters in email subjects and headers.
- Template Debugging: Unescape rendered template output to see actual HTML.
HTML escaping is fundamental for web security and data display. I created this tool after dealing with countless XSS vulnerabilities during security audits and needing to safely display user-generated content. Whether you're sanitizing form inputs, debugging template engines, preparing data for JSON/XML serialization, or teaching web security concepts, proper HTML entity encoding is essential. The tool supports three entity formats: named entities (<, >), decimal entities (<, >), and hexadecimal entities (<, >)—each useful in different contexts. All processing happens client-side in your browser, making it safe for handling sensitive content or production HTML without sending data to any server.
How to Use
For escaping: paste your HTML or text containing special characters into the input panel. The tool automatically converts characters like <, >, &, ", and ' to their HTML entity equivalents in real-time. Choose your preferred entity format: Named (most readable, e.g., &), Decimal (widely compatible, e.g., &), or Hexadecimal (compact, e.g., &). Toggle 'Keep Line Breaks' to preserve or remove newlines. For unescaping: paste HTML with entities and the tool decodes them back to original characters. The 'Encode All Characters' option escapes even non-special characters, useful for maximum compatibility in edge-case scenarios.
Common Use Cases & Examples
**XSS Prevention**: Escape user input before displaying: '<script>alert(XSS)</script>' becomes '<script>alert(XSS)</script>'. **Template Debugging**: Unescape rendered template output to see what HTML was actually generated. **JSON String Escaping**: Prepare HTML fragments for JSON serialization by escaping quotes and special chars. **Displaying Code**: Show HTML code examples on web pages by escaping tags so they appear as text. **Email HTML**: Escape special characters in email subject lines or headers. **Database Storage**: Escape HTML before storing in text fields to prevent rendering issues.
Limitations & Important Notes
This tool handles HTML entities defined in the HTML5 spec. It does NOT remove or sanitize potentially dangerous HTML attributes (like 'onclick', 'onerror') or JavaScript code—it only escapes character representations. For true XSS prevention, combine escaping with Content Security Policy (CSP) and input validation. The tool assumes UTF-8 encoding; other encodings may produce unexpected results. For very large documents (>5MB), browser memory limits may cause slowdowns—consider using server-side tools for bulk processing. Entity encoding increases text size (e.g., '<' becomes 4+ characters); not ideal for bandwidth-constrained scenarios.