Javascript Icon Get 67% off the JavaScript Master Bundle!

See the bundle then add to cart and your discount is applied.

0 days
00 hours
00 mins
00 secs
Javascript

Find a Substring inside a String in JavaScript

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

JavaScript Array Methods eBook Cover

🎉 Download it free!

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

  • Green Tick Icon Fully understand how to manage JavaScript Data Structures with immutable operations
  • Green Tick Icon 31 pages of deep-dive syntax, real-world examples, tips and tricks
  • Green Tick Icon Write cleaner and better-structured programming logic within 3 hours

As an extra bonus, we'll also send you some extra goodies across a few extra emails.

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!