Checking for Substrings in JavaScript

Checking for Substrings in JavaScript

A common task in string manipulation is determining whether a larger string contains a specific substring. JavaScript provides several ways to achieve this, each with its own strengths and considerations. This tutorial will explore the most common and effective methods.

The includes() Method (ES6+)

The simplest and most modern way to check for a substring is using the includes() method, introduced in ECMAScript 2015 (ES6). This method directly returns a boolean value: true if the substring is found, and false otherwise. It’s case-sensitive.

const string = "Hello, world!";
const substring = "world";

const containsSubstring = string.includes(substring);
console.log(containsSubstring); // Output: true

const notFound = string.includes("universe");
console.log(notFound); // Output: false

You can also specify a starting index for the search:

const string = "banana";
const substring = "ana";

console.log(string.includes(substring, 1)); // Output: true (starts searching from index 1)
console.log(string.includes(substring, 2)); // Output: false (starts searching from index 2)

Browser Compatibility: includes() is widely supported in modern browsers. However, older browsers, particularly Internet Explorer, do not natively support it. If you need to support these older browsers, you’ll need to use a polyfill (explained later) or fall back to indexOf().

The indexOf() Method (ES5 and earlier)

Prior to ES6, the indexOf() method was the standard way to check for substrings. indexOf() returns the index of the first occurrence of the substring within the string. If the substring is not found, it returns -1. Therefore, to determine if a substring exists, you check if the return value is not -1.

const string = "Hello, world!";
const substring = "world";

const index = string.indexOf(substring);

const containsSubstring = index !== -1;
console.log(containsSubstring); // Output: true

const notFound = string.indexOf("universe");
console.log(notFound === -1); // Output: true

Like includes(), indexOf() is case-sensitive. You can also provide a starting index to begin the search.

const string = "banana";
const substring = "ana";

console.log(string.indexOf(substring, 1)); // Output: 1
console.log(string.indexOf(substring, 2)); // Output: -1

Browser Compatibility: indexOf() has excellent browser support, working in all major browsers, including older versions.

Polyfilling includes() for Older Browsers

If you need to use includes() but also support older browsers, you can "polyfill" it. A polyfill adds functionality to older browsers that they don’t natively support. Here’s a simple polyfill you can use:

if (!String.prototype.includes) {
  String.prototype.includes = function(search, start) {
    'use strict';
    if (typeof start !== 'number') {
      start = 0;
    }

    if (start + search.length > this.length) {
      return false;
    } else {
      return this.indexOf(search, start) !== -1;
    }
  };
}

This code checks if the includes() method already exists. If it doesn’t, it adds a new includes() method to the String.prototype, implementing the same logic as the native method using indexOf().

Advanced: Knuth-Morris-Pratt (KMP) Algorithm

For very specific, performance-critical scenarios, the Knuth-Morris-Pratt (KMP) algorithm provides an optimized approach to substring searching. While more complex to implement, KMP can achieve a worst-case time complexity of O(n+m), where n is the length of the string and m is the length of the substring. This is an improvement over the naive approach (and even indexOf() in certain edge cases). However, for most common use cases, the performance difference is negligible, and the added complexity isn’t worth it.