Javascript String split – Text zu Array

Text / String in ein Array umwandeln

string.split() ist ein wahrer Methusalem aus dem Jahr 1999, aber immer arbeitet immer noch stabil und zuverlässig sowohl mit Strings als auch mit Regulären Ausdrücken (Regex).

const myArr = str.split(" ");

trennt einen String am Leerzeichen.

const myArr = str.split(/[,.;]/);

trennt bei Komma, Punkt und Semikolon.

Ein optionaler zweiter Parameter bestimmt die Anzahl der Elemente im Ergebnis-Array. Um also die ersten drei Textelemente als Array zu speichern:

const result = document.querySelector("#result");
const simpleString = document.querySelector("#simplestring").textContent;

const felder = simpleString
  .split(",")
  .map(s => s.trim())
  .slice(0, 3);

result.innerHTML = felder
  .map((elem, index) => `index [${index}] ${elem}`)
  .join("<br>");

1. .map() läuft durch jedes Element des Arrays
2. s => s.trim() wird auf jedes Element angewendet, um die Leerzeichen vor / nach den den Eingaben zu entfernen
3. Das Ergebnis ist ein neues Array

Zeichenfolgen in Eingabefeldern in Zahlen umwandeln

Egal, was der Benutzer in ein Eingabefeld eingibt: Für JavaScript ist jede Eingabe ein String. Die Transformation vom String in einen Zahlenwert ist alltägliches Brot rund um Apps.

Das Mini-Formular rechnet RGB-Werte in OKLCH-Werte um. Die drei RGB-Werte müssen zwischen 0 bis 255 liegen und können entweder mit Kommas oder mit Leerzeichen voneinander getrennt werden.

.trim() entfernt wieder überflüssige Leerzeichen am Anfang / Ende des Strings.

Es wird wohl wirklich meist das Komma sein, anhand dessen ein String in ein Array geteilt werden sollen. Wenn der String an verschiedenen Zeichen gesplittet werden soll, kann str.split() mit einem regulären Ausdruck aufgerufen werden. .split(/[,\s]+/) trennt beim Komma oder Leerzeichen mit einem regulären Ausdruck. Der Senkrecht-Strich (Pipe) zwischen den beiden Zeichen ist das ODER der regulären Ausdrücke.

Hier wird der String sowohl beim Komma als auch beim Leerzeichen geteilt.

const parts = input
		.trim()
		.split(/[,\s]+/);   // Komma ODER ein oder mehrere Leerzeichen
                 ▲ ▲
                 │ │
   beim Komma ───┘ │
                   │
    Leerzeichen ───┘

function parseRgb(input) {
	const parts = input
		.trim()
		.split(/[,\s]+/);   // Komma ODER Leerzeichen

	if (parts.length !== 3) return null;

	const numbers = parts.map(Number);

	if (
		numbers.some(n =>
			Number.isNaN(n) ||
			n < 0 ||
			n > 255 ||
			!Number.isInteger(n)
		)
	) { return null; }

	return numbers;
}

URL mit split in Pfad und Dateinamen trennen

window.location.pathname gibt den Pfad zur aktuellen Seite zurück. string.split teilt den Pfadnamen bei jedem / und speichert die einzelnen Segmente in einem Array.

Den letzten Teil des Pfads – z.B. den Dateiname der HTML-Datei – erreicht dann ein einfaches array.pop().

const loc = window.location.pathname;
const path = loc.split("/");
const filename = path.pop();
console.log (filename);

Löcher im Array

Wenn der String beim Leerzeichen gesplittet wird und nicht sichergestellt ist, dass die Ausdrücke immer nur durch genau ein Blank getrennt sind, kann ein Array mit Löchern entstehen.

["Paul"," ","Pauline"," "," "," "," ","Postpaket"]

Auch wieder ein Fall für einen regulären Ausdruck:

   Bei einem oder mehr Blanks
                         +
                         |
let notemp = emp.split(/\s+/);