jQuery / Méthode / jQuery.trim() - Retirer les espaces aux extrémités

jQuery.trim() retirait les espaces au début et à la fin d'une chaîne, en conservant ceux du milieu. Obsolète depuis jQuery 3.5 et supprimée en 4.0, elle se remplace dans le nouveau code par text.trim(). À la migration, examinez aussi null, undefined et les nombres comme entrées.

Vérifier version et portée du nettoyage

L'API jQuery.trim() et le guide de migration jQuery 4 indiquent sa suppression. L'erreur $.trim is not a function sous jQuery 4 peut en découler. C'était un utilitaire global $.trim(text) ou jQuery.trim(text), pas une méthode sur une sélection.

String.prototype.trim() renvoie une nouvelle chaîne sans espaces ni fins de ligne aux extrémités. Elle ne réduit pas les espaces internes et ne les retire pas tous. Tabulations, sauts de ligne et espaces insécables NBSP sont concernés, mais tous les caractères invisibles ne sont pas des espaces.

Exemple complet des espaces extérieurs et internes

Enregistrez tout le code en UTF-8 dans trim-demo.html et ouvrez-le dans un navigateur. L'interface compare avec le fichier officiel jQuery 4.0.0 chargé depuis le réseau de diffusion de contenu, CDN ; internet est nécessaire, sans installation. La méthode de chaîne .trim() elle-même n'a pas besoin de jQuery.

L'exemple utilise trim natif et compare l'ancien résultat seulement si $.trim existe. Exécuté sans jQuery Migrate avec 3.7.1 et 4.0.0, il confirme présence dans 3.7.1 et absence dans 4.0.0. Espaces, Unicode, application au champ et conversions ci-dessous ont aussi été vérifiés.

<!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>

Au départ, seuls les quatre espaces extérieurs disparaissent ; les deux internes restent :

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

1. Preview trim montre seulement le résultat, sans changer les espaces du champ.
2. Apply to field réécrit explicitement avec .val() et modifie le champ.
3. Tabs and line breaks retire tabulations/sauts extérieurs et conserve deux espaces entre Alpha et Beta.
4. Non-breaking spaces retire U+00A0, faisant passer la longueur de 7 à 5.
5. Zero-width spaces garde U+200B et la longueur 7, ce caractère n'étant pas supprimé.
6. Empty string renvoie vide. Reset restaure l'exemple et le champ initiaux.

Décider du traitement de null, undefined et 0

L'ancien $.trim() pouvait convertir null/undefined en vide et 0/false en "0"/"false". Remplacer directement par null.trim(), undefined.trim() ou .trim() d'un nombre n'est pas équivalent. Si le contrat exige une chaîne, vérifiez le type et traitez d'abord les entrées incorrectes.

Si null/undefined doivent devenir vides et les autres valeurs primitives rester sous forme de chaînes, convertissez explicitement comme ci-dessous. Exécutez ce fragment complet dans la Console des outils de développement. Ce n'est pas une fonction de compatibilité universelle pour tous les objets.

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

?? n'applique le vide qu'à null/undefined et conserve donc 0 et false. value || "" peut aussi les perdre. String(null).trim() donne "null", pas vide. Si absence et chaîne vide doivent rester distinctes, validez avant conversion.

Séparer nettoyage des espaces et validation

Une chaîne composée uniquement d'espaces devient vide. Cela peut convenir à une recherche ou un nom courant, mais pas systématiquement à des valeurs dont les espaces extérieurs ont du sens. Définissez les règles du champ avant de modifier la saisie.

trim ne retire pas les balises HTML, ne change pas la casse, ne normalise pas les espaces internes et n'effectue pas de contrôle de sécurité. L'exemple affiche les saisies ressemblant à du HTML littéralement avec .text(). Examinez points de code et normalisation nécessaire si des caractères invisibles restent.

Si l'erreur persiste, vérifiez version réelle, appels $.trim restants, plugins concernés et types d'entrée. Après remplacement, revérifiez null, undefined, 0, vide, espaces seuls et données réelles. Adapter appels et règles selon le guide de migration est plus durable qu'une rétrogradation.