String Cleaning with trim()
In this page:
What is trim()?
$.trim() strips whitespace characters from only the very start and end of a string, leaving any spacing in the middle of the text completely untouched. It's a thin wrapper that predates the now-standard native String.prototype.trim(), which does the same job without needing jQuery.
Example: What is trim()?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
console.log("[" + $.trim(" hello ") + "]");
</script>
</body>
</html>Trim User Input
Users often accidentally type extra spaces around their input — before their name, after their email address — especially on mobile keyboards. Trimming that value before you store or compare it prevents those invisible extra characters from causing mismatches or ugly display later.
Example: Trim User Input
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="name" value=" Alice ">
<script>
console.log($.trim($("#name").val()));
</script>
</body>
</html>Trim Before Validation
Always trim input before checking whether a field is empty, because a string containing only spaces would otherwise pass an empty check even though it has no real content. Validating raw, untrimmed input is one of the most common sources of forms that silently accept blank-looking submissions.
Example: Trim Before Validation
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="name" value=" ">
<script>
if ($.trim($("#name").val()) === "") {
console.log("Name is empty");
}
</script>
</body>
</html>Middle Spaces Stay
trim() only touches whitespace at the very start and end of the string — any spaces or line breaks between words in the middle stay exactly as they were. This distinction matters when a user legitimately needs multiple words separated by spaces, like a full name or an address line.
Example: Middle Spaces Stay
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
console.log($.trim(" hello world "));
</script>
</body>
</html>Small trim() Project
A simple, common pattern is to trim every text input right before validating or submitting a form, so that accidental leading or trailing spaces never make it into stored data. This one small step avoids a surprising number of subtle bugs around string comparisons and duplicate-looking records.
Example: Small trim() Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="email" value=" [email protected] ">
<script>
$("#email").on("blur", function() {
$(this).val($.trim($(this).val()));
});
</script>
</body>
</html>Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: