Does a JavaScript String Contain a Substring?

  • |
  • 04 April 2022
Image not Found

In JavaScript, you can tell whether a string contains another string by using the includes() function.

Basic Usage of the includes() Function

The includes() function requires a string and substring. If required, you can also pass an optional start position (more on this later).

The function returns true if the string contains the substring, and false otherwise.

1
2
3
// Look for the substring in my_string
// Starting the search in start_position
my_string.includes(substring, (optional) start_position)

To call the includes() function, pass the following parameters:

  • my_string is the string you would like to test.
  • substring is the substring you are looking for.
  • Pass a number in start_position if you would like to start searching at a specific location. If the substring is not found beyond that location,

Most of the time, you will not need to have a start position. In that case, the function ends up being simpler:

1
2
// Look for the substring in my_string
my_string.includes(substring)

Important Features of the includes() Function

While the includes() function in JavaScript is fairly simple, it does come with a couple of quirks.

Passing a Start Position

I mentioned an optional position parameter a moment ago. Using the position parameter is as simple as passing the function a positive integer.

1
2
// Start searching in position 1
my_string.includes(substring, 1)

That’s it. If you do this, the includes() function will ignore the first letter, as its position is zero. It will search from that point on.

For example, let’s take a string such as "Hello world!". The letter H is in position 0, calling "Hello world!".includes("H", 1); will return false. You can do this with just about any other letter. Be careful when counting, though, as mis-counting can yield unwanted results!

1
2
3
4
5
6
// Testing the search position in the includes() function
let my_string = "Hello world!"
let substring = "world";
console.log(my_string.includes(substring)); // This should be true
console.log(my_string.includes(substring, 6)); // This should be true
console.log(my_string.includes(substring, 7)); // This should be false

The includes() Function is Case Sensitive!

As the title says, calling includes("FancyDev.net") is not identical to calling includes("fancydev.net"). Don’t believe it? Give the following code a try:

1
2
3
// Is the JavaScript includes() function case sensitive?
console.log("FancyDev.net".includes("Fancy")); // This should be "true"
console.log("FancyDev.net".includes("fancy")); // This should be "false"

Writing a Case Insensitive includes() Function

You don’t need the includes() function to be case sensitive. In fact, writing your own is rather easy.

You’ll need to do the following:

  • Set both the string and substring to lowercase (or uppercase).
  • Call the includes() function with the new strings.

That’s it! The following function is a case insensitive version of the includes() function.

1
2
3
4
5
6
7
8
9
function caseInsensitiveIncludes(string, substring, position) {
	let string_lower = string.toLowerCase(); 
	let substring_lower = substring.toLowerCase();
	return string_lower.includes(substring_lower, position); 
}

console.log(caseInsensitiveIncludes("Hello", "hello")); // This should be true
console.log(caseInsensitiveIncludes("Hello", "hello", 0)); // This should be true
console.log(caseInsensitiveIncludes("Hello", "hello", 1)); // This should be false, because we're passing a position parameter greater than one

If in doubt, give it a try. This function will behave just like the standard includes() function, but it will ignore the strings' capitalization.

Ignoring capitalization when testing strings can be useful, for example, when you’re coding an authentication or profile system. Most of time, you don’t want to have a user called my_user and another user called MY_USER on your site. That would only cause confusion.

Similarly, users sometimes capitalize their usernames and e-mail addresses when logging in; sometimes they do not. You don’t want to lock them out of their accounts based on how they capitalized their names. Having to unnecessarily re-type your password makes for an ugly user experience!

Example Usage

You can now use the includes() function in a multitude of tasks. The above explanations, combined with the following example, should be enough to get you started. 😎

1
2
3
4
5
6
7
// Testing the includes() function in JavaScript
let my_string = "FancyDev.net is awesome!";
if (my_string.includes("is")) {
  console.log("The string contains the word is.");
} else {
  console.log("The string does not contain the word is.");
}

You May Also Like