jQuery / Method / jQuery.trim() - Remove Whitespace at String Edges

jQuery.trim() removed whitespace from the beginning and end of a string while preserving internal spaces. Deprecated in jQuery 3.5 and removed in 4.0, it should be replaced in new code with text.trim(). When migrating, also review non-string inputs such as null, undefined and numbers.

Check versions and the trimming boundary

The jQuery.trim() API and jQuery 4 upgrade guide identify its removal. A $.trim is not a function error on jQuery 4 can result from this change. It was a global utility called as $.trim(text) or jQuery.trim(text), not a method on selected elements.

String.prototype.trim() returns a new string without whitespace and line terminators at its edges. It does not collapse spaces between words or remove every space. Tabs, line breaks and non-breaking spaces (NBSP) are included, but not every invisible character is whitespace.

Complete edge and internal whitespace example

Save all the code as UTF-8 in trim-demo.html and open it in a browser. The comparison interface loads the official jQuery file 4.0.0 from its content delivery network (CDN), requiring internet but no installation. The string's own .trim() does not need jQuery.

The example uses native trim and compares legacy output only if $.trim exists. It was executed with 3.7.1 and 4.0.0 without jQuery Migrate, confirming presence in 3.7.1 and absence in 4.0.0. Whitespace, Unicode cases, applying to the field and the conversions below were also checked.

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

Initially, only the four outer spaces disappear; the two between words remain:

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

1. Preview trim shows the result without changing the field's surrounding spaces.
2. Apply to field explicitly writes the result back through .val(), changing the field.
3. Tabs and line breaks removes edge tabs/newlines while retaining the two spaces between Alpha and Beta.
4. Non-breaking spaces removes U+00A0, reducing length from 7 to 5.
5. Zero-width spaces retains U+200B; length stays 7 because it is not trimmed.
6. Empty string returns empty text. Reset restores the initial space sample and field.

Choose a policy for null, undefined and zero

Legacy $.trim() could turn null/undefined into empty text and numeric 0/false into "0"/"false". Directly switching to null.trim(), undefined.trim() or a number's .trim() is not equivalent. If the input contract requires a string, validate that type and handle bad inputs first.

If your policy is empty text for null/undefined and string preservation for other primitive values, convert explicitly as below. Run this complete fragment in the developer tools Console. It is not a universal compatibility function promising identical behavior for arbitrary objects.

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

?? applies the empty default only to null/undefined and therefore preserves 0 and false. value || "" can discard them too. String(null).trim() instead produces "null", not an empty string. If absence and empty text must remain distinct, validate before converting.

Separate whitespace cleanup from validation

Whitespace-only text becomes empty after trimming. That may suit search terms or ordinary name fields, but do not apply it indiscriminately where leading/trailing spaces have meaning. Decide the field's rules before changing user input.

trim does not remove HTML tags, change case, normalize internal spaces or perform security validation. The example displays HTML-looking input literally through .text(). For remaining invisible characters, inspect code points and required normalization instead of deleting everything unseen.

If errors remain, check the actual jQuery version, remaining $.trim calls and plugins using it, and input types. Recheck null, undefined, zero, empty and whitespace-only strings plus real input cases after replacement. Updating calls and input policy following the upgrade guide is more maintainable than downgrading the library.