Saltar al contenido principal

Escape/Unescape de Cadenas

Una herramienta para escapar y desescapar caracteres especiales en cadenas para varios formatos. ¡Esencial para procesamiento de datos, desarrollo de API y trabajo frontend!

Examples:

Formatos Soportados​

📝 JSON​

Escapa caracteres especiales para formato JSON.

Escape:

  • Nueva línea → \n
  • Tabulación → \t
  • Comillas → \"
  • Barra invertida → \\

Casos de uso:

  • Petición/respuesta de API
  • Archivos de configuración
  • Almacenamiento de datos

🌐 HTML​

Escapa caracteres especiales HTML para prevenir ataques XSS.

Escape:

  • < → &lt;
  • > → &gt;
  • & → &amp;
  • " → &quot;
  • ' → &#39;

Casos de uso:

  • Mostrar entrada de usuario
  • Prevención XSS
  • Generación HTML

🔗 URL​

Codifica caracteres especiales para transmisión segura de URL.

Escape:

  • Espacio → %20
  • Caracteres especiales → Codificación porcentual
  • Caracteres reservados → Codificados

Casos de uso:

  • Parámetros de consulta
  • Generación de URL
  • Llamadas a endpoints de API

💻 JavaScript​

Escapa caracteres especiales para cadenas JavaScript.

Escape:

  • Nueva línea → \n
  • Comillas → \' o \"
  • Barra invertida → \\
  • Unicode → \uXXXX

Casos de uso:

  • Generación dinámica de scripts
  • Procesamiento de plantillas literales
  • Generación de código

📄 XML​

Escapa caracteres especiales para formato XML/HTML.

Escape:

  • < → &lt;
  • > → &gt;
  • & → &amp;
  • " → &quot;
  • ' → &apos;

Casos de uso:

  • Generación de documentos XML
  • API SOAP
  • Feeds RSS/Atom

Ejemplos Prácticos​

Mostrar Entrada de Usuario​

// Prevenir XSS
const userInput = '<script>alert("XSS")</script>';
const escaped = escapeHTML(userInput);
// Resultado: &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;
document.getElementById('output').textContent = escaped;

Petición de API​

// Escape JSON
const data = {
  message: 'Hola\nMundo\t!'
};
const jsonString = JSON.stringify(data);
// Resultado: {"message":"Hola\\nMundo\\t!"}

Parámetros de Consulta URL​

// Codificación URL
const searchQuery = 'búsqueda prueba';
const encodedQuery = encodeURIComponent(searchQuery);
// Resultado: b%C3%BAsqueda%20prueba
const url = `https://api.example.com/search?q=${encodedQuery}`;

Generación Dinámica de Código​

// Escape JavaScript
const userMessage = "Es un \"gran\" día!";
const code = `console.log('${userMessage.replace(/'/g, "\\'")}');`;
// Resultado: console.log('Es un \"gran\" día!');

Consejos de Uso​

1. Selección de Formato​

  • JSON: Para comunicación API o almacenamiento de datos
  • HTML: Para mostrar contenido en páginas web
  • URL: Para parámetros de consulta o segmentos de ruta
  • JavaScript: Para generar código dinámicamente
  • XML: Para documentos XML o feeds RSS

2. Cuándo Es Necesario Escapar​

  • ✅ Mostrar entrada de usuario
  • ✅ Transmisión de datos API
  • ✅ Generación de consultas de base de datos
  • ✅ Pasar parámetros URL
  • ✅ Generación dinámica de código

3. Cuándo Es Necesario Desescapar​

  • ✅ Procesar datos API recibidos
  • ✅ Analizar parámetros de consulta
  • ✅ Restaurar datos almacenados
  • ✅ Procesar datos codificados en URL

Consideraciones de Seguridad​

Prevención XSS​

Siempre escapar al mostrar entrada de usuario:

// ❌ Peligroso
element.innerHTML = userInput;

// ✅ Seguro
element.textContent = userInput;
// o
element.innerHTML = escapeHTML(userInput);

Prevención de Inyección SQL​

Usar consultas parametrizadas en lugar de escapar:

// ❌ Peligroso
const query = `SELECT * FROM users WHERE name = '${userInput}'`;

// ✅ Seguro
const query = 'SELECT * FROM users WHERE name = ?';
db.execute(query, [userInput]);

Notas​

  • Diferentes formatos requieren diferentes métodos de escape
  • Escape ≠ Codificación (conceptos diferentes)
  • También es necesaria la validación del lado del servidor
  • Cuidado con doble escape/unescape
  • Usar funciones integradas para cada lenguaje

Herramientas Relacionadas​