DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Trim Your Inputs!
Eliahu Garcia Lozano
Eliahu Garcia Lozano

Posted on • Originally published at blog.eligarlo.dev

Trim Your Inputs!

Definition of trim, "To cut away unnecessary parts from something." - Oxford Dictionary.

Sometimes, validating forms in JavaScript can be a tedious task for a developer. You have to check many things. For instance, that the values given are of the type you expect them to be (string, number, object...), that they are not undefined or null. And after all that validation, you realize that a user typed an empty string. ๐Ÿคฆโ€โ™‚๏ธ

One of the most common issues about empty strings a developer can face is the one that has spaces.

console.log(myInput)
> '      '  // ๐Ÿ‘ˆ Empty String
Enter fullscreen mode Exit fullscreen mode

How can you prevent this from happening? In JavaScript, there are five different methods (actually there are three and two aliases) you can use. Let's check what they do.

Use Case

In a login form, you have an input where the user needs to enter a username like the one below.

login form

๐Ÿ‘† Did you notice the whitespace at the beginning and the end of the input?

If we have a look at our code, the input would be like this:

<input class="username" placeholder="Enter Username" type="text">
Enter fullscreen mode Exit fullscreen mode

And the JavaScript like this:

const userNameInput = document.querySelector('.username')

console.log(userNameInput)
> '   Eliahu Garcia Lozano   '
Enter fullscreen mode Exit fullscreen mode

Time to get rid of the whitespaces ๐Ÿงน.

TrimStart and TrimLeft

These two will remove the whitespace from the beginning of a string.

console.log(userNameInput.trimStart())
> 'Eliahu Garcia Lozano   '
console.log(userNameInput.trimLeft())
> 'Eliahu Garcia Lozano   '
Enter fullscreen mode Exit fullscreen mode

TrimEnd and TrimRight

These two will remove the whitespace from the end of a string.

console.log(userNameInput.trimEnd())
> '   Eliahu Garcia Lozano'
console.log(userNameInput.trimRight())
> '   Eliahu Garcia Lozano'
Enter fullscreen mode Exit fullscreen mode

With these methods, we either removed the whitespace from the beginning or the end of a string but, what if you need to remove the whitespace from both sides?

trimStart and trimEnd are methods while trimLeft and trimRight are aliases of those methods.

Chaining the methods

You can use them together to get the desired result.

console.log(userNameInput.trimStart().trimEnd())
> 'Eliahu Garcia Lozano'
console.log(userNameInput.trimRight().trimLeft())
> 'Eliahu Garcia Lozano'
Enter fullscreen mode Exit fullscreen mode

Ok, maybe it is a little bit ugly I know. Let's check the last method, actually the one I use.

Trim

Just like chaining methods, trim will remove the whitespace from left and right; plus, your code will look cleaner. ๐Ÿ˜…

console.log(userNameInput.trim())
> 'Eliahu Garcia Lozano'
Enter fullscreen mode Exit fullscreen mode

Validating the input

In many places I've seen this kind of string validation:

if (userNameInput !== "") {
  // do something
}
Enter fullscreen mode Exit fullscreen mode

The problem with this is that the user may enter whitespace.

Now that we know how to trim the value of the input, let's see how to implement it in our form validation.

if (userNameInput.trim() !== "") {
  // do something
}
Enter fullscreen mode Exit fullscreen mode

Do you see the difference?

Conclusion

We saw how to remove the whitespace from just the beginning or the end of a string as from both sides at the same time.

Remember:

  • .trimStart() & .trimLeft() will remove whitespace from the left.
  • .trimEnd() & .trimRight() will remove whitespace from the right.
  • .trim() will remove whitespace from both the left and the right side.

From now on, Trim Your <Inputs>! (if you didn't before).

If you found it useful, please like, subscribe, and share the knowledge.

You might like what I share on my Twitter too.

Cover Picture by Isra E on Unsplash

Top comments (4)

Collapse
 
myzel394 profile image
Myzel394

What's the difference between trimStart and trimLeft?

Collapse
 
juneate profile image
RP

Some languages read right-to-left (rtl), so their "right" is the start and not the end.

So if you're trying to remove from the beginning of the input, regardless of the language used, using trimStart is more appropriate than trimLeft.

CSS has provided properties that consider the same use case, called "logical properties". So for example, margin-top, margin-right, margin-bottom, margin-left, can also be written as (respectively): margin-block-start, margin-inline-end, margin-block-end, margin-inline-start.

Collapse
 
myzel394 profile image
Myzel394

Ohhhhh so that's what these margin properties are! Never knew what they mean! Thank you very much! I can add that to my imaginary TIL list :)

Collapse
 
eligarlo profile image
Eliahu Garcia Lozano Author

There is no difference, as there is no difference between trimEnd and trimRight.

They do the same thing.

Classic DEV Post from 2020:

js visualized

๐Ÿš€โš™๏ธ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! ๐Ÿฅณ

Happy coding!