Javascript String trim

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. In jQuery gibt es trim quasi immer schon, bei Vanilla Javascript mussten wir lange warten: Ab JavaScript 1.8.1 / ECMAScript 5.

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);

dot trimLeft () und trimRight ()

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

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