¿Qué son los caracteres invisibles?

Los caracteres invisibles son puntos de código Unicode que no tienen un glifo visible pero aún ocupan espacio en una cadena e influyen en cómo el software procesa o renderiza el texto. Incluyen caracteres de control (como tabulación y salto de línea), caracteres de formato (como unidores de ancho cero y marcas direccionales), varias variantes de espacios en blanco y marcadores especiales como la Marca de Orden de Bytes (BOM). Debido a que no se ven, son notoriamente difíciles de detectar en un editor de texto plano y son una fuente común de bugs sutiles, diseños rotos y errores de procesamiento de datos.

Descripción de la herramienta

El Visor de Caracteres Invisibles es un editor de texto interactivo que renderiza cada carácter invisible como un símbolo visible, en el mismo lugar. Pega o escribe cualquier texto y cada carácter oculto se reemplaza inmediatamente por un pequeño glifo simbólico — las tabulaciones aparecen como →, los espacios como ·, los espacios de ancho cero como ·, las marcas direccionales como → / ←, BOM como ▯, y así sucesivamente. Al pasar el cursor sobre cualquier glifo se muestra un tooltip con el nombre completo del carácter y su punto de código Unicode. Nada sale del editor; todo el renderizado ocurre localmente en tu navegador.

Ejemplos

Texto de entrada (sin procesar) Lo que ves en el visor
Hello\u200BWorld (espacio de ancho cero entre palabras) Hello·World con el glifo · marcando U+200B
\u202Eright-to-left override →right-to-left override con el glifo direccional al inicio
line one\r\nline two Glifos de retorno de carro y salto de línea antes de la nueva línea
\uFEFFstart of file ▯start of file mostrando el BOM en la posición 0

Características

  • Renderizado en línea: Los caracteres invisibles se muestran como glifos directamente dentro del editor en lugar de en un panel separado, por lo que los ves en contexto con el texto circundante
  • Cobertura amplia de caracteres: Maneja caracteres de control C0 y C1, todos los caracteres de formato Unicode nombrados, variantes de espacios en blanco Unicode (espacio en, espacio em, espacio fino, espacio sin salto estrecho, etc.), caracteres de formato direccional, selectores de variación, caracteres de etiqueta y BOM
  • Tooltips: Al pasar el cursor sobre cualquier glifo se muestra el nombre Unicode completo del carácter y su punto de código (por ejemplo, Zero Width Space — U+200B)
  • Resaltado de espacios en blanco estándar: Los espacios y tabulaciones regulares se resaltan utilizando los marcadores de espacios en blanco integrados de CodeMirror, manteniéndolos visualmente distintos del texto regular
  • Modo de texto plano: El editor permanece en modo de texto plano para que los caracteres especiales nunca se reinterpreten o modifiquen mientras escribes

Casos de uso

  • Depuración de artefactos de copiar-pegar: El texto copiado de PDFs, páginas web o procesadores de texto a menudo lleva espacios de ancho cero, guiones suaves o espacios sin salto que causan desajustes en comparaciones de cadenas y resultados de búsqueda
  • Inspección de archivos de datos: Pega CSV, JSON o salida de registro para localizar caracteres de control inesperados (bytes nulos, retornos de carro, BOM) antes de importar datos en una base de datos o analizador
  • Depuración web y de código: Verifica la entrada proporcionada por el usuario o las respuestas de API para marcas direccionales ocultas o caracteres de formato que puedan romper el renderizado o causar problemas de seguridad

Cómo funciona

La herramienta utiliza CodeMirror 6 con una extensión personalizada que itera sobre cada carácter en la ventana gráfica visible del editor. Para cada punto de código, verifica una tabla de búsqueda de caracteres invisibles conocidos, prueba contra las clases de propiedades Unicode \p{Cc} (control) y \p{Cf} (formato), y detecta selectores de variación y rangos de caracteres de etiqueta. Los caracteres coincidentes se reemplazan por widgets de decoración en línea que muestran el glifo de símbolo correspondiente. Los espacios y tabulaciones regulares se delegan a la extensión highlightWhitespace integrada de CodeMirror.