Start · Sprachen · JavaScript · Referenz · String.prototype.blink()

String.prototype.blink()

Methode

Gibt einen neuen String zurück, der den ursprünglichen Text in ein <code>&lt;blink&gt;</code>-Element einbettet. Veraltet, heutige Browser lassen den Text nicht mehr blinken.

seit JavaScript ES2015 (Annex B, veraltet) deprecated seit ja Kategorie: method-property

Signatur

String.prototype.blink()

Beschreibung

blink() gehört zu den sogenannten HTML-Wrapper-Methoden von String. Die Methode baut lediglich eine Zeichenkette zusammen: "Text".blink() ergibt "<blink>Text</blink>". Das DOM wird nicht verändert, es findet auch kein Escaping statt.

Das Element <blink> war nie Teil eines HTML-Standards. Netscape hat es eingeführt, und alte Browser ließen den Text damit blinken. In allen aktuellen Browsern hat das Element keine Wirkung: Es wird als unbekanntes Element (HTMLUnknownElement) behandelt und der Text erscheint ganz normal.

Die Methode ist nur in Annex B der ECMAScript-Spezifikation festgelegt, also bei den Altlasten, die aus Gründen der Web-Kompatibilität bestehen bleiben. Neuer Code sollte sie nicht verwenden. Einen Blink-Effekt erzeugt man heute mit einer CSS-Animation, und Elemente legt man sicher mit document.createElement() an.

Rückgabewert

Typ
string
Beschreibung
Ein neuer String der Form <blink>str</blink>. Dabei ist str der ursprüngliche String, der unverändert und ohne Escaping übernommen wird.

Beispiele

Einfacher Aufruf

const hinweis = 'Neu!';
console.log(hinweis.blink());
<blink>Neu!</blink>

Kein Escaping: gefährlich bei Benutzereingaben

const eingabe = '<img src=x onerror="alert(1)">';
// blink() übernimmt die Eingabe ungeprüft – XSS-Risiko bei innerHTML!
console.log(eingabe.blink());
<blink><img src=x onerror="alert(1)"></blink>

Moderne Alternative: DOM-API und CSS-Animation

// CSS einmalig einfügen
const style = document.createElement('style');
style.textContent = `
  @keyframes blinken { 50% { opacity: 0; } }
  .blinkt { animation: blinken 1s step-start infinite; }
  @media (prefers-reduced-motion: reduce) { .blinkt { animation: none; } }
`;
document.head.append(style);

const span = document.createElement('span');
span.className = 'blinkt';
span.textContent = 'Neu!'; // textContent escapt automatisch
document.body.append(span);
console.log(span.outerHTML);
<span class="blinkt">Neu!</span>

// Wichtig · Fallstricke

  • Veraltet: Die Methode steht nur in Annex B der Spezifikation. Die Browser unterstützen sie zwar noch überall, das Element <blink> zeigt aber seit Jahren keinen Effekt mehr (Firefox hat das Blinken ab Version 23 entfernt, Chrome, Safari und Edge haben es nie unterstützt).
  • Sicherheit: Der Text wird nicht escapt. Wer das Ergebnis mit Benutzereingaben per innerHTML einfügt, öffnet XSS-Lücken. Stattdessen textContent oder createElement() verwenden.
  • Barrierefreiheit: Blinkende Inhalte können Menschen mit Epilepsie schaden und verstoßen gegen WCAG 2.2.2. Wer trotzdem animiert, sollte prefers-reduced-motion beachten.
  • Wird die Methode auf null oder undefined aufgerufen (etwa über call), wirft sie einen TypeError.