JavaScript - Search a string for a substring

I've never been very good with regular expressions. It's one of those things that only seems to crop up (for me) when validating an email address or phone number. Thankfully, there are plenty of examples for both of those.

indexOf to search a string

Having said that, my preference for searching a string for another string is by using indexOf function.

Let's take a look at an example:

var myString = "This is a string that contains JavaScript";
if (myString.indexOf("JavaScript") >= 0) {
document.getElementById("output").innerHTML += "Found JavaScript!";
} else {
document.getElementById("output").innerHTML += "Did not find JavaScript";
}
if (myString.indexOf("javascript") >= 0) {
document.getElementById("output").innerHTML += "Found javascript!";
} else {
document.getElementById("output").innerHTML += "Did not find javascript";
}

When this JavaScript runs, it writes "Found JavaScript!" in the results area.

Notice that in the second iteration it is looking for "javascript" in all lowercase. This example outputs "Did not find javascript" because the indexOf is case sensitive.

If you want your match to be case sensitive then you are good to go. Otherwise, a common solution is to call the toLower function before the indexOf function to make it case insensitive.

Another important thing to note is the indexOf function returns -1 when it does not find the string. This is important as if the string you are searching is the very first thing in the string the indexOf will return 0; hence the >= 0 in the if statement.

The second solution is to use the regular express function match. This function accepts a regular expression and will return true or false based on whether it finds a match.

Let's take a look at an example:

var myString = "This is a string that contains JavaScript";
if (myString.match("JavaScript")) {
document.getElementById("output").innerHTML += "Found JavaScript!";
} else {
document.getElementById("output").innerHTML += "Did not find JavaScript";
}
if (myString.match(/javascript/i)) {
document.getElementById("output").innerHTML += "Found javascript!";
} else {
document.getElementById("output").innerHTML += "Did not find javascript";
}

In the first if statement we are passing a regular string of "JavaScript". This returns true. In the second if statement, we are passing a slightly more complicated regular expression of /javascript/i. This tells the match function to look for the string javascript and the /i makes it case insensitive.

Because the second instance in the example is case insensitive, both if statements return true and the message indicating that the string was found.

Published on Feb 15, 2019

Tags: JavaScript | substring