JavaScript/Tutorials/Grundlagen von Strings und Arrays

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

ToDo (weitere ToDos)

Dieses Tutorial muss erstellt 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.
--Matthias Scharwies (Diskussion) 08:04, 20. Apr. 2017 (CEST)

Inhaltsverzeichnis

[Bearbeiten] Strings - Zeichenketten

Ein einfacher String wird mit einem so genannten String-Literal erzeugt:

Beispiel: Stringliterale
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:

Beispiel: mehrzeilige Zeichenketten
let todo = 'Aufgaben \
* aufräumen \
* Wiki-Artikel fertigstellen \
* Feierabendbier';
Beachten Sie, dass sich hinter den backslashes keine Leerzeichen befinden dürfen, da Sie sonst die Leerzeichen und nicht die Zeilenumbrüche escapen würden.

[Bearbeiten] 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:

Beispiel: Länge von Zeichenketten ermitteln - 1 ansehen …
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';
 
});
Das Skript ermittelt mit string.length die Länge der Zeichenkette und fügt diesen Wert zusammen mit anderen Zeichenketten zu einer langen Zeichenkette zusammen. Diese wird der Variablen 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
  • /w alle 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.
Beispiel: Länge von Zeichenketten ermitteln - 2 ansehen …
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';
 
});
Das Skript durchsucht mit string.replace die Zeichenkette nach dem Suchmuster [^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.

[Bearbeiten] Wörter zählen

Nach dem selben Prinzip funktioniert das Zählen der Anzahl von Wörtern. Die Zeichenkette wird nach Leerzeichen ' ' durchsucht.

Beispiel: Strings 3 - Wörter zählen ansehen …
  document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('button').addEventListener('click', countWords);	
 
  function countWords() {
    var text = document.querySelector('textarea').innerHTML;
    var woerter = text.split(' ');
    var ergebnis = 'Das ist ein Text mit ' + woerter.length + ' Wörtern.';
 
    document.querySelector('output').innerHTML += ergebnis + ' \n';
  }
 
});
Das Beispiel enthält ein textarea-Element und einen Button.

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.

Der Rückgabewert der Methode, die extrahierte Zeichenkette, wird im Beispiel in der Variablen woerter gespeichert. Dies ist keine gewöhnliche Variable, sondern ein Array. Über woerter.length kann die Anzahl ermittelt und ausgegeben werden.

[Bearbeiten] Vorkommen ersetzen

Mit Regulären Ausdrücken können Sie nun jedes beliebige Teil einer Zeichenkette suchen und ersetzen.

[Bearbeiten] 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:

Beispiel: Dezimalzahlen umwandeln ansehen …
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';
  }
 
});
Aus einem Array mit Dezimalzahlen werden in einer Schleife allen Elemente mit replace(',','.'); das Komma durch einen Punkt ersetzt und der Variable 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

[Bearbeiten] 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.

Beispiel: Strings 5 - Vokale ändern ansehen …
  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;
	 }
  }
});
Das Beispiel enthält ein textarea-Element und einen Button.

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.

Anschließend wird die Zählvariable 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.

[Bearbeiten] Arrays

Schon im letzten Beispiel wurde ein Array verwendet. Ein Javascript Array ist eine Datenstruktur, die mehrere Werte unter einem gemeinsamen Namen speichert.

Beispiel
var vowels = ['a', 'e', 'i', 'o', 'u'];

In der Literal-Schreibweise wird es mit eckigen Klammern und durch Komma getrennten Daten notiert.

[Bearbeiten] Spruch des Tages

ToDo (weitere ToDos)

  • array mit 10 Texten nacheinander / zufällig

[Bearbeiten] Blacklist für Beleidigungen

Text durchsuchen - auf blacklist stehende Wörter ersetzen

[Bearbeiten] Strings vergleichen und sortieren

alert( 'Österreich'.localeCompare('Oldenburg') ); // -1

http://javascript.info/tutorial/string

[Bearbeiten] Weblinks

[Bearbeiten] Occurence of each


[Bearbeiten] evtl. Bsp

https://forum.selfhtml.org/self/2016/dec/29/pruefung-der-anzahl-eines-wertes-in-einem-array/1683268#m1683268

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML