🙌 40% off everything - Black Friday!

Coupon BF40 at checkout for our biggest discount ever.

days
hours
mins
secs

Find a Substring inside a String in JavaScript

May 29, 2020 2 mins read

JavaScript post
JavaScript icon

Want expert JavaScript skills? Here's what you need to know.

Show Me View JavaScript courses

In this post you’ll learn how to use JavaScript to find a substring inside a string.

Let’s assume we have a secret passcode 'bacon' and want to check if it exists in another string.

Here we’ll use findme to demonstrate the string we want to check:

const passcode = 'bacon';
const findme = `8sowl0xebaconxjwo98w`;

Visually we can see that findme contains 'bacon' but how do we get a yes/no answer in JavaScript?

We can introduce a new feature in ES6, the String.prototype.includes method, which will return us a Boolean value based on whether the substring was found:

const found = findme.includes(passcode);
// true
console.log(found);

🐛 Check the browser support for String includes! Either compile your code with Babel or provide a polyfill.

This is a really nice method and it gives us a straight-up Boolean answer - but it wasn’t always this way.

First, came String.prototype.indexOf - where we can ask for the index of the start of the string, should it match. If it does match, we get the index, or we get -1, so naturally our safety check does exactly this:

const index = findme.indexOf(passcode);

// true
console.log(index !== -1);

The -1 isn’t the best looking code, it feels a bit archaic - so prefer the use of String.prototype.includes where appropriate.

You could also use the bitwise operator ~ instead as a little shorthand, and we’ll leave it at that:

const index = !!~findme.indexOf(passcode);

// true
console.log(index);

The !!~ converts the resulting bitwise expression to a Boolean. It’s basically a fancy way of forcing indexOf to return us true or false in one line.

Summary

We’ve covered the new ES6 String.prototype.includes method and compared it to the previously-favoured String.prototype.indexOf method.

The different between the two is includes will return you a Boolean and indexOf will return you a number.

Typically includes is the go-to method unless you need to know the index!

🕵️‍♀️ Learn more about the indexOf method for finding a string inside a string

Exploring JavaScript Array Methods cover

⚡️ FREE eBook: 🔥 ForEach, Map, Filter, Reduce, Some, Every, Find

Todd Motto “This book is straight to the point, syntax exploration, comprehensive guide, real-world examples, tips and tricks - it covers all you need Todd Motto, author of Exploring JavaScript Array Methods

I hope you enjoyed the post, and if you’d love to learn more please check out my JavaScript courses, where you’ll learn everything you need to know to be extremely good and proficient at the language, DOM and much more advanced practices. Enjoy and thanks for reading!

Happy coding!