HTML Escape/Unescape Tool

Convert special characters to HTML entities (escape) or decode HTML entities back to readable text (unescape). Perfect for web development and security.

Escape HTML
Unescape HTML
Both Ways

Input Text

0 characters
Enter your text here to escape or unescape...

Output Result

0 characters
Result will appear here...

Options

Common HTML Entities Reference

Character Entity Name Numeric Entity Description
< &lt; &#60; Less than sign
> &gt; &#62; Greater than sign
& &amp; &#38; Ampersand
" &quot; &#34; Double quotation mark
' &apos; &#39; Single quotation mark (apostrophe)
© &copy; &#169; Copyright symbol
® &reg; &#174; Registered trademark
™ &trade; &#8482; Trademark symbol
€ &euro; &#8364; Euro currency
£ &pound; &#163; Pound sterling

Security Protection

Prevent XSS attacks by escaping user input before displaying it on web pages

Code Safety

Ensure HTML code displays correctly by escaping special characters in code examples

Two-way Conversion

Convert between escaped and unescaped text with a single click

Real-time Processing

See changes instantly as you type or modify options

HTML Escape/Unescape Tool - Secure Your Web Content

Our HTML Escape/Unescape Tool is an essential utility for web developers, content creators, and security professionals. It helps you convert special characters to their corresponding HTML entities (escaping) and vice versa (unescaping), ensuring your web content displays correctly and securely.

Why HTML Escaping is Important?

What Does HTML Escaping Do?

HTML escaping converts special characters that have meaning in HTML into their corresponding HTML entities. For example:

Key Features of Our HTML Escape/Unescape Tool

Frequently Asked Questions

What is HTML escaping?

HTML escaping is the process of converting special characters that have meaning in HTML (like <, >, &) into their corresponding HTML entities (like &lt;, &gt;, &amp;) so they display as text rather than being interpreted as HTML code.

When should I escape HTML?

You should escape HTML whenever you're displaying user-generated content, displaying code examples, or outputting data that may contain special characters. This is especially important for security to prevent XSS attacks.

What's the difference between named and numeric entities?

Named entities use readable names (like &lt; for <) while numeric entities use character codes (like &#60; for <). Named entities are easier to read, while numeric entities work with all characters including those without named equivalents.

Should I escape all special characters?

For maximum security, yes. But for readability, you might choose to escape only HTML-relevant characters (<, >, &, ", '). Our tool lets you choose based on your needs.

What is unescaping used for?

Unescaping converts HTML entities back to their original characters. This is useful when you need to process or display stored HTML content, or when working with data from external sources.

Is escaping enough for XSS protection?

Escaping is a crucial first step, but for complete XSS protection, you should also use Content Security Policy (CSP), input validation, and other security measures. Always follow security best practices for web applications.

Common Use Cases for HTML Escaping/Unescaping

Best Practices for HTML Escaping

Whether you're building a secure web application, creating technical documentation, or working with user-generated content, our HTML Escape/Unescape Tool provides the functionality you need to handle special characters safely and effectively. The tool is completely free, requires no registration, and works directly in your browser.

\n

Hello & "World"

\nPrice: 10 < 20 & 30 > 15'; } else if (currentMode === 'unescape') { inputText.value = '<script>alert("XSS");</script>\n<p>Hello & "World"</p>\nPrice: 10 < 20 & 30 > 15'; } else { inputText.value = '
Hello & Welcome
'; } updateCharCount(); updateOutput(); } function processText() { updateOutput(); showToast('Text processed successfully'); } function updateOutput() { const input = inputText.value; if (!input.trim()) { outputText.value = ''; outputCount.textContent = '0 characters'; outputPlaceholder.style.display = 'block'; return; } outputPlaceholder.style.display = 'none'; let output; const escapeAll = document.getElementById('escapeAll').checked; const useNamed = document.getElementById('useNamed').checked; const preserveFormatting = document.getElementById('preserveFormatting').checked; const hexEncoding = document.getElementById('hexEncoding').checked; switch(currentMode) { case 'escape': output = escapeHTML(input, escapeAll, useNamed, hexEncoding, preserveFormatting); break; case 'unescape': output = unescapeHTML(input, preserveFormatting); break; case 'both': const escaped = escapeHTML(input, escapeAll, useNamed, hexEncoding, preserveFormatting); const unescaped = unescapeHTML(input, preserveFormatting); output = `=== Escaped Version ===\n${escaped}\n\n=== Unescaped Version ===\n${unescaped}`; break; } outputText.value = output; // Update output count const count = output.length; outputCount.textContent = `${count} character${count !== 1 ? 's' : ''}`; } function escapeHTML(text, escapeAll, useNamed, hexEncoding, preserveFormatting) { if (preserveFormatting) { // Preserve line breaks text = text.replace(/\n/g, '
').replace(/\r/g, ''); } if (escapeAll) { // Escape all special characters return text.replace(/[^\w\s]/g, function(match) { if (useNamed && htmlEntities[match]) { return htmlEntities[match]; } if (hexEncoding) { return '&#x' + match.charCodeAt(0).toString(16) + ';'; } return '&#' + match.charCodeAt(0) + ';'; }); } else { // Escape only HTML-relevant characters return text.replace(/[&<>"']/g, function(match) { if (useNamed) { switch(match) { case '&': return '&'; case '<': return '<'; case '>': return '>'; case '"': return '"'; case "'": return '''; } } if (hexEncoding) { return '&#x' + match.charCodeAt(0).toString(16) + ';'; } return '&#' + match.charCodeAt(0) + ';'; }); } } function unescapeHTML(text, preserveFormatting) { // First, decode named entities let result = text; // Replace all named entities Object.keys(namedEntities).forEach(entity => { const regex = new RegExp(entity.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'); result = result.replace(regex, namedEntities[entity]); }); // Replace numeric entities (decimal) result = result.replace(/&#(\d+);/g, function(match, dec) { return String.fromCharCode(dec); }); // Replace numeric entities (hexadecimal) result = result.replace(/&#x([0-9a-f]+);/gi, function(match, hex) { return String.fromCharCode(parseInt(hex, 16)); }); if (preserveFormatting) { // Convert
back to newlines result = result.replace(//gi, '\n'); } return result; } function swapText() { const input = inputText.value; const output = outputText.value; inputText.value = output; outputText.value = input; updateCharCount(); showToast('Input and output swapped'); } function clearAll() { if (confirm('Clear all text areas?')) { inputText.value = ''; outputText.value = ''; inputCount.textContent = '0 characters'; outputCount.textContent = '0 characters'; inputPlaceholder.style.display = 'block'; outputPlaceholder.style.display = 'block'; showToast('All text cleared'); } } function copyOutput() { if (!outputText.value.trim()) { showToast('No output to copy', 'warning'); return; } outputText.select(); outputText.setSelectionRange(0, 99999); // For mobile devices navigator.clipboard.writeText(outputText.value).then(() => { showToast('Output copied to clipboard!'); }).catch(err => { console.error('Copy failed:', err); // Fallback method document.execCommand('copy'); showToast('Output copied to clipboard!'); }); } function showToast(message, type = 'success') { const toast = document.getElementById('toast'); toast.textContent = message; toast.className = 'toast'; if (type === 'error') { toast.classList.add('error'); toast.innerHTML = ' ' + message; } else if (type === 'warning') { toast.classList.add('warning'); toast.innerHTML = ' ' + message; } else { toast.innerHTML = ' ' + message; } toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, 3000); }