HTMLAnchorElement.text — Eigenschaft · JavaScript-Referenz

Signatur

HTMLAnchorElement.text

Beschreibung

Die Eigenschaft text des HTMLAnchorElement liefert den gesamten Textinhalt eines Links als Zeichenkette. Sie verhält sich laut HTML-Spezifikation exakt wie Node.textContent: Beim Lesen werden die Texte aller Nachfahren-Knoten verkettet, beim Schreiben werden sämtliche Kindknoten entfernt und durch einen einzigen Textknoten ersetzt.

Typische Einsatzfälle sind das Auslesen der sichtbaren Linkbeschriftung (z. B. für Analytics, Linklisten oder Inhaltsverzeichnisse) und das sichere Ändern der Beschriftung, ohne HTML interpretieren zu lassen. Da der zugewiesene Wert als reiner Text eingefügt wird, ist text – anders als innerHTML – unbedenklich gegenüber XSS.

Zu beachten: Enthält der Link verschachtelte Elemente wie <span>, <img> oder Icons, gehen diese beim Setzen verloren. Außerdem berücksichtigt text kein CSS – auch per display: none versteckter Text und Leerzeichen aus dem Quelltext werden mitgeliefert. Für den tatsächlich gerenderten Text ist innerText die passendere Wahl.

Rückgabewert

Typ

string

Beschreibung

Der verkettete Textinhalt aller Nachfahren-Textknoten des Links. Beim Setzen wird der neue Wert als einziger Textknoten eingefügt.

Beispiele

Linkbeschriftung auslesen

// HTML: <a id="doku" href="/docs">Zur <strong>Dokumentation</strong></a>
const link = document.querySelector('#doku');
console.log(link.text);
console.log(link.text === link.textContent);

Zur Dokumentation true

Beschriftung sicher ändern (kein HTML-Parsing)

const link = document.querySelector('#doku');
const benutzerEingabe = '<img src=x onerror=alert(1)>';

// Wird als reiner Text eingefügt – kein XSS möglich
link.text = benutzerEingabe;
console.log(link.innerHTML);

Linkliste für ein Inhaltsverzeichnis erzeugen

const links = [...document.querySelectorAll('nav a')];
const verzeichnis = links.map((a) => ({
  titel: a.text.trim().replace(/\s+/g, ' '),
  ziel: a.href,
}));
console.table(verzeichnis);

Externe Links kennzeichnen, Icons erhalten

document.querySelectorAll('a[target="_blank"]').forEach((a) => {
  // a.text = ... würde enthaltene Icons löschen – daher Textknoten anhängen
  if (!a.text.endsWith('(extern)')) {
    a.append(' (extern)');
  }
});

// Wichtig · Fallstricke

Kindelemente gehen verloren: Eine Zuweisung an text ersetzt alle Kindknoten – enthaltene <img>-, <svg>- oder <span>-Elemente werden entfernt.
Kein Layout-Bezug: Wie textContent liefert text auch unsichtbaren Text und rohe Leerzeichen/Zeilenumbrüche aus dem Quelltext. Gegebenenfalls mit trim() normalisieren oder innerText verwenden.
Nicht mit href verwechseln: text ist die Beschriftung, nicht das Linkziel.
Sicherheit: Da kein HTML geparst wird, ist text eine sichere Alternative zu innerHTML für Benutzereingaben.
Kompatibilität: In allen modernen Browsern unterstützt. Auch HTMLScriptElement, HTMLOptionElement und HTMLTitleElement besitzen eine gleichnamige Eigenschaft mit ähnlichem Verhalten. Für allgemeinen Code ist textContent die universellere Wahl.

Siehe auch

Node.textContent HTMLElement.innerText Element.innerHTML HTMLAnchorElement.href HTMLAnchorElement HTMLAllCollection.length HTMLOptionElement.index