This article will give you a solution to the case when you need to check if a string contains another string. The first method is that you may use the includes() function. It was added to the ECMAScript 2015 JavaScript 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 to specify at what position to start searching for the value.
It is worth mentioning that the incudes() function is case sensitive. If you accidentally provide some search string in the 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 whether 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 inner string was not found. And in the opposite case, the result variable will contain true if the indexOf() function returns a 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 the specification of the indexOf() function below. You can use the additional fromIndex parameter if your intent is to write advanced search logic.
string.indexOf(searchValue [, fromIndex])Please review description of each parameter below:
searchValue - it must contain a string value that has to be found.
fromIndex - this parameter is optional and you can use it to specify the 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 the exact position of the inner string. But 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 the 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
JavaScript, as well as TypeScript, is a very powerful programming language, and there are different ways to solve the issues that you may have. If you are writing code for the modern browsers, the possible decision is to use the includes() function. It will solve the basic needs. However, if you have to detect the 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.
Comments