HTML Encoder/Decoder

Encode and decode HTML entities for safe display and processing

HTML Encoder

Raw HTML/Text:

HTML Decoder

Encoded HTML:

Results

HTML Preview

HTML preview will appear here when decoding...

Common HTML Entities

Character	Entity Name	Entity Number	Description
`<`	`<`	`<`	Less than
`>`	`>`	`>`	Greater than
`&`	`&`	`&`	Ampersand
`"`	`"`	`"`	Quotation mark
`'`	`'`	`'`	Apostrophe
	` `	` `	Non-breaking space

Quick Actions

Statistics

Characters: 0
Entities Found: 0
HTML Tags: 0

Use Cases

Prevent XSS attacks
Display code snippets
Safe data storage
Form input sanitization
Email template safety

Link with parameters `; document.getElementById('rawHtml').value = sample; autoEncode(); } else { const sample = `<div class="example"> <h1>Welcome to HTML Decoding</h1> <p>This text contains encoded characters: < > & " '</p> <strong>Safe to display!</strong> </div>`; document.getElementById('encodedHtml').value = sample; autoDecode(); } } function swapContent() { const rawValue = document.getElementById('rawHtml').value; const encodedValue = document.getElementById('encodedHtml').value; document.getElementById('rawHtml').value = encodedValue; document.getElementById('encodedHtml').value = rawValue; // Update result based on which field has content if (encodedValue.trim()) { autoDecode(); } else if (rawValue.trim()) { autoEncode(); } } function clearEncoder() { document.getElementById('rawHtml').value = ''; document.getElementById('resultOutput').value = ''; updateStatistics(''); } function clearDecoder() { document.getElementById('encodedHtml').value = ''; document.getElementById('resultOutput').value = ''; document.getElementById('htmlPreview').innerHTML = '

HTML preview will appear here when decoding...

'; updateStatistics(''); } function copyResult() { const result = document.getElementById('resultOutput').value; if (!result) { showNotification('No result to copy', 'warning'); return; } navigator.clipboard.writeText(result).then(() => { showNotification('Result copied to clipboard!', 'success'); }).catch(() => { showNotification('Failed to copy result', 'error'); }); } function downloadResult() { const result = document.getElementById('resultOutput').value; if (!result) { showNotification('No result to download', 'warning'); return; } const blob = new Blob([result], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'html-encoded-decoded.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); showNotification('File downloaded successfully!', 'success'); } function updateStatistics(text) { const charCount = text.length; const entityCount = (text.match(/&[a-zA-Z0-9#]+;/g) || []).length; const tagCount = (text.match(/<[^>]+>/g) || []).length; document.getElementById('charCount').textContent = charCount; document.getElementById('entityCount').textContent = entityCount; document.getElementById('tagCount').textContent = tagCount; } function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } function showNotification(message, type) { const notification = document.createElement('div'); notification.className = `alert alert-${type === 'error' ? 'danger' : type === 'warning' ? 'warning' : 'success'} alert-dismissible fade show position-fixed`; notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;'; notification.innerHTML = ` ${message} `; document.body.appendChild(notification); setTimeout(() => { if (notification.parentNode) { notification.remove(); } }, 3000); }