Check if a string contains a substring in JavaScript

If there is a case when you need to check if a string contains another string, you may use includes() function, which was added to the ECMAScript 2015 specification.

See the code block below. That's a basic example that may occur in any web application.

var content = "This is sample text";
var value = "sample";

var result = content.includes(value);

console.log(result);

Also, you may see specification of the includes() function here:

string.includes(searchString[, position])

The searchString parameter is mandatory and it must contain the string to be searched. But the position parameter is optional and you can use it specify at what position to start searching for the value.

It worth to mention that the incudes() function is case sensitive, and if you accidentally provide some search string in a wrong case, you may not be able to find any value inside of the source value.

That's a modern and very convenient method of searching for a string, however it may not be supported in old browsers. That's for you to decide to use it or not.

indexOf() function

There is an alternative method of searching. If for any reason, you'd like to write a stable code that works flawlessly everywhere and on each platform, then the indexOf() function may help you, please see the example:

var content = "This is sample text";
var value = "sample";

var result = content.indexOf(value) !== -1;

console.log(result);

In the code block above, we check that the "content" variable contains a value stored in the "value" variable. If the indexOf() function returns an index that equals to -1 then the statement will evaluate to false, which means that the sub-string was not found. And in the opposite case, the result variable will contain true if the indexOf() function returned meaningful index.

The search is case sensitive as well as in the includes() function, which is described fully earlier. It means that you have to be careful with the data that you pass into the function.

Also, you can see specification of the indexOf() function below. You can use additional fromIndex parameter if your intent is to write advanced search logic.

string.indexOf(searchValue [, fromIndex])

searchValue - it must contact string value that has to be found.

fromIndex - this parameter is optional and you can use it to specify location at which to start searching for the value.

As you probably already noticed, the main difference between includes() and indexOf() functions is that the latter returns exact position of the inner string, while the first one returns a simple boolean value.

Searching in a backward direction

It's important to note that the String object also contains the lastIndexOf() built-in function which is very useful. You can use it to get position of the last occurrence of the specified string.

The specification is very similar to other functions described in this article:

string.lastIndexOf(searchValue[, fromIndex])

The lastIndexOf() function can accept two parameters. The first one must contain the search value, and the second is optional and it specifies at what position to start searching. The return value is either the -1 or index of the last occurrence of the sub-string.

Conclusion

The JavaScript, as well as the TypeScript, is a very powerful programming language, and there are different ways to solve the issue that you have. If you are writing code for the modern browsers, you may use the includes() function, it will solve basic needs. However, if you have to detect exact index of the inner string and use it for some sort of future string manipulations, then the indexOf() function may be a better choice.

Should you have any questions or notes related to the content written in this article, feel free to post them below.

Leave a Reply

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