Javascript String trim, padStart, padEnd

Javascript string trim: Blanks, Tabs, Linefeed, Break am Anfang und am Ende

string.trim () entfernt Weißraum wie Leerzeichen, Tabulatoren und Zeilenumbrüche am Anfang bzw. am Ende eines Strings. padStart und padEnd machen das Gegenteil: Sie füllen einen String am Anfang bzw. Ende auf eine gewünschte Zahl von Zeichen auf.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Leerzeichen sind nicht leer

trim () wird z.B. gebraucht, wenn Elemente eines Strings in ein Array umgewandelt werden, und auch für die Daten aus Eingabefeldern von Formularen.

document.getElementById("id").value.trim();

Weißraum oder Leerzeichen bringen vielerlei Überraschungen und Formen mit:

  • " " das nicht brechende Leerzeichen oder non-breaking space,  
  • " " den n-Raum,  , ein kleines Leerzeichen, das z.B. bei Telefonnummern verwendet wird, damit die Lücken nicht so groß sind.
  • den " " m-Raum,  , ein breites Leerzeichen
  • –‌– den Null-Leerraum, ‌ der zwar ein Leerzeichen ist, aber keinen Platz einnimmt.
  • \t, den Tabulator
  • \n, Zeilenumbruch

Sonderzeichen

trim

Einer kommagetrennten Liste mit Orten die Luft ablassen, um sie in ein Array umzuwandeln:

		
Bonn-Brühl, Aachen,  Stuttgart ,
Weddington,Torquai, 
Linsengericht,­Worpswede           


function listArrayTrimmed (elem, index) {
   document.querySelector("#result").innerHTML +=
       "index [" + index + "] " + elem.trim() + "<br>";
}

let elems = document.querySelector("#trimMe").innerHTML.split(',');
elems.forEach (listArrayTrimmed);

trimLeft () und trimRight ()

Weißraum nur am Anfang des Strings entfernen bzw. nur am Ende.

padStart (), padEnd () – Auffüllen am Anfang oder Ende des Strings

padStart () und padEnd () fügen einen weiteren String am Anfang bzw. Ende eines Strings an, um den String zu einer gewünschten Länge aufzufüllen.

Erstes Argument ist die Zahl der gewünschten Zeichen, zweites Argument ein oder mehrere Zeichen fürs Auffüllen.

const strg = ["Wiebke", "Marianne", "Karla-Augusta"];
const strgPadded = [];
const strgEndPadded = [];
let maxL = 0;
strg.forEach ((elem) => {
	if (elem.length > maxL) {
		maxL = elem.length;
	}
});

for (const [idx, item] of strg.entries ()) {
	strgPadded[idx] = item.padStart (maxL, "*!");
	strgEndPadded[idx] = item.padEnd (maxL, " ")
}

strgPadded – ["*!*!*!*Wiebke", "*!*!*Marianne", "Karla-Augusta"] (3)
strgEndPadded – ["Wiebke       ", "Marianne     ", "Karla-Augusta"] (3)

trim() für die ganz alten Browser

Seit IE9 haben alle modernen Browser die String-Methode trim(), um Leerzeichen vor und nach einem String zu entfernen. Bis dahin wurde das String-Objekt manuell um die Methode trim() erweitert.

if (!String.prototype.trim) {
   String.prototype.trim = function() {
      Weißraum am Anfang ---+       +--- Weißraum am Ende
                            |       |
       return this.replace(/^\s+|\s+$/g, '');
   }
}

Objekte mit Prototype erweitern

Die wilde Zeichenfolge ^\s+|\s+$ im replace ist ein regulärer Ausdruck :

  • ^ steht für den Anfang eines Strings, $ für das Ende,
  • s für Leerzeichen jeder Form (Blank, Tab, Zeilenumbruch),
  • + für beliebig viele