jQuery / Método / jQuery.trim() - Quitar espacios de los extremos

jQuery.trim() quitaba espacios al principio y al final de una cadena, conservando los internos. Obsoleto desde jQuery 3.5 y eliminado en 4.0, en código nuevo se sustituye por text.trim(). Al migrar revisa también entradas no textuales como null, undefined y números.

Comprobar versión y alcance del recorte

La API jQuery.trim() y la guía de migración de jQuery 4 documentan su eliminación. El error $.trim is not a function en jQuery 4 puede deberse a ello. Era una utilidad global $.trim(text) o jQuery.trim(text), no un método de elementos seleccionados.

String.prototype.trim() devuelve una cadena nueva sin espacios ni terminadores de línea en los extremos. No reduce espacios internos ni los quita todos. Incluye tabulaciones, saltos y espacios de no separación NBSP, pero no todo carácter invisible es espacio.

Ejemplo completo de extremos y espacios internos

Guarda todo el código en UTF-8 como trim-demo.html y ábrelo en el navegador. La interfaz carga el archivo oficial de jQuery 4.0.0 desde su red de distribución de contenidos, CDN, con internet y sin instalación. El .trim() de la cadena no necesita jQuery.

El ejemplo usa trim nativo y compara el resultado anterior solo si existe $.trim. Se ejecutó sin jQuery Migrate con 3.7.1 y 4.0.0, confirmando presencia en el primero y ausencia en el segundo. También se comprobaron espacios, Unicode, aplicación al campo y conversiones siguientes.

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

Inicialmente solo desaparecen cuatro espacios exteriores; los dos internos permanecen:

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

1. Preview trim muestra el resultado sin cambiar los espacios del campo.
2. Apply to field escribe explícitamente mediante .val() y modifica el campo.
3. Tabs and line breaks elimina tabulaciones/saltos exteriores y mantiene dos espacios entre Alpha y Beta.
4. Non-breaking spaces elimina U+00A0 y reduce longitud de 7 a 5.
5. Zero-width spaces conserva U+200B y longitud 7 porque no se recorta.
6. Empty string devuelve vacío. Reset restaura muestra y campo iniciales.

Decidir qué hacer con null, undefined y 0

El antiguo $.trim() podía convertir null/undefined en vacío y 0/false en "0"/"false". Cambiar directamente a null.trim(), undefined.trim() o .trim() de un número no es equivalente. Si el contrato exige cadenas, valida el tipo y trata entradas incorrectas primero.

Si la política es vacío para null/undefined y cadenas para otros valores primitivos, convierte explícitamente como aquí. Ejecuta este fragmento completo en Console de las herramientas de desarrollo. No es compatibilidad universal garantizada para objetos arbitrarios.

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

?? aplica vacío solo a null/undefined y conserva 0 y false. value || "" también puede descartarlos. String(null).trim() genera "null", no vacío. Si ausencia y cadena vacía deben distinguirse, valida antes de convertir.

Separar limpieza de espacios y validación

Una cadena solo de espacios queda vacía. Puede convenir a búsquedas o nombres habituales, pero no a todos los valores con espacios exteriores significativos. Define las reglas del campo antes de modificar la entrada.

trim no elimina etiquetas HTML, cambia mayúsculas, normaliza espacios internos ni valida seguridad. El ejemplo muestra entradas parecidas a HTML literalmente con .text(). Si quedan caracteres invisibles, examina sus puntos de código y la normalización necesaria.

Si persiste el error, revisa versión real, llamadas $.trim restantes, plugins e inputs. Tras reemplazar, comprueba null, undefined, 0, vacío, solo espacios y casos reales. Adaptar llamadas y reglas según la guía de migración facilita el mantenimiento frente a bajar la versión.