String.prototype.anchor() — Methode · JavaScript-Referenz

Signatur

String.prototype.anchor(name)

Beschreibung

Die Methode anchor() gehört zu den sogenannten HTML-Wrapper-Methoden von String. Sie liefert einen neuen String, in dem der ursprüngliche Text von einem <a>-Element mit dem Attribut name umgeben ist, zum Beispiel <a name="kapitel1">Kapitel 1</a>. Früher setzte man so Sprungmarken, die über #kapitel1 in der URL erreichbar waren.

Die Methode erzeugt nur einen String und kein DOM-Element. Das Ergebnis wird erst sichtbar, wenn man es zum Beispiel über innerHTML in das Dokument schreibt. Aus dem Parameter name werden doppelte Anführungszeichen (") durch " ersetzt. Der eingeschlossene Text wird dagegen nicht maskiert.

Die Methode ist im Anhang B der ECMAScript-Spezifikation beschrieben und gilt als veraltet. Außerdem ist das Attribut name an <a> in HTML5 überholt. Heute setzt man Sprungmarken mit dem Attribut id an einem beliebigen Element. Mit document.createElement() oder Template-Literals erzeugt man solches HTML sicherer. In neuem Code sollte man anchor() deshalb nicht mehr verwenden. Nötig ist sie höchstens noch, um alten Code zu verstehen oder zu pflegen.

Parameter

Name	Typ	Default	Beschreibung
$name Pflicht	string		Wert für das Attribut `name` des erzeugten `<a>`-Elements. Andere Werte als Strings werden in einen String umgewandelt. Fehlt das Argument, entsteht `name="undefined"`. Doppelte Anführungszeichen werden durch `"` ersetzt.

Rückgabewert

Typ

string

Beschreibung

Ein neuer String der Form <a name="name">str</a>. Der ursprüngliche String bleibt unverändert.

Beispiele

Einfacher Aufruf

const titel = "Einleitung";
const html = titel.anchor("einleitung");
console.log(html);

<a name="einleitung">Einleitung</a>

Anführungszeichen im Namen werden maskiert

const html = "Text".anchor('a"b');
console.log(html);

// Ohne Argument
console.log("Text".anchor());

Moderne Alternative: Sprungmarke per id im DOM

// Veraltet:
// document.body.innerHTML += "Kapitel 1".anchor("kapitel1");

// Empfohlen: Element erzeugen und id setzen
const ueberschrift = document.createElement("h2");
ueberschrift.id = "kapitel1";
ueberschrift.textContent = "Kapitel 1"; // Text wird sicher maskiert
document.body.append(ueberschrift);

// Link auf die Sprungmarke
const link = document.createElement("a");
link.href = "#kapitel1";
link.textContent = "Zu Kapitel 1";
document.body.prepend(link);
console.log(ueberschrift.outerHTML);

<h2 id="kapitel1">Kapitel 1</h2>

// Wichtig · Fallstricke

Veraltet: anchor() steht nur aus Gründen der Abwärtskompatibilität in Anhang B der Spezifikation. Die Methode wird zwar in allen Browsern und in Node.js unterstützt, sollte in neuem Code aber nicht mehr eingesetzt werden.
Überholtes HTML: Das Attribut name an <a> ist in HTML5 obsolet. Für Sprungmarken verwendet man stattdessen id.
XSS-Gefahr: Der eingeschlossene String wird nicht maskiert, im Namen werden nur "-Zeichen ersetzt. Aus "<img src=x onerror=alert(1)>".anchor("x") entsteht ausführbares HTML, sobald man das Ergebnis per innerHTML einfügt. Nutzereingaben daher nie so weitergeben. Sicherer sind textContent und createElement().
Die Methode wirft einen TypeError, wenn sie über call() mit null oder undefined als this aufgerufen wird.
TypeScript kennzeichnet die Methode als @deprecated.

Siehe auch

String.prototype.link() String.prototype.bold() Element.id String.prototype.match() String.prototype.at()