Check If a String Contains Only Whitespace with JavaScript

There are plenty of reasons that you might need to test a variable to see whether it contains just whitespace. Whether you're dealing with user input, or manipulating data in ways where whitespace might trip you up such as validating data before converting arrays to strings, or vice‑versa.

It's not always enough to just test string length to ensure that a string has useable characters and data. So how do we check for ‑ and remove ‑ whitespace?

The JavaScript trim() method

The JavaScript trim() method is a very handy and straightforward function for dealing with unexpected whitespace at the beginning or end of a string. It will remove any whitespace from either (or both) ends, whilst preserving any whitespace in the middle:

const str = ' Lots of whitespace here! ';
console.log(str.trim());
//=> 'Lots of whitespace here!'

As you can see, this is a great function for preserving the actual useful data whilst neatening up the string ‑ something especially helpful for dealing with user inputs. However, using trim() on a string that is only whitespace will result in a string that is 0 characters long ‑ meaning that if we pair it with the length property, we end up with a neat and lightweight way to detect strings that are only whitespace.

For example:

const whitespace_str = '   ';
console.log(whitespace_str.trim().length === 0);
//=> true

const data_str = '   Data here!   ';
console.log(data_str.trim().length === 0);
//=> false

Simple! You can even turn this into an extremely straightforward utility function:

const onlyWhiteSpace = (string: string): boolean =>
  string.trim().length === 0;

Because the trim() method doesn't affect the original string, we don't have to worry about calling it on our variable for this test.

Using Regex to Detect Whitespace‑Only Strings

I'd usually reach for trim() for this check because the intention is easy to read. A regular expression is another option, especially if you need to adapt the pattern to a different set of characters.

To detect whitespace‑only strings with a regular expression, use test() with the pattern below. It accepts the empty string too:

/^\s*$/

My problem with using regex for simple tasks like this is always that they look a little ugly, and aren't necessarily easy or obvious what they do when picked up by another developer on the team. Nevertheless, it breaks down like this:

• The forward slashes / delimit the regular expression literal. The pattern sits between them.
• The caret ^ matches the start of the input.
• The character class \s matches ECMAScript whitespace and line terminators, including spaces, tabs and line breaks. Use one backslash in this regular expression literal.
• The asterisk * allows zero or more of those characters, which is why an empty string also passes.
• The dollar sign $ matches the end of the input. Together, the anchors require the whole string to match.

To use this with the test() method, I'd recommend creating a separate utility function again to try and keep things as neat as possible. That could look like this:

const onlyWhiteSpace = (string: string): boolean => /^\s*$/.test(string);

console.log(onlyWhiteSpace('     '));
//=> true

console.log(onlyWhiteSpace('    Data in here!   '));
//=> false

console.log(onlyWhiteSpace(''));
//=> true

The Wrap‑up

For a whitespace‑only check, either approach will do the job. Both return true for an empty string as well as strings made entirely of whitespace. Choose the version your team will find easiest to read, and handle an empty value separately if your form needs to distinguish it.