Was sind unsichtbare Zeichen?

Unsichtbare Zeichen sind Unicode-Codepunkte, die keine sichtbare Glyphe haben, aber dennoch Platz in einer Zeichenkette einnehmen und beeinflussen, wie Software Text verarbeitet oder rendert. Sie umfassen Steuerzeichen (wie Tabulator und Zeilenumbruch), Formatierungszeichen (wie Nullbreitenkonnektoren und Richtungsmarken), verschiedene Whitespace-Varianten und spezielle Marker wie die Byte Order Mark (BOM). Da sie unsichtbar sind, sind sie notorisch schwer in einem einfachen Text-Editor zu erkennen und sind eine häufige Quelle für subtile Bugs, fehlerhafte Layouts und Datenverarbeitungsfehler.

Werkzeugbeschreibung

Der Invisible Characters Viewer ist ein interaktiver Text-Editor, der jedes unsichtbare Zeichen als sichtbares Symbol direkt an Ort und Stelle rendert. Fügen Sie beliebigen Text ein oder geben Sie ihn ein, und jedes verborgene Zeichen wird sofort durch eine kleine symbolische Glyphe ersetzt — Tabulatoren erscheinen als →, Leerzeichen als ·, Nullbreitenleerzeichen als ·, Richtungsmarken als → / ←, BOM als ▯ und so weiter. Wenn Sie über eine Glyphe fahren, wird ein Tooltip mit dem vollständigen Namen des Zeichens und seinem Unicode-Codepunkt angezeigt. Nichts verlässt den Editor; das gesamte Rendering erfolgt lokal in Ihrem Browser.

Beispiele

Eingabetext (roh) Was Sie im Viewer sehen
Hello\u200BWorld (Nullbreitenleerzeichen zwischen Wörtern) Hello·World mit der ·-Glyphe für U+200B
\u202Eright-to-left override →right-to-left override mit der Richtungsglyphe am Anfang
line one\r\nline two Wagenrücklauf- und Zeilenumbruch-Glyphen vor dem Umbruch
\uFEFFstart of file ▯start of file zeigt die BOM an Position 0

Funktionen

  • Inline-Rendering: Unsichtbare Zeichen werden als Glyphen direkt im Editor angezeigt, nicht in einem separaten Bereich, sodass Sie sie im Kontext mit dem umgebenden Text sehen
  • Umfassende Zeichenabdeckung: Verarbeitet C0- und C1-Steuerzeichen, alle benannten Unicode-Formatierungszeichen, Unicode-Whitespace-Varianten (Halbgeviert-Leerzeichen, Geviert-Leerzeichen, Haarraum, schmales geschütztes Leerzeichen usw.), Richtungsformatierungszeichen, Variationsselektoren, Tag-Zeichen und BOM
  • Tooltips: Wenn Sie über eine Glyphe fahren, werden der vollständige Unicode-Name und der Codepunkt des Zeichens angezeigt (z. B. Zero Width Space — U+200B)
  • Standard-Whitespace-Hervorhebung: Normale Leerzeichen und Tabulatoren werden mit den integrierten Whitespace-Markern von CodeMirror hervorgehoben, um sie visuell von normalem Text zu unterscheiden
  • Nur-Text-Modus: Der Editor bleibt im Nur-Text-Modus, sodass Sonderzeichen während der Eingabe nie neu interpretiert oder geändert werden

Anwendungsfälle

  • Debugging von Copy-Paste-Artefakten: Text, der aus PDFs, Webseiten oder Textverarbeitungsprogrammen kopiert wird, enthält oft Nullbreitenleerzeichen, weiche Bindestriche oder geschützte Leerzeichen, die zu Nichtübereinstimmungen bei Zeichenkettenvergleichen und Suchergebnissen führen
  • Inspizieren von Datendateien: Fügen Sie CSV-, JSON- oder Log-Ausgaben ein, um unerwartete Steuerzeichen (Null-Bytes, Wagenrücklauf, BOM) vor dem Importieren von Daten in eine Datenbank oder einen Parser zu finden
  • Web- und Code-Debugging: Überprüfen Sie benutzerseitige Eingaben oder API-Antworten auf verborgene Richtungsmarken oder Formatierungszeichen, die das Rendering beeinträchtigen oder Sicherheitsprobleme verursachen könnten

Funktionsweise

Das Werkzeug verwendet CodeMirror 6 mit einer benutzerdefinierten Erweiterung, die jeden Zeichen im sichtbaren Viewport des Editors durchläuft. Für jeden Codepunkt wird eine Nachschlagetabelle bekannter unsichtbarer Zeichen überprüft, gegen Unicode-Eigenschaftsklassen \p{Cc} (Steuerzeichen) und \p{Cf} (Format) getestet und Variationsselektoren sowie Tag-Zeichenbereiche erkannt. Übereinstimmende Zeichen werden durch Inline-Dekorations-Widgets ersetzt, die die entsprechende Symbol-Glyphe anzeigen. Normale Leerzeichen und Tabulatoren werden an die integrierte highlightWhitespace-Erweiterung von CodeMirror delegiert.