Javascript String trim, padStart, padEnd

Leerzeichen sind nicht leer

trim () wird z.B. gebraucht, wenn Elemente eines Strings in ein Array umgewandelt werden, und auch, um die Daten aus Eingabefeldern von Formularen zu »normalisieren«.

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

Vor string.trim() wurde ein regulärer Ausdruck eingesetzt, um Leerzeichen am Anfang/Ende eines Strings zu entfernen.

"   text   ".replace(/^\s+|\s+$/g, "");

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 Ende  ---┐
                                    │
      Weißraum am Anfang ---┐       │
                            ▼       ▼
       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