Home » JavaScript » JavaScript String Contains Example

About Era Balliu

Era Balliu
Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.

JavaScript String Contains Example

Usually, programming languages have a special preprocessed function to find a substring of a string. But what happens when you language of choice doesn’t have one? Well the answer to that is: You make one! How exactly do you write such function in JavaScript, we are going to show you below.

JavaScript Interview Coming Up?

Subscribe to our newsletter and download the Ultimate JavaScript interview questions and answers collection right now!

In order to get you prepared for your next JavaScript interview, we have compiled a huge list of relevant questions and their respective answers. Besides studying them online you may download the eBook in PDF format!

 

Does a ready made function exist?

It does!

If you want to find if a string contains another string then you already have a ready made function for that, and it would be string.includes(). This function returns true when the method finds another substring included in the main one, and returns false when the main string does not contain the substring.

You can use it like this:

var string='Find the substring in this string!';

console.log(string.includes('Find')); //true
console.log(string.includes('substring')); //true
console.log(string.includes('Web Code Geeks')); //false

You can even see it being used like this:

console.log(str.includes('Find', 1)); // false

You see that here we have used another argument to the function. This represents the position from which the function starts to search for the substring. You see that the position we specified in the previous example is 1, and 'Find' is the first word of the main string. This returns false because the first position holds the index 0, and it changes from the nearest position by one. Also note that this method is case sensitive, which means that if you want to search for 'Era', but write the code below, then you will get a false result.

"Era Balliu".includes("era"); //false

So why don’t we use this? Because this method is not compatible with most browsers. It is supported by Chrome v.41 and is not supported by any other browsers, except for Firefox v.19-36 that has fixed the bugs and renamed the function to string.contains().

And what do we use that is compatible to most browsers? There are two other indirect methods, which we will learn how to use, below.

indexOf()

This method returns the index where the substring is first found, and returns -1 if the substring is not found at all in the main one.

Have a look at the code below:

var string='Merry Christmas and Happy New Year!';

console.log(string.indexOf('Merry'));           // returns  0
console.log(string.indexOf('Blute'));           // returns -1
console.log(string.indexOf('Christmas', 0));    // returns  5
console.log(string.indexOf('christmas', 0));    // returns -1

Be careful to notice that if the method returns 0 or 1 it doesn’t equal the true or false results we saw in the includes() method. It only shows the position where the substring is found, and here we remind you once again that the positions start from 0 and onwards not from 1.

In the first use of the indexOf() method we see that exact same thing, it has returned 0 because the word 'Merry' is located in the first position in the main string, while the second one has returned -1 because the substring 'Blute' is not even included in the main string.

In the third one it returns 5, which is the position where 'Christmas' is found in the string. The other use shows us that the indexOf() method is case sensitive. Please note that using indexof() instead of indexOf will turn out incorrect results.

In the same way you can use the lastIndexOf() method. The difference between these two methods is that the second one starts checking for the substring starting from the last index, and not from the first, as indexOf() does.

For both methods you can add the optional argument that states the index from where to start searching for the substring.

search()

The search() method, similarly to the previous methods, returns the index of the substring if it is found and -1 if it is not found. You can use it like below:

var string='Web Code Geeks';

console.log(string.search('Web'));      //returns 0

This method too is case sensitive, and it is compatible with most browsers, though for Firefox prior to Gecko v.8.0 it has a catch.

When you leave search() function without an argument, it will search for an empty string, while for Firefox prior to v.8.0 of Gecko it would search for 'undefined', though now this problem is fixed.

Download the source code

This was an example of string contains in JavaScript.

Download
You can download the full source code of this example here: StringContains

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

 

Leave a Reply

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

*

Want to take your WEB dev skills to the next level?

Grab our programming books for FREE!

Here are some of the eBooks you will get:

  • PHP Programming Cookbook
  • jQuery Programming Cookbook
  • Bootstrap Programming Cookbook
  • Building WEB Apps with Node.js
  • CSS Programming Cookbook
  • HTML5 Programming Cookbook
  • AngularJS Programming Cookbook