HTML Entity Encoder

Entity Encoder Tool

Probier es aus: Gib einen Text ein und klicke auf "Encode". Den Output kannst du direkt in dein HTML einfügen.

Entity Encoder

Encode Kopieren

Entity Decoder Tool

Hier kannst du Entity-Codes wieder in lesbaren Text zurückverwandeln - praktisch zum Überprüfen oder wenn du fremden Code analysierst.

Entity Decoder

Decode Kopieren

Live-Vorschau

So sieht der encoded Text im Browser aus – identisch zum Original:

Beide Zeilen sehen identisch aus – aber im Quellcode steht bei der zweiten nur Zahlencode:

Wofür kann ich das nutzen?

Der Entity Encoder eignet sich für verschiedene Szenarien:

1. E-Mail-Adressen vor Spam-Bots schützen

Das häufigste Einsatzgebiet: Spam-Bots durchsuchen Websites nach dem @-Zeichen oder mailto:-Links. Wenn du deine E-Mail-Adresse in Entities umwandelst, finden einfache Bots sie nicht mehr.

HTML Kopieren

<!-- Statt -->
<a href="mailto:info&#64;example.com">info&#64;example.com</a>

<!-- Verwendest du -->
<a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;...">
    ...
</a>

2. Telefonnummern verschleiern

Auch Telefonnummern werden von Bots gesammelt. Der gleiche Trick funktioniert hier genauso gut.

3. Datenschutzerklärungen und Impressum

Pflichtangaben wie Name und Adresse müssen auf der Website stehen, aber das bedeutet nicht, dass sie für jeden Crawler lesbar sein müssen.

4. Unicode- und Sonderzeichen sicher einbetten

Manche Zeichen machen in bestimmten Kontexten Probleme. Mit Entity-Kodierung stellst du sicher, dass sie überall korrekt dargestellt werden - unabhängig von der Zeichenkodierung der Datei.

5. JavaScript-Grundlagen lernen

Der Encoder ist ein perfektes Mini-Projekt, um charCodeAt(), Schleifen und String-Manipulation zu üben.

Code verstehen

Schauen wir uns an, wie Encoder und Decoder funktionieren. Das Script nutzt moderne JavaScript-Patterns wie querySelectorAll und addEventListener.

Der Encoder-Code

JavaScript Kopieren

document.querySelectorAll('.entity-encoder').forEach(block => {
    const input = block.querySelector('.code-input');
    const output = block.querySelector('.code-output');
    const encodeBtn = block.querySelector('.encode-btn');

    // Encode-Funktion
    function encodeText(str) {
        let encoded = '';
        for (let i = 0; i < str.length; i++) {
            encoded += '&#' + str.charCodeAt(i) + ';';
        }
        return encoded;
    }

    // Encode Button
    encodeBtn.addEventListener('click', () => {
        output.value = encodeText(input.value);
    });
});

Schritt 1: Alle Encoder-Boxen finden

JavaScript Kopieren

document.querySelectorAll('.entity-encoder').forEach(block => {

Statt einer einzelnen ID suchen wir nach allen Elementen mit der Klasse .entity-encoder. Das hat einen großen Vorteil: Du könntest mehrere Encoder auf einer Seite haben, und jeder funktioniert unabhängig.

• querySelectorAll('.entity-encoder') - Findet alle Elemente mit dieser Klasse
• .forEach(block => { }) - Führt den Code für jedes gefundene Element aus
• block - Ist die aktuelle Encoder-Box in der Schleife

Schritt 2: Elemente innerhalb der Box finden

JavaScript Kopieren

const input = block.querySelector('.code-input');
const output = block.querySelector('.code-output');
const encodeBtn = block.querySelector('.encode-btn');

Mit block.querySelector() suchen wir nur innerhalb dieser einen Box - nicht im gesamten Dokument. So bekommt jede Box ihre eigenen Referenzen.

Schritt 3: Die Encode-Funktion

JavaScript Kopieren

function encodeText(str) {
    let encoded = '';
    for (let i = 0; i < str.length; i++) {
        encoded += '&#' + str.charCodeAt(i) + ';';
    }
    return encoded;
}

Die eigentliche Umwandlung passiert hier:

• for (let i = 0; i < str.length; i++) - Geht jeden Buchstaben durch
• str.charCodeAt(i) - Holt den Unicode-Wert des Zeichens an Position i
• '&#' + ... + ';' - Baut daraus den Entity-Code (z.B. A für "A")
• encoded += - Hängt jeden Code an den Ergebnis-String an

Schritt 4: Event Listener für den Button

JavaScript Kopieren

encodeBtn.addEventListener('click', () => {
    output.value = encodeText(input.value);
});

Statt onclick="..." im HTML nutzen wir addEventListener. Das ist moderner und trennt HTML von JavaScript sauber.

• addEventListener('click', ...) - Reagiert auf Klicks
• () => { } - Eine Arrow FunctionKurzschreibweise für anonyme Funktionen in JavaScript, die beim Klick ausgeführt wird
• input.value - Holt den eingegebenen Text
• output.value = ... - Schreibt das Ergebnis ins Output-Feld

Der Decoder-Code

Der Decoder macht das Gegenteil - er wandelt Entity-Codes zurück in lesbare Zeichen. Dafür nutzt er einen regulären AusdruckPattern zum Suchen und Ersetzen von Text (RegEx).

JavaScript Kopieren

function decodeEntities(str) {
    return str.replace(/&#(\d+);/g, (match, dec) => {
        return String.fromCharCode(dec);
    });
}

Der reguläre Ausdruck erklärt

RegEx Kopieren

/&#(\d+);/g

Dieser Ausdruck findet alle Entity-Codes im Text:

• &# - Sucht nach dem Literal "&#"
• (\d+) - Fängt eine oder mehrere Ziffern ein (die Klammern "merken" sich den Wert)
• ; - Sucht nach dem abschließenden Semikolon
• g - "Global" - findet alle Vorkommen, nicht nur das erste

Die replace-Callback-Funktion

JavaScript Kopieren

str.replace(/&#(\d+);/g, (match, dec) => {
    return String.fromCharCode(dec);
});

replace() kann statt einem Ersetzungstext auch eine Funktion bekommen:

• match - Der gesamte gefundene Text (z.B. A)
• dec - Der Inhalt der Klammer, also nur die Zahl (z.B. 65)
• String.fromCharCode(dec) - Wandelt die Zahl zurück in ein Zeichen (z.B. A)

Bonus: Unicode verstehen

Hinter charCodeAt() und String.fromCharCode() steckt das Unicode-System - ein internationaler Standard, der jedem Zeichen eine eindeutige Nummer zuweist.

JavaScript Kopieren

// Einige Beispiele:
'A'.charCodeAt(0)    // → 65
'a'.charCodeAt(0)    // → 97
'@'.charCodeAt(0)    // → 64
'€'.charCodeAt(0)    // → 8364
'😀'.charCodeAt(0)   // → 55357 (Emojis sind komplizierter!)

Die ersten 128 Zeichen (0-127) sind der klassische ASCII-Zeichensatz - Buchstaben, Zahlen und Sonderzeichen. Alles darüber hinaus ist "erweitertes Unicode" für Umlaute, Sonderzeichen anderer Sprachen und Emojis.

HTML für das Tool

Falls du Encoder und Decoder auf deiner eigenen Seite einbauen möchtest, hier ist das vollständige HTML und JavaScript:

HTML-Struktur

HTML Kopieren

<!-- Entity Encoder -->
<div class="code-block entity-encoder">
    <div class="code-header">
        <span class="code-lang">Entity Encoder</span>
        <div class="code-actions">
            <button class="code-copy encode-btn">Encode</button>
            <button class="code-copy copy-btn">Kopieren</button>
        </div>
    </div>
    <textarea class="code-input" placeholder="Text eingeben..."></textarea>
    <textarea class="code-output" placeholder="Encoded..." readonly></textarea>
</div>

<!-- Entity Decoder -->
<div class="code-block entity-decoder">
    <div class="code-header">
        <span class="code-lang">Entity Decoder</span>
        <div class="code-actions">
            <button class="code-copy decode-btn">Decode</button>
            <button class="code-copy copy-btn">Kopieren</button>
        </div>
    </div>
    <textarea class="code-input" placeholder="Entity-Code einfügen..."></textarea>
    <textarea class="code-output" placeholder="Decoded..." readonly></textarea>
</div>

JavaScript (komplett)

JavaScript Kopieren

// Entity Encoder
document.querySelectorAll('.entity-encoder').forEach(block => {
    const input = block.querySelector('.code-input');
    const output = block.querySelector('.code-output');
    const encodeBtn = block.querySelector('.encode-btn');
    const copyBtn = block.querySelector('.copy-btn');

    function encodeText(str) {
        let encoded = '';
        for (let i = 0; i < str.length; i++) {
            encoded += '&#' + str.charCodeAt(i) + ';';
        }
        return encoded;
    }

    encodeBtn.addEventListener('click', () => {
        output.value = encodeText(input.value);
        output.focus();
        output.select();
    });

    copyBtn.addEventListener('click', () => {
        output.select();
        document.execCommand('copy');
    });
});

// Entity Decoder
document.querySelectorAll('.entity-decoder').forEach(block => {
    const input = block.querySelector('.code-input');
    const output = block.querySelector('.code-output');
    const decodeBtn = block.querySelector('.decode-btn');
    const copyBtn = block.querySelector('.copy-btn');

    function decodeEntities(str) {
        return str.replace(/&#(\d+);/g, (match, dec) => {
            return String.fromCharCode(dec);
        });
    }

    decodeBtn.addEventListener('click', () => {
        output.value = decodeEntities(input.value);
        output.focus();
        output.select();
    });

    copyBtn.addEventListener('click', () => {
        output.select();
        document.execCommand('copy');
    });
});