How to check if a string contains text from an array of substrings in JavaScript?

Question

Pretty straight forward. In javascript, I need to check if a string contains any substrings held in an array.

Answer 1

There's nothing built-in that will do that for you, you'll have to write a function for it.

If you know the strings don't contain any of the characters that are special in regular expressions, then you can cheat a bit, like this:

if (new RegExp(substrings.join("|")).test(string)) {
    // At least one match
}

...which creates a regular expression that's a series of alternations for the substrings you're looking for (e.g., one|two) and tests to see if there are matches for any of them, but if any of the substrings contains any characters that are special in regexes (*, [, etc.), you'd have to escape them first and you're better off just doing the boring loop instead. For info about escaping them, see this question's answers.

Live Example:

var substrings = ["one", "two", "three"];
var str;

// Setup
console.log("Substrings: " + substrings.join(","));

// Try it where we expect a match
str = "this has one";
if (new RegExp(substrings.join("|")).test(str)) {
    console.log("Match using '" + str + "'");
} else {
    console.log("No match using '" + str + "'");
}

// Try it where we DON'T expect a match
str = "this doesn't have any";
if (new RegExp(substrings.join("|")).test(str)) {
    console.log("Match using '" + str + "'");
} else {
    console.log("No match using '" + str + "'");
}

---

In a comment on the question, Martin asks about the new Array.prototype.map method in ECMAScript5. map isn't all that much help, but some is:

if (substrings.some(function(v) { return str.indexOf(v) >= 0; })) {
    // There's at least one
}

Live Example:

var substrings = ["one", "two", "three"];
var str;

// Setup
console.log("Substrings: " + substrings.join(","));

// Try it where we expect a match
str = "this has one";
if (substrings.some(function(v) { return str.indexOf(v) >= 0; })) {
    console.log("Match using '" + str + "'");
} else {
    console.log("No match using '" + str + "'");
}

// Try it where we DON'T expect a match
str = "this doesn't have any";
if (substrings.some(function(v) { return str.indexOf(v) >= 0; })) {
    console.log("Match using '" + str + "'");
} else {
    console.log("No match using '" + str + "'");
}

You only have it on ECMAScript5-compliant implementations, though it's trivial to polyfill.

---

Update in 2020: The some example can be simpler with an arrow function (ES2015+), and you might use includes rather than indexOf:

if (substrings.some(v => str.includes(v))) {
    // There's at least one
}

Live Example:

const substrings = ["one", "two", "three"];
let str;

// Setup
console.log("Substrings: " + substrings.join(","));

// Try it where we expect a match
str = "this has one";
if (substrings.some(v => str.includes(v))) {
    console.log("Match using '" + str + "'");
} else {
    console.log("No match using '" + str + "'");
}

// Try it where we DON'T expect a match
str = "this doesn't have any";
if (substrings.some(v => str.includes(v))) {
    console.log("Match using '" + str + "'");
} else {
    console.log("No match using '" + str + "'");
}

Or even throw bind at it, although for me the arrow function is much more readable:

if (substrings.some(str.includes.bind(str))) {
    // There's at least one
}

Live Example:

const substrings = ["one", "two", "three"];
let str;

// Setup
console.log("Substrings: " + substrings.join(","));

// Try it where we expect a match
str = "this has one";
if (substrings.some(str.includes.bind(str))) {
    console.log("Match using '" + str + "'");
} else {
    console.log("No match using '" + str + "'");
}

// Try it where we DON'T expect a match
str = "this doesn't have any";
if (substrings.some(str.includes.bind(str))) {
    console.log("Match using '" + str + "'");
} else {
    console.log("No match using '" + str + "'");
}