Escapar/Desescapar HTML - Convierte caracteres especiales

Web Herramientas

Escapar/Desescapar HTML

Convierte caracteres especiales a entidades HTML y viceversa. Útil para prevenir XSS, mostrar código HTML en páginas web y limpiar datos.

* El procesamiento se realiza localmente en tu navegador

Texto original

Caracteres: 0

Resultado

Caracteres: 0 Tamaño: 0 B

Tabla de referencia - Caracteres especiales HTML

32

Carácter	Entidad HTML	Descripción	Carácter	Entidad HTML	Descripción
<	`<`	Menor que	>	`>`	Mayor que
&	`&`	Ampersand	"	`"`	Comillas dobles
'	`'`	Comilla simple		` `	Espacio no separable
©	`©`	Copyright	®	`®`	Marca registrada
€	`€`	Euro	¢	`¢`	Centavo
£	`£`	Libra	¥	`¥`	Yen

Ejemplos rápidos:

¿Por qué es importante escapar HTML?

Prevención de XSS:
Escapar caracteres especiales evita la inyección de código malicioso en tus aplicaciones web.

Mostrar código en páginas web:
Para mostrar etiquetas HTML como texto, debes escaparlas primero.

Historial de conversiones

No hay conversiones guardadas

\n

', special: 'Hola & "Amigo" = \'Programador\'', encoded: '<h1>Título</h1>\n<p>Texto con & caracteres</p>' }; document.getElementById('inputText').value = examples[type]; document.getElementById('inputChars').textContent = examples[type].length; if (type === 'encoded') { unescapeHTML(); } else { escapeHTML(); } showToast(`Ejemplo de ${type === 'encoded' ? 'texto escapado' : 'texto HTML'} cargado`, 'success'); } function saveToHistory(action, originalLength, resultLength) { const historyItem = { id: Date.now(), date: new Date().toLocaleString(), action: action, originalLength: originalLength, resultLength: resultLength, difference: resultLength - originalLength }; let history = JSON.parse(localStorage.getItem('html_escape_history')) || []; history.unshift(historyItem); if (history.length > 10) history = history.slice(0, 10); localStorage.setItem('html_escape_history', JSON.stringify(history)); showHistory(); } function showHistory() { const history = JSON.parse(localStorage.getItem('html_escape_history')) || []; const container = document.getElementById('history'); if (history.length === 0) { container.innerHTML = '

No hay conversiones guardadas

'; return; } let html = '

'; history.forEach((item, index) => { const style = index === 0 ? 'style="background-color: #fff3cd;"' : ''; const diffIcon = item.difference > 0 ? '📈' : (item.difference < 0 ? '📉' : '➡️'); html += `

${item.action}

${item.originalLength} → ${item.resultLength} caracteres ${diffIcon}

${item.date}

`; }); html += '

'; container.innerHTML = html; } function clearHistory() { if (confirm('¿Eliminar todo el historial de conversiones?')) { localStorage.removeItem('html_escape_history'); showHistory(); } } function showToast(message, type = 'success') { const toast = document.createElement('div'); toast.className = 'position-fixed top-0 end-0 p-3'; toast.style.zIndex = '9999'; const bgColor = type === 'success' ? 'bg-success' : (type === 'error' ? 'bg-danger' : 'bg-warning'); const icon = type === 'success' ? 'bi-check-lg' : (type === 'error' ? 'bi-exclamation-triangle' : 'bi-info-circle'); const title = type === 'success' ? 'Éxito' : (type === 'error' ? 'Error' : 'Aviso'); toast.innerHTML = `

${title}

${message}

`; document.body.appendChild(toast); setTimeout(() => toast.remove(), 2000); } // Actualizar contador de caracteres del input document.getElementById('inputText').addEventListener('input', function() { document.getElementById('inputChars').textContent = this.value.length; }); // Inicializar document.addEventListener('DOMContentLoaded', () => { showHistory(); document.getElementById('inputChars').textContent = '0'; });