HTML Entity Encoder

Encode and decode HTML entities for safe web content display

Back to Tools

Operation & Settings

HTML Entity Reference

Common Named Entities

Char
Named Entity
Numeric
&
&
&
<
&lt;
<
>
&gt;
>
"
&quot;
"
'
&apos;
'
 
&nbsp;
 
©
&copy;
©
®
&reg;
®

Encoding Types

  • Basic: Only &, <, >, ", ' characters
  • Named: Human-readable entity names
  • Numeric: Decimal number codes
  • Hex: Hexadecimal number codes
  • All: Complete entity encoding

Security Benefits

  • Prevents XSS attacks
  • Safe display of user content
  • Protects against code injection
  • Ensures proper HTML rendering
  • Maintains data integrity

HTML Entity Guidelines

When to Encode

  • Displaying user-generated content
  • Embedding text in HTML attributes
  • Showing code examples in HTML
  • Preventing script execution
  • International character support

Important Notes

  • Double encoding can cause issues
  • Different contexts need different encoding
  • Some frameworks auto-encode
  • URL parameters need URL encoding
  • JSON requires different escaping

Best Practices

  • Always encode untrusted input
  • Use appropriate encoding for context
  • Test with special characters
  • Validate after decoding
  • Consider internationalization
\\n\\nSymbols: © ® ™ € £ ¥\\n\\nMath: 2 > 1 & 3 < 5\\n\\nQuotes: "Hello" and \\'World\\''; } else { sample = 'This text contains special characters: < > & " '\\n\\nHTML tags: <script>alert("test")</script>\\n\\nSymbols: © ® ™ € £ ¥\\n\\nMath: 2 > 1 & 3 < 5\\n\\nQuotes: "Hello" and 'World''; } document.getElementById('input_text').value = sample; showToast('Sample text loaded!'); } function clearInput() { document.getElementById('input_text').value = ''; showToast('Input cleared!'); } function swapOperation() { const encodeRadio = document.querySelector('input[value="encode"]'); const decodeRadio = document.querySelector('input[value="decode"]'); if (encodeRadio.checked) { decodeRadio.checked = true; } else { encodeRadio.checked = true; } updateInterface(); } function updateInterface() { const operation = document.querySelector('input[name="operation"]:checked').value; const textarea = document.getElementById('input_text'); const label = document.querySelector('label[for="input_text"]'); if (operation === 'encode') { textarea.placeholder = 'Enter text with special characters...'; label.textContent = 'Text to Encode'; } else { textarea.placeholder = 'Enter HTML entities to decode...'; label.textContent = 'HTML Entities to Decode'; } // Show/hide encoding type selection const encodingDiv = document.querySelector('select[name="encoding_type"]').closest('div'); if (operation === 'encode') { encodingDiv.style.display = 'block'; } else { encodingDiv.style.display = 'none'; } } function copyResult() { const result = document.getElementById('result'); result.select(); document.execCommand('copy'); showToast('Result copied to clipboard!'); } function downloadResult() { const result = document.getElementById('result').value; const operation = document.querySelector('input[name="operation"]:checked').value; const filename = operation === 'encode' ? 'encoded-entities.html' : 'decoded-text.txt'; const blob = new Blob([result], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); showToast('Result downloaded!'); } function previewHTML() { const result = document.getElementById('result').value; const operation = document.querySelector('input[name="operation"]:checked').value; const modal = document.getElementById('preview-modal'); const content = document.getElementById('preview-content'); if (operation === 'decode') { // Show decoded HTML as rendered HTML content.innerHTML = result; } else { // Show encoded entities as plain text content.textContent = result; } modal.style.display = 'block'; } function closePreview() { document.getElementById('preview-modal').style.display = 'none'; } function showToast(message, type = 'success') { const colors = { success: '#27ae60', error: '#e74c3c', warning: '#f39c12', info: '#3498db' }; const toast = document.createElement('div'); toast.style.cssText = \` position: fixed; top: 20px; right: 20px; background: \${colors[type]}; color: white; padding: 1rem 2rem; border-radius: 8px; z-index: 10000; font-weight: 600; animation: slideIn 0.3s ease; max-width: 300px; \`; toast.textContent = message; document.body.appendChild(toast); setTimeout(() => { if (document.body.contains(toast)) { document.body.removeChild(toast); } }, 4000); } // Update interface when radio buttons change document.querySelectorAll('input[name="operation"]').forEach(radio => { radio.addEventListener('change', updateInterface); }); // Close modal when clicking outside document.getElementById('preview-modal').addEventListener('click', function(e) { if (e.target === this) { closePreview(); } }); // Keyboard shortcuts document.addEventListener('keydown', function(e) { if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); document.querySelector('form').submit(); } if (e.key === 'Escape') { closePreview(); } }); // Initialize interface updateInterface();