To check if a string contains whitespace in JavaScript, call the test() method on this regex: \s, i.e., /\s/.test(str). test() will return true if the string contains any whitespace character. Otherwise, it will return false.
function containsWhitespace(str) {
return /\s/.test(str);
}
console.log(containsWhitespace(' ')); // true
console.log(containsWhitespace('JavaScript')); // false
console.log(containsWhitespace('coding beauty')); // true
console.log(containsWhitespace('string\twith\ttabs')); // true
console.log(containsWhitespace('string\nwith\nnewline')); // true
The RegExp test() method searches a string for matches with a regular expression. It returns true if any matches are found. Otherwise, it returns false.
The forward slashes / and / indicate the start and end of the regular expression.
The \s matches any single whitespace character in the string.
This method will match any whitespace character, including:
- space (
' ') - tab (
\t) - carriage return (
\r) - line feed (
\n), and - vertical tab (
\v)
// space (' ')
console.log(containsWhitespace('coding beauty')); // true
// carriage return (\r)
console.log(containsWhitespace('coding\rbeauty\r')); // true
// line feed (\n)
console.log(containsWhitespace('coding\nbeauty\n')); // true
// form feed (\f)
console.log(containsWhitespace('coding\f\beauty\f')); // true
// vertical tab (\v)
console.log(containsWhitespace('coding\vbeauty\v')); // true
If you only to check if the string contains a space character, you’ll need to use a different approach…
Check if string contains only spaces
To check if a string contains only spaces, simply change the regex to a space character:
function containsWhitespace(str) {
return / /.test(str);
}
console.log(containsWhitespace('coding beauty')); // true
console.log(containsWhitespace('coding\rbeauty\r')); // false
console.log(containsWhitespace('coding\nbeauty\n')); // false
console.log(containsWhitespace('coding\f\beauty\f')); // false
console.log(containsWhitespace('coding\vbeauty\v')); // false
You can also use call the String includes() methods with a space character to check if such a character exists in the string.
function containsWhitespace(str) {
return str.includes(' ');
}
console.log(containsWhitespace('coding beauty')); // true
console.log(containsWhitespace('coding\rbeauty\r')); // false
console.log(containsWhitespace('coding\nbeauty\n')); // false
console.log(containsWhitespace('coding\f\beauty\f')); // false
console.log(containsWhitespace('coding\vbeauty\v')); // false
Check if string contains whitespace with String match()
We can use the call the match() method on a string with the /\s/ as an argument to check whether the string contains whitespace.
function containsWhitespace(str) {
return Boolean(str.match(/\s/));
}
console.log(containsWhitespace(' ')); // true
console.log(containsWhitespace('JavaScript')); // false
console.log(containsWhitespace('coding beauty')); // true
console.log(containsWhitespace('string\twith\ttabs')); // true
console.log(containsWhitespace('string\nwith\nnewline')); // true
Like the RegExp test() method, match() searches a string for matches with a regular expression, but it returns an array of the matches, instead of a boolean value.
// [ ' ', index: 6, input: 'coding beauty', groups: undefined ]
console.log('coding beauty'.match(/\s/));In this case, match() returns an array that contains the first match of a whitespace character, along with some additional properties that provide more information on the match.
If there are no matches found in the string, match() returns null:
console.log('Coding_Beauty'.match(/\s/)); // nullBecause of how match() works, we can cast the return value to a boolean, whose value would indicate whether or not any matches of a whitespace character exist in the string.
The Boolean() constructor casts a truthy or false value to true or false. An array of matches from match() will be cast to true, indicating the presence of matches, and a null value from match() will be cast to false, meaning that no matches can be found.
Note: In JavaScript, there are six falsy values: undefined, null, NaN, 0, '' (empty string), and false. Every other value is truthy.
11 Amazing New JavaScript Features in ES13
This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.
