JavaScripts › Texteffekte

Text zu Binärcode

Zeigt, welche Nullen und Einsen hinter einem Text stecken — wahlweise binär, oktal oder hexadezimal, und wieder zurück.

Im Rechner gibt es keine Buchstaben. Es gibt nur Zahlen, und die stehen als Folgen von Nullen und Einsen im Speicher. Dieses Script macht das sichtbar: Tragt einen Text ein, und ihr seht die Bitfolge, die tatsächlich dahintersteckt — und ihr könnt aus so einer Folge auch wieder Text machen.

Das große A ist die Nummer 65 und damit 01000001. Acht Stellen ergeben ein Byte, und mit acht Stellen lassen sich 256 verschiedene Werte darstellen. Für das englische Alphabet reicht das bequem — die alte ASCII-Tabelle brauchte nur 128 Werte. Für Umlaute, das Eurozeichen und die Schriftzeichen der übrigen Welt reicht es nicht, und deshalb belegen diese heute zwei, drei oder vier Bytes. Probiert es aus: Ein „a" ergibt eine Achtergruppe, ein „ä" deren zwei, ein Emoji sogar vier.

Neben der Binärschreibweise bietet das Script zwei Abkürzungen an, die Programmierer im Alltag benutzen. Hexadezimal fasst je vier Bits zu einer Ziffer von 0 bis f zusammen, ein Byte wird damit zu zwei Zeichen statt zu acht — deshalb sind Farbangaben wie #c81e5a und die SHA-256-Prüfsumme so geschrieben. Oktal fasst je drei Bits zusammen und begegnet einem heute fast nur noch bei Dateirechten auf Unix-Systemen.

Verwandtes: Die Bacon-Chiffre ist derselbe Gedanke mit A und B statt 0 und 1, nur 400 Jahre älter. In der Mathematik-Abteilung wandelt Dezimalzahl in Binärzahl reine Zahlen um, und Hexadezimal zu Dezimal geht den umgekehrten Weg. Welche Nummer welches Zeichen trägt, zeigt die Zeichentabelle.

Texteffekte Baujahr 2026 läuft in deinem Browser
Script von kostenlose-javascripts.de

So funktioniert das Script

Das Script hat zwei Richtungen und in beiden dieselbe Mitte: die Bytes. Vom Text zu den Bytes und zurück übernimmt der Browser, das Umschreiben der Bytes in eine Zahlenschreibweise erledigen zwei eingebaute Funktionen.

const bytes = new TextEncoder().encode(feld.value);

Der TextEncoder übersetzt den Text in UTF-8-Bytes. Das ist die eigentliche Antwort auf die Frage „Was steht denn nun im Speicher?" — nämlich diese Zahlen von 0 bis 255. Ohne diesen Schritt käme man in Versuchung, mit charCodeAt zu arbeiten; das liefert aber die Zeichennummer und nicht die Bytes, und bei allem jenseits von A bis Z gehen die beiden auseinander.

bytes[i].toString(Number(b)).padStart(stellen[b], "0");

toString mit einem Argument schreibt eine Zahl in einem anderen Stellenwertsystem: toString(2) binär, toString(16) hexadezimal, und alles von 2 bis 36 ist erlaubt. Der Haken ist die Länge — die 5 wird binär zu „101" und nicht zu „00000101". Ohne führende Nullen ließe sich die Folge später nicht mehr in Bytes zerlegen, deshalb füllt padStart jede Gruppe auf ihre feste Stellenzahl auf: acht binär, drei oktal, zwei hexadezimal.

const stellen = { "2": 8, "8": 3, "16": 2 };

Warum gerade diese Zahlen? Weil 28 = 256 ist, also acht Bits genau ein Byte ergeben; weil eine Oktalziffer drei Bits fasst (23 = 8) und drei davon bis 511 reichen, also bequem über 255 hinaus; und weil eine Hexadezimalziffer vier Bits fasst (24 = 16), zwei davon also exakt acht Bits. Hexadezimal passt deshalb so schön zu Bytes — und Oktal nicht ganz, was einer der Gründe für seinen Bedeutungsverlust ist.

const wert = parseInt(teile[i], b);
if (isNaN(wert) || wert < 0 || wert > 255) { … }

parseInt mit zweitem Argument liest eine Zahl in der angegebenen Basis — das Gegenstück zu toString. Die Prüfung darunter ist wichtiger, als sie aussieht: parseInt("hallo", 2) liefert NaN, „nicht eine Zahl", und ohne Abfangen entstünde daraus ein unbrauchbares Byte. Und Werte über 255 passen schlicht nicht in ein Byte; sie deuten darauf hin, dass die Gruppen falsch getrennt sind.

for (const zeichen of feld.value) { … }

Für die Aufschlüsselungstabelle wird der Text mit for … of durchlaufen und nicht mit einer Zählschleife über charAt. Das ist Absicht: for … of geht über echte Zeichen, während eine Zählschleife über die interne Speicherung läuft — und dort besteht ein Emoji aus zwei Hälften, die einzeln keinen Sinn ergeben. Bei Umlauten fällt der Unterschied nicht auf, bei Emoji sofort.

Zum Anpassen: Wollt ihr die alte Sichtweise „ein Zeichen = ein Byte", ersetzt ihr den TextEncoder durch eine Schleife mit charCodeAt — das ergibt für reinen englischen Text dasselbe und für Umlaute die Zeichennummer statt der Bytes. Für Gruppen ohne Leerzeichen lasst ihr das join(" ") weg; beim Zurückwandeln müsst ihr die Folge dann in Stücke fester Länge schneiden, wofür sich match(/.{8}/g) anbietet.

Script für die eigene Homepage

Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.

Mehr aus der Kategorie Texteffekte