You can search for a string inside another JavaScript string in several ways. This is great–except it’s hard to know the best way to do it. I’m going to list six different ways you can perform this search, along with a rating for the speed.
6. lodash includes
// make sure you include lodash in your page
var haystack = "Here is a haystack with a needle inside.";
var needle = "needle";
var doesContain = _.includes(haystack, needle);
alert(doesContain); // true
Lodash is an incredibly useful library for working with arrays, numbers, objects and strings. One of the methods it provides is includes. It’s faster than the regex methods and the ES6 includes, but it isn’t the fastest approach.
Score: F
This was the slowest or second-slowest in 5 of 7 browsers tested on jsben.ch
5. Match
var haystack = "Here is a haystack with a needle inside.";
var needleRegex = /needle/;
var matchFound = haystack.match(needleRegex);
alert(matchFound); // needle
This is very similar to RegExp.test(). What’s nice about this method is it will return the matching string. As I mentioned earlier, regexes are fine to use when you need them, but if you just need to search for a string inside of another string, this is overkill. If you really do need to use a regex for searching, I recommend using the search method if performance is necessary.
Score: D
This was slowest or second-slowest in 3 of 7 browsers tested on jsben.ch
4. Includes (ES6)
var haystack = "Here is a haystack with a needle inside.";
var needle = "needle";
var doesContain = haystack.includes(needle);
alert(doesContain); // true
The ECMAScript 2015 6th Edition (ES6) Specification added the includes method to String. It’s user-friendly but not quite as fast as I’d like. It also isn’t supported in older browsers and IE. I’d avoid this one for now.
Score: C
Performance is inconsistent across browsers on jsben.ch
3. RegExp
var haystack = "Here is a haystack with a needle inside.";
var needleRegex = /needle/;
var doesContain = needleRegex.test(haystack);
alert(doesContain); // true
Regexes are powerful when you have complicated search requirements. But this is the slowest way to search for a string inside another JavaScript string. Regexes are fine to use when you need them, just use them at the right time. If you really do need to use a regex for searching, I recommend using the search method if performance is necessary.
Score: B-
Slowest on Firefox (Mac), fastest on IE 11.
2. Search
var haystack = "Here is a haystack with a needle inside.";
var needleRegex = /needle/;
var doesContain = haystack.search(needleRegex);
alert(doesContain); // 26
// returns the index of the string if it finds it, -1 if it doesn't find the string
If you need to use a regex for searching, this is the fastest way to see if the string contains your regex. This still isn’t the fastest way to search inside a string, but it’s pretty darn performant.
Score: B
Never the fastest, but second fastest on 3 of the 7 browsers tested on jsben.ch
1. indexOf
var haystack = "Here is a haystack with a needle inside.";
var needle = "needle";
var doesContain = haystack.indexOf(needle);
alert(doesContain); // 26
// returns the index of the string if it finds it, -1 if it doesn't find the string
This is the generally the fastest way to search for a needle in a haystack in JavaScript currently.
Score: A
This was the fastest or second-fastest approach on 5 of the 7 browsers tested on jsben.ch
Results Table
Below are the speed rankings for seven different browsers as tested on January 11, 2017 on jsben.ch. A 1 means it was the fastest algorithm, a 6 means it was the slowest.
| Browser | regex | match | lodash includes | search | indexOf | includes (ES6) |
|---|---|---|---|---|---|---|
| Chrome (Mac) | 5 | 6 | 3 | 4 | 2 | 1 |
| Firefox (Mac) | 6 | 5 | 3 | 2 | 1 | 4 |
| Safari (Mac) | 2 | 5 | 6 | 4 | 1 | 3 |
| IE 11 (Windows 10) | 1 | 2 | 5 | 3 | 4 | UNSUPPORTED |
| Edge (Windows 10) | 4 | 1 | 6 | 2 | 5 | 3 |
| Chrome (Windows 10) | 2 | 4 | 5 | 3 | 1 | 6 |
| Firefox (Windows 10) | 3 | 4 | 6 | 2 | 1 | 5 |