JavaScript/Tutorials/Grundlagen von Strings und Arrays
Eine der häufigsten Anwendungsmöglichkeiten ist die Verarbeitung von eingegebenem Text. In diesem Tutorial lernen Sie, wie Sie Zeichenketten (engl: Strings) und Felder (Arrays) , in denen mehrere Zeichenketten angeordnet werden können, sortieren und verändern können. Dabei werden auch Reguläre Ausdrücke verwendet.
Inhaltsverzeichnis
Strings - Zeichenketten
Ein einfacher String wird mit einem so genannten String-Literal erzeugt:
let einfach = 'string1';
let doppelt = "string2";
let backticks = `string3`;
Dabei ist es egal, ob Sie doppelte oder einfache Anführungszeichen verwenden, auch backticks (rückwärts geneigte Hochkommas) sind möglich. Mit diesen können Sie auch mehrzeiligen Text und Funktionsausdrücke (template-literale) notieren.
Mit Steuerzeichen können Sie auch mit klassischen Anführungszeichen mehrzeilige Strings notieren:
let todo = 'Aufgaben \
* aufräumen \
* Wiki-Artikel fertigstellen \
* Feierabendbier';
In manchen Situationen ist ein so mehrzeilig notierter String im Quelltext schwer lesbar, insbesondere dann, wenn er in eingerücktem Code steht:
function tuIrgendWas (parameter) {
let todo = "";
if (parameter == "liste") {
todo = 'Aufgaben \
* aufräumen \
* Wiki-Artikel fertigstellen \
* Feierabendbier';
}
return todo;
}
tuIrgendWas("liste");
In solchen Fällen möchte man die einzelnen Zeilen als eigene Strings notieren, um sie dann miteinander zu verketten. Eine Verkettung von Strings notiert man wie eine Addition.
function tuIrgendWas (parameter) {
let todo = "";
if (parameter == "liste") {
todo = "Aufgaben"
+ "\n* aufräumen"
+ "\n* Wiki-Artikel fertigstellen"
+ "\n* Feierabendbier";
}
return todo;
}
tuIrgendWas("liste");
Vielleicht stört das ständige \n am Zeilenanfang auch wieder, daher bietet sich ein Rückgriff auf Arrays an:
function tuIrgendWas (parameter) {
let todo = "";
if (parameter == "liste") {
todo = [
"Aufgaben",
"aufräumen",
"Wiki-Artikel fertigstellen",
"Feierabendbier"
].join("\n* ");
}
return todo;
}
tuIrgendWas("liste");
Zeichen zählen
Interessant wäre es zu wissen, wie viele Buchstaben in einer Zeichenkette enthalten sind. MIt string.length können Sie die Länge einer Zeichenkette ermitteln:
document.addEventListener('DOMContentLoaded', function () {
var string = 'Hallo Welt!';
var ausgabe = 'Die Zeichenkette <em>' + string + '</em> enthält ' + string.length + ' Buchstaben.';
document.querySelector('output').innerHTML += ausgabe + ' \n';
});
ausgabe zugewiesen. Mit querySelector wird das output -Element ermittelt und diesem mit innerHTML ( da wir einige Textauszeichnungselemente verwendet haben) der Ausgabetext hinzugefügt.
Als Ergebnis wird 11 ermittelt, obwohl die beiden Wörter zusammen nur 9 Buchstaben haben. Das Leerzeichen und das Satzzeichen wurden als Zeichen mitgezählt, was ja z. B. bei Eingabefeldern mit einer Maximalgröße von 140 Zeichen sinnvoll ist.
In einem nächsten Schritt wollen wir nun nur die Anzahl der tatsächlichen Buchstaben zählen.
Mögliche Lösungswege wären:
- die Leerzeichen zu entfernen, indem die Zeichenkette mit
string = string.split(' ').join('');an den Leerzeichen getrennt und dann wieder verbunden wird. - eine Liste mit allen Buchstaben zu erstellen und deren Vorkommen zu überprüfen und dann zusammenzuzählen
Hier kommen Reguläre Ausdrücke (RegEx, Regular Expressions) ins Spiel. Sie bieten Suchmuster, mit denen in Zeichenketten nach Entsprechungen gesucht werden kann.
In Suchmustern können Sie nach einzelnen Zeichen oder auch Zeichenklassen suchen:
-
[a-zA-Z]fasst alle Buchstaben zusammen -
/walle alphanumerischen Zeichen (Diese enthalten aber auch den Unterstrich!)
- das Zirkumflex-Zeichen hinter der linken eckigen Klammer erzeugt eine negierte Zeichenklasse. Damit findet man jedes Zeichen, das NICHT in den angegebenen Zeichen oder Zeichenfolgen enthalten ist.
[^a-z]findet zum Beispiel jedes Zeichen, welches kein ASCII-Kleinbuchstabe ist.
document.addEventListener('DOMContentLoaded', function () {
var string = 'Hallo Welt!';
var temp = string.replace(/[^a-zA-Z]+/g,'');
var ausgabe = 'Die Zeichenkette <em>' + string + '</em> enthält ' + temp.length + ' Buchstaben.';
document.querySelector('output').innerHTML += ausgabe + ' \n';
});
[^a-zA-Z]. Dies umfasst alle Zeichen, die nicht a-z oder A-Z umfassen. Sie werden durch einen leeren String '' ersetzt.Die so erzeugte Zeichenkette wird der Variablen
temp zugewiesen, deren Länge dann ermittelt und ausgegeben wird.Wörter zählen
Nach dem selben Prinzip funktioniert das Zählen der Anzahl von Wörtern. Die Zeichenkette wird nach Leerzeichen ' ' durchsucht.
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('button').addEventListener('click', countWords);
function countWords() {
var text = document.querySelector('textarea').value;
var woerter = text.split(' ');
var ergebnis = 'Das ist ein Text mit ' + woerter.length + ' Wörtern.';
document.querySelector('output').innerHTML += ergebnis + ' \n';
}
});
Mit addEventListener wird dem Button eine Klickfunktionaliät zugewiesen, die bei einem Klick die Funktion countWords() aufruft.
Diese Funktion durchsucht mit string.split() die Zeichenkette nach Leerzeichen ' ' und erzeugt bei jedem Leerzeichen im Satz eine neue Teilzeichenkette.
woerter gespeichert. Dies ist keine gewöhnliche Variable, sondern ein Array. Über woerter.length kann die Anzahl ermittelt und ausgegeben werden.Vorkommen ersetzen
Mit Regulären Ausdrücken können Sie nun jedes beliebige Teil einer Zeichenkette suchen und ersetzen.
Dezimalzahlen mit Punkt
IN HTML5 ist es möglich, Eingabefelder zu verwenden, die numerische Eingaben gleich auf ihre Gültigkeit überprüfen. Für ältere Browser, die input type="number" nicht kennen, müssen Eingaben erst validiert werden. Ein weiteres Problem ist, dass Nutzer nicht-ganze Dezimalzahlen mit Komma eingeben, JavaScript aber die englische Notation mit trennendem Punkt verwendet.
Dieses Skript wandelt das Komma von Dezimalzahlen in einen Punkt um:
document.addEventListener('DOMContentLoaded', function () {
var zahlen = ['3,14159', '1,41421', '2,71828'];
for (var i = 0; i < zahlen.length; ++i) {
var ausgabe = zahlen[i].replace(',','.');
document.querySelector('output').innerText += ausgabe + ' \n';
}
});
ausgabe zugewiesen. Anschließend wird mit querySelector das output-Element ermittelt und dessen Inhalt durch die in ausgabe enthaltene Zahl ergänzt.
Siehe auch Self-Forum: Vorkommen eines Strings entfernen vom 17. April 2017
Drei Chinesen mit dem Kontrabass
In dem Kinderlied „Drei Chinesen mit dem Kontrabass …“ werden alle Vokale, Umlaute und Diphtonge (wie ei, eu, … ) durch jeweils einen Vokal ersetzt.
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('button').addEventListener('click', changeVowels);
var durchlauf = 0;
function changeVowels() {
var vowels = ['a', 'e', 'i', 'o', 'u', 'ä', 'ö', 'ü'];
var text = document.querySelector('textarea').innerHTML;
var ergebnis = text.replace(/[aeiouäöü]/ig, vowels[durchlauf]);
document.querySelector('textarea').value = ergebnis;
if (durchlauf < (vowels.length - 1)) {
durchlauf ++;
}
else {
durchlauf = 0;
}
}
});
Mit addEventListener wird dem Button eine Klickfunktionaliät zugewiesen, die bei einem Klick die Funktion changeVowels() aufruft. Eine Zählvariable durchlauf hat anfangs den Wert 0.
Die Funktion enthält einen Array vowels mit acht Zeichen, den Vokalen und Umlauten. Mit der Methode string.replace wird die aus der textarea entnommene Zeichenkette text mit dem regulären Ausdruck /[aeiouäöü]/ig durchsucht und alle Fundstellen durch vowels[durchlauf] ersetzt.
Die Ausgabe erfolgt entgegen den oberen Beispielen wieder im Textfeld, das mit querySelector gefunden wird und über dessen value-Eigenschaft der geänderte Text hineinkopiert wird.
durchlauf um eins erhöht, so lange sie nicht größer als die Anzahl der im Array vowels vorhandenen Werte ist. Ansonsten wird die Zählvariable wieder auf Null gesetzt.Arrays
Schon im letzten Beispiel wurde ein Array verwendet. Ein Javascript Array ist eine Datenstruktur, die mehrere Werte unter einem gemeinsamen Namen speichert.
var vowels = ['a', 'e', 'i', 'o', 'u'];
In der Literal-Schreibweise wird es mit eckigen Klammern und durch Komma getrennten Daten notiert.
Spruch des Tages
Manchmal möchte man einen zufällig ausgewählten Wert aus einer Liste haben. Dazu benötigt man eine Zufallszahl und eine Liste (Array).
document.querySelector('output').textContent = getMOTD();
function getMOTD () {
let MOTD = [
'Wer A sagt, muss auch B sagen!',
'Morgenstund ist aller Laster Anfang.',
'Herr gib mir Geduld, aber sofort!',
'In der Ruhe liegt die Kraft.'
],
r = Math.floor(
Math.random() * MOTD.length
);
return MOTD[r];
}
getMOTD ("get" ist Englisch und bedeutet "erhalten", MOTD steht für das Englische "message of the day" was "Nachricht des Tages" bedeutet) definiert zunächst ein Array MOTD mit den möglichen Sprüchen und dann eine Zufallszahl r.
Diese Zufallszahl soll eines der Elemente des Arrays auswählen, daher muss ihr Wertebereich von 0-3 gehen, denn das erste Array-Element hat die Nummer 0 (das vierte logischerweise die Nummer 3). Um den Code später mit neuen Sprüchen einfach erweitern zu können, wurde der Höchstwert der Zufallszahl nicht durch die Zahl 4 festgelegt (Math.random liefert einen Wert kleiner 1, sodass das Produkt immer kleiner 4 sein wird und durch die Abrundung mit Math.floor höchstens 3 werden kann), sondern mit der Eigenschaft Array.length (hier ebenfalls 4) dynamisch ermittelt.
Mit der SchreibweiseMOTD[r] wird dasjenige Element aus MOTD ausgewählt, welches die Nummer hat, die in der Zufallszahl r steht.Blacklist für Beleidigungen
Gerade bei Kommentarfeldern ist es nötig, den Text auf anstößige Wörter zu durchsuchen und diese zu löschen oder zu ersetzen. Eine solche Liste von „verbotenen“ Wörtern nennt man blacklist.
Wort suchen und markieren
Im ersten Beispiel soll dem Besucher der Webseite die Möglichkeit gegeben werden, dass indizierte Wort vor dem Absenden zu ändern. Deshalb wird das Eingabefeld vor dem Absenden auf einen Suchbegriff durchsucht und dieser markiert:
document.getElementById('button').addEventListener('click', function () {
document.querySelector('output').textContent = highlight(inputText,searchTerm);
});
var inputText = document.querySelector('textarea').innerHTML,
outputText,
searchTerm = 'Polizei';
function highlight(inputText,searchTerm) {
var index = inputText.indexOf(searchTerm);
if (index >= 0) {
inputText = inputText.substring(0,index) + "<mark>" + inputText.substring(index,index+searchTerm.length) + "</mark>" + inputText.substring(index + searchTerm.length);
}
document.querySelector('#output').innerHTML = inputText;
}
highlight() hat zwei Parameter:
- der Eingabetext
inputText - den Suchbegriff
searchTerm
Nun wird mit String.indexOf der Text nach dem Wort durchsucht. Der Text ist ja eine lange Zeichenkette. An der Stelle, an der der Suchbegriff beginnt, wird die Zeichenkette mit inputText.substring(0,index) „aufgeschnitten“ und ein mark-Tag eingefügt. Die weitere Teilzeichenkette ist so lang wie der Suchbegriff (inputText.substring(index,index+searchTerm.length)). Danach wird das schließende Tag des mark-Elements eingefügt und der Rest des Texts wieder angehängt.
Dieser Text wird mit document.querySelector('#output').innerHTML = inputText; wieder ausgegeben. Hier gibt es gegenüber den oberen Beispielen zwei Besonderheiten:
- Um das HTML-Markup einfügen zu können, wird innerHTML anstelle von textContent verwendet.
- Da der Ausgabetext Auszeichnungselemente enthält, wird anstelle des output-Elements, in dem nur phrasing content erlaubt ist, ein div mit der id
outputverwendet.
mehrfache Vorkommen und mehrere Suchbegriffe
Dieses Script muss nun so erweitert werden, dass nach einer Liste von Wörtern durchsucht wird und auch mehrfache Vorkommen eines Worts erfasst werden.
ToDo (weitere ToDos)
Strings vergleichen und sortieren
alert( 'Österreich'.localeCompare('Oldenburg') ); // -1
http://javascript.info/tutorial/string
Weblinks
Occurence of each
evtl. Bsp
ToDo (weitere ToDos)
Dieses Tutorial muss fertig gestellt werden.
- Ideen und Anregungen gesucht!
- Codeschnipsel, Beispielprogramme und einzelne Abschnitte sind jederzeit willkommen.
- praxisnahes Beispiel für Suchen eines Substrings mit indexOf gesucht
- Die vorgeschlagene Struktur kann jederzeit nach Belieben verändert werden.
join-Methode in eine einzige Zeichenkette zusammengeführt. Als "Kleber" zwischen den Teilstücken wird die imjoin-Aufruf mitgelieferte Zeichenkette"\n* "verwendet, welche aus einen Zeilenumbruch gefolgt von einem Asterisk (Sternchen) und einem Leerzeichen besteht. Damit wird eine identische Zeichenkette wie in den vorherigen Beispielen erzeugt.