jQuery / Methode / jQuery.trim() - Leerraum an Zeichenkettenrändern entfernen

jQuery.trim() entfernte Leerraum am Anfang und Ende einer Zeichenkette, während innere Leerzeichen blieben. Seit jQuery 3.5 veraltet und in 4.0 entfernt, wird es in neuem Code durch text.trim() ersetzt. Prüfen Sie bei der Migration auch null, undefined und Zahlen als Eingaben.

Version und Entfernungsbereich prüfen

Die jQuery.trim()-Dokumentation und der jQuery-4-Migrationsleitfaden nennen die Entfernung. $.trim is not a function unter jQuery 4 kann daraus folgen. Es war eine globale Hilfsfunktion $.trim(text) beziehungsweise jQuery.trim(text), keine Methode ausgewählter Elemente.

String.prototype.trim() liefert eine neue Zeichenkette ohne äußeren Leerraum und Zeilenabschlusszeichen. Es fasst innere Leerzeichen nicht zusammen und entfernt nicht alle Abstände. Tabs, Zeilenumbrüche und geschützte Leerzeichen (NBSP) zählen dazu, aber nicht jedes unsichtbare Zeichen ist Leerraum.

Vollständiges Beispiel für äußere und innere Abstände

Speichern Sie alles in UTF-8 als trim-demo.html und öffnen Sie es im Browser. Die Vergleichsoberfläche lädt die offizielle jQuery-Datei 4.0.0 vom Content Delivery Network (CDN), benötigt also Internet, aber keine Installation. Die Zeichenkettenmethode selbst braucht jQuery nicht.

Das Beispiel nutzt natives trim und vergleicht nur bei vorhandener $.trim-Funktion. Es wurde ohne jQuery Migrate mit 3.7.1 und 4.0.0 ausgeführt: Die Funktion existiert in 3.7.1, fehlt in 4.0.0. Leerraum, Unicode, Schreiben ins Feld und die Umwandlungen unten wurden ebenfalls geprüft.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Migrate from jQuery trim</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button, select, textarea { font: inherit; margin: 4px; max-width: 100%; }
    textarea { display: block; width: 90%; min-height: 90px; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Trim only the edges of a string</h1>
  <label for="sample">Sample:</label>
  <select id="sample"><option value="spaces">Edge and internal spaces</option><option value="lines">Tabs and line breaks</option><option value="nbsp">Non-breaking spaces</option><option value="zero">Zero-width spaces</option><option value="empty">Empty string</option></select>
  <label for="value">Value:</label>
  <textarea id="value"></textarea>
  <button type="button" id="preview">Preview trim</button>
  <button type="button" id="apply">Apply to field</button>
  <button type="button" id="reset">Reset</button>
  <pre id="result" aria-live="polite"></pre>
  <pre id="legacy"></pre>
  <script>
    $(function () {
      const samples = {
        spaces: "  Alpha  Beta  ",
        lines: "\t\nAlpha  Beta\n ",
        nbsp: "\u00a0Alpha\u00a0",
        zero: "\u200bAlpha\u200b",
        empty: ""
      };
      function preview() {
        const before = $("#value").val();
        const after = before.trim();
        $("#result").text(`before=${JSON.stringify(before)}\nafter=${JSON.stringify(after)}\nlength=${before.length} -> ${after.length}`);
        $("#legacy").text(typeof $.trim === "function"
          ? `Legacy result: ${JSON.stringify($.trim(before))}`
          : "jQuery.trim is unavailable; native trim is used");
      }
      function loadSample() { $("#value").val(samples[$("#sample").val()]); preview(); }
      $("#sample").on("change", loadSample);
      $("#preview").on("click", preview);
      $("#apply").on("click", function () { $("#value").val($("#value").val().trim()); preview(); });
      $("#reset").on("click", function () { $("#sample").val("spaces"); loadSample(); });
      loadSample();
    });
  </script>
</body>
</html>

Anfangs verschwinden nur vier äußere Leerzeichen; zwei innere bleiben:

before="  Alpha  Beta  "
after="Alpha  Beta"
length=15 -> 11

1. Preview trim zeigt nur das Ergebnis. Die äußeren Leerzeichen im Feld bleiben.
2. Apply to field schreibt ausdrücklich mit .val() zurück und ändert das Feld.
3. Tabs and line breaks entfernt äußere Tabs/Umbrüche, behält zwei Abstände zwischen Alpha und Beta.
4. Non-breaking spaces entfernt U+00A0, Länge 7 wird 5.
5. Zero-width spaces behält U+200B und Länge 7, da es nicht getrimmt wird.
6. Empty string liefert leeren Text. Reset stellt Anfangsbeispiel und Feld wieder her.

Regeln für null, undefined und 0 festlegen

Früheres $.trim() konnte null/undefined in leeren Text und 0/false in "0"/"false" umwandeln. Ein direkter Wechsel zu null.trim(), undefined.trim() oder .trim() einer Zahl ist nicht gleichwertig. Verlangt der Vertrag Zeichenketten, prüfen Sie den Typ und behandeln falsche Eingaben zuerst.

Sollen null/undefined leer werden und andere primitive Werte als Zeichenketten bleiben, wandeln Sie ausdrücklich wie unten um. Führen Sie den vollständigen Teilcode in der Entwicklerkonsole aus. Er garantiert keine allgemeine Kompatibilität für beliebige Objekte.

function trimNullable(value) {
  return String(value ?? "").trim();
}
console.log(`null=${JSON.stringify(trimNullable(null))}`);
console.log(`undefined=${JSON.stringify(trimNullable(undefined))}`);
console.log(`zero=${JSON.stringify(trimNullable(0))}`);
console.log(`false=${JSON.stringify(trimNullable(false))}`);
console.log(`NBSP=${JSON.stringify("\u00a0A\u00a0".trim())}`);
console.log(`zero-width length=${"\u200bA\u200b".trim().length}`);

null=""
undefined=""
zero="0"
false="false"
NBSP="A"
zero-width length=3

?? nutzt den leeren Standard nur bei null/undefined und bewahrt 0 und false. value || "" kann auch diese verwerfen. String(null).trim() ergibt hingegen "null", nicht leeren Text. Müssen fehlend und leer verschieden bleiben, validieren Sie vorher.

Leerraumbereinigung von Validierung trennen

Nur aus Leerraum bestehender Text wird leer. Das kann für Suchbegriffe oder normale Namensfelder passen, aber nicht pauschal für Werte mit bedeutungsvollen Randabständen. Definieren Sie zuerst die Feldregeln, bevor Eingaben verändert werden.

trim entfernt keine HTML-Tags, ändert keine Großschreibung, normalisiert keine inneren Abstände und ist keine Sicherheitsprüfung. Das Beispiel zeigt HTML-artige Eingaben mit .text() wörtlich. Prüfen Sie bei verbleibenden unsichtbaren Zeichen Codepunkte und notwendige Normalisierung.

Prüfen Sie bei weiteren Fehlern tatsächliche jQuery-Version, verbleibende $.trim-Aufrufe, betroffene Plugins und Eingabetypen. Testen Sie nach Ersatz null, undefined, 0, leere und reine Leerraumzeichenketten sowie echte Eingaben erneut. Aufrufe und Eingaberegeln nach Migrationsleitfaden anzupassen ist wartbarer als ein Downgrade.