How to Check if a String Contains Only Letters and Spaces in JavaScript

1. The RegExp test() Method

To check if a string contains only letters and spaces in JavaScript, call the test() method on this regex: /^[A-Za-z\s]*$/. If the string contains only letters and spaces, this method returns true. Otherwise, it returns false.

function onlyLettersAndSpaces(str) {
  return /^[A-Za-z\s]*$/.test(str);
}

const str1 = 'contains_underscore';
const str2 = 'only letters and spaces';

console.log(onlyLettersAndSpaces(str1)); // false
console.log(onlyLettersAndSpaces(str2)); // true

The RegExp test() method searches for a match between the regular expression and a specified string.

The / and / characters are used to start and end the regular expression.

The ^ character matches the beginning of the string, while the $ character matches the end of the string.

The square brackets ([]) are used to match any one of multiple specified patterns. In our example, we specify three patterns: A-Za-z, and \s. A-Z matches any uppercase letter, a-z matches any lowercase letter, and 0-9 matches any digit.

The * character matches zero or more occurrences of a particular pattern. We add it after the square brackets to match any of the patterns in the brackets as many times as possible.

How to Check if a String Contains At Least One Letter and One Space

The regular expression we used makes the method return true if the string contains only letters or only spaces.

const str1 = 'OnlyLetters';
const str2 = '  '; // only spaces
const str3 = 'letters and spaces';

console.log(onlyLettersAndSpaces(str1)); // true
console.log(onlyLettersAndSpaces(str2)); // true
console.log(onlyLettersAndSpaces(str3)); // true

To make sure the string contains at least one letter and one space, we’ll need to match the string against a regex that matches at least one letter (/[A-Za-z]/), and another that matches at least one space /\s/.

function atLeastOneLetterAndSpace(str) {
  return (
    /^[A-Za-z\s]*$/.test(str) &&
    /[A-Za-z]/.test(str) &&
    /\s/.test(str)
  );
}

const str1 = 'OnlyLetters';
const str2 = '  '; // Only spaces
const str3 = 'letters and spaces';

console.log(atLeastOneLetterAndSpace(str1)); // false
console.log(atLeastOneLetterAndSpace(str2)); // false
console.log(atLeastOneLetterAndSpace(str3)); // true

2. The String match() Method

We can also use the String match() method to check if a string contains only letters and spaces.

function onlyLettersAndSpaces(str) {
  return Boolean(str?.match(/^[A-Za-z\s]*$/));
}

const str1 = 'contains_underscore';
const str2 = 'only letters and spaces';

console.log(onlyLettersAndSpaces(str1)); // false
console.log(onlyLettersAndSpaces(str2)); // true

The String match() method returns an array of all the matches of a regular expression in a string. If there are no matches, it returns null.

const regex = /^[A-Za-z\s]*$/;

const str1 = 'contains_underscore';
const str2 = 'only letters and spaces';

// null
console.log(str1?.match(regex));

/**
[
  'only letters and spaces',
  index: 0,
  input: 'only letters and spaces',
  groups: undefined
]
 */
console.log(str2?.match(regex));

We pass the result of match() to the Boolean constructor to convert it to a BooleanBoolean() converts truthy values to true, and falsy values to false.

In JavaScript, there are six falsy values: undefinednullNaN0'' (empty string), and false. Every other value is truthy.

console.log(Boolean(undefined)); // false
console.log(Boolean(['letters'])); // true
console.log(Boolean(null)); // false
console.log(Boolean(5)); // true

We used the optional chaining operator (?.) on the string variable. If the variable is nullish (undefined or null), instead of an error being thrown when we try to call the match() method on it, this operator will prevent the method call and return undefined.

const str = null;

console.log(str?.match(/^[A-Za-z\s]*$/)); // undefined


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.

11 Amazing New JavaScript Features in ES13

Sign up and receive a free copy immediately.

Leave a Comment

Your email address will not be published. Required fields are marked *