Wörter zählen
Zählt auf Knopfdruck, aus wie vielen Wörtern ein eingegebener Text besteht.
Dieses Script zählt die Wörter in einem Eingabefeld. Ihr tippt oder kopiert euren Text in den Kasten, klickt auf „zählen", und darunter erscheint das Ergebnis. Mehr macht es nicht — und genau das ist sein Reiz: Es ist eines der kürzesten sinnvollen Scripts überhaupt und deshalb ein guter Einstieg, wenn ihr verstehen wollt, wie ein Formularfeld ausgelesen und ein Ergebnis ausgegeben wird.
Nützlich ist so ein Zähler überall dort, wo eine Textlänge vorgegeben ist: bei Schulaufsätzen und Hausarbeiten, bei Bewerbungen, bei Kleinanzeigen mit Wortbegrenzung oder wenn ihr eine Seitenbeschreibung für Suchmaschinen im Blick behalten wollt. Praktisch ist er auch als Selbstkontrolle beim Schreiben: 500 Wörter fühlen sich beim Tippen ganz anders an, als sie am Ende aussehen.
Wie ein Wort überhaupt abgegrenzt wird, ist dabei gar nicht so selbstverständlich. Dieses Script macht es so, wie man es beim Überfliegen eines Textes auch tun würde: Alles, was durch Leerzeichen, Tabulatoren oder Zeilenumbrüche getrennt ist, gilt als ein Wort. Ein Bindestrichwort wie „Fußgängerzone-Nord" zählt also als eines, eine Zahl wie „1.500" ebenfalls, und ein einzeln stehendes Satzzeichen zählt mit. Wer es genauer braucht, kommt um eine eigene Definition nicht herum — professionelle Textprogramme rechnen deshalb durchaus unterschiedlich.
Wenn ihr statt der Wörter die Zeichen zählen wollt, nehmt unseren Buchstabenzähler — der zählt schon während des Tippens mit und berücksichtigt auch Leer- und Sonderzeichen. Und wer sein eigenes Zählvermögen prüfen mag, findet in der Abteilung Experimentelles den kleinen Zähltest Anzahl der Wörter zählen.
Als Wort gilt alles, was durch Leerzeichen, Tabulatoren oder Zeilenumbrüche getrennt ist.
So funktioniert das Script
Das Script ist mit einer knappen Handvoll Zeilen ausgesprochen kurz. Es liest beim Klick den Inhalt des Textfeldes aus, zerlegt ihn in einzelne Wörter, zählt sie und schreibt einen Satz in die Ausgabefläche. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablennamen nicht mit anderen Scripts auf der Seite kollidieren.
const feld = document.getElementById("wzl-text");
const ausgabe = document.getElementById("wzl-ausgabe");Zuerst holt sich das Script die beiden Elemente, mit denen es arbeitet: das Textfeld und die Fläche für das Ergebnis. getElementById sucht ein Element anhand seiner id — deshalb tragen beide im HTML eine solche Kennung. Weil die Suche nur einmal beim Start stattfindet und nicht bei jedem Klick erneut, ist das Script auch bei häufigem Klicken sparsam.
const data = feld.value.trim();Bei einem Eingabefeld steht der eingetippte Inhalt in value. trim() schneidet Leerzeichen und Zeilenumbrüche am Anfang und Ende weg. Das klingt nach einer Kleinigkeit, ist aber der halbe Unterschied zu einem korrekten Ergebnis: Ohne diesen Schritt würde ein versehentliches Leerzeichen am Textende als zusätzliches Wort mitgezählt.
const woerter = data === "" ? [] : data.split(/\s+/);
const anzahl = woerter.length;split zerschneidet einen Text an einer bestimmten Stelle und liefert eine Liste der Teile zurück. Das Muster /\s+/ dazwischen ist ein regulärer Ausdruck — eine Kurzschrift für Suchmuster in Texten. \s steht für „irgendein Leerraum" (Leerzeichen, Tabulator, Zeilenumbruch), das + für „einer oder mehrere davon". Damit werden auch doppelte Leerzeichen richtig behandelt. Das Original zerschnitt mit split(" ") nur an einfachen Leerzeichen und zählte deshalb jedes zusätzliche Leerzeichen als eigenes Wort mit.
Der vordere Teil der Zeile fängt den Sonderfall ab: Ist das Feld leer, wird gar nicht erst zerschnitten, sondern eine leere Liste genommen. Sonst käme als Ergebnis 1 heraus — ein Wort, das aus nichts besteht. length liefert danach schlicht die Anzahl der Einträge in der Liste.
ausgabe.textContent = "Dieser Text enthält " + anzahl +
(anzahl === 1 ? " Wort" : " Wörter");Zum Schluss wird der Satz zusammengesetzt. Das Pluszeichen verbindet Texte miteinander; Zahlen werden dabei automatisch in Text umgewandelt. Das Fragezeichen-Doppelpunkt-Konstrukt ist eine Kurzschreibweise für „wenn … dann … sonst …" und sorgt dafür, dass es „1 Wort", aber „0 Wörter" und „7 Wörter" heißt. textContent setzt den Text sicher als reinen Text — anders als innerHTML, das eingetippte Zeichen wie spitze Klammern als HTML deuten würde.
document.getElementById("wzl-knopf").addEventListener("click", count);Die letzte Zeile verbindet die Funktion mit dem Knopf: addEventListener("click", …) sorgt dafür, dass count() bei jedem Klick läuft. Das Script steht dafür unter dem Markup, damit Textfeld, Knopf und Ausgabefläche bereits existieren, wenn es ausgeführt wird. Das Original hängte den Aufruf noch über ein onclick-Attribut direkt an den Knopf — heute hält man Markup und Verhalten getrennt.
Zum Anpassen: Wenn die Zahl schon beim Tippen mitlaufen soll, hängt ihr dieselbe Funktion zusätzlich an das Textfeld — feld.addEventListener("input", count); genügt dafür. Und wer statt der Wörter die Zeichen zählen möchte, ersetzt die beiden mittleren Zeilen durch const anzahl = feld.value.length;.
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.