Karleb's blog

Regular Expression Optimal Search In JavaScript

Karleb's photo
Karleb
·

4 min read

Regular Expression Optimal Search In JavaScript

Photo by James McDonald on Unsplash

if you have ever had to make a text search, the first thing that comes to mind might be to check if the store you are searching contains the search term using == or ===. This should work but not really how you would expect it.

Let's test it out:

let books = [
    "Think and Grow Rich",
    "Rich Dad Poor Dad",
    "48 Laws of Power",
    "Atomic Habits",
];

let result = books.find((book) => book == "Think and Grow Rich");

console.log(result);

//Think and Grow Rich

Let me briefly discuss what is wrong with this implementing. It assumes the user knows exactly what they want to search but what if they search in a case different from the one in our array?

let books = [
    "Think and Grow Rich",
    "Rich Dad Poor Dad",
    "48 Laws of Power",
    "Atomic Habits",
];

let result = books.find((book) => book == "Think and GROW RICH");

console.log(result);
//undefined

Notice we changed the case of some letters of the search term. Right now, the result variable returns undefined because the search term is not an exact match of the book in the store. You might think, why don't we convert the search term into all lowercase and the books into the same, then make our search, wouldn't that work? let's take a look.

let books = [
    "Think and Grow Rich",
    "Rich Dad Poor Dad",
    "48 Laws of Power",
    "Atomic Habits",
];
let newBooks = [];

for (book of books) {
    newBooks.push(book.toLowerCase());
}

let searchTerm = "Think and grow Rich".toLowerCase();

let result = newBooks.find((book) => book == searchTerm);
//'think and grow rich'

It works of course. But think about it, imagine we have about 1_000 data in our array store or more and we need to make a case insensitive search, this is not the best way to go about the search. The for loop will go through all items in the array and this will take time depending on the number of items in the store. The more the data, the more time it takes.

The way out of this is to optimize our code to use regular expressions.

Regular expression scares so many developers because it can be confusing and quite unreadable, but trust me, for something as small as a text insensitive search, it does not take so much.


let searchTerm = /Think and GROW Rich/i

let books = [
    "Think and Grow Rich",
    "Rich Dad Poor Dad",
    "48 Laws of Power",
    "Atomic Habits",
];

let result = books.find((book) => book.match(searchTerm));
//"Think and Grow Rich"

With this little fix, we can now search our store array without caring if user input is in any case whatsoever.

We declare a regular expression search term by putting the search term in-between two forward slashes and after the second search, we added an i modifier to instruct regular expression we are doing a case insensitive search.

This works, but what if we want to enter the search term into the two forward slashes by passing in a variable?


let book = "Think and GROW Rich"

let searchTerm = /${book}/i

let books = [
    "Think and Grow Rich",
    "Rich Dad Poor Dad",
    "48 Laws of Power",
    "Atomic Habits",
];

let result = books.find((book) => book.match(searchTerm));

console.log(result)
//undefined

Nothing matches. /${book}/i is being treated as a literal string rather than a regular expression. To avoid this, javascript provides a regular expression object that accept the search term and modifiers.


let book = "Think and GROW Rich"

let searchTerm = new RegExp(book, "i");

let books = [
    "Think and Grow Rich",
    "Rich Dad Poor Dad",
    "48 Laws of Power",
    "Atomic Habits",
];

let result = books.find((book) => book.match(searchTerm));

console.log(result)
//Think and Grow Rich

In conclusion, even though regular expressions (regex) can be confusing sometimes and difficult to read and write, with practice, they become easier to work with. There are also many online resources and tools available to help with creating and testing regular expressions.

They are a powerful tool for pattern matching and string manipulation. they allow for flexible and precise matching of text patterns, making them useful for tasks such as validation, search and replace, and parsing.

Performance can be a consideration when using regular expressions, as they can be slower than simple string comparisons for certain tasks. However, regular expressions can also provide significant benefits in terms of flexibility and power, making them an important tool in a programmer's toolbox.

There is a lot to do with regular expressions though, but for this article we will leave it here and maybe in the future, discuss deeper on this subject more.

JavaScriptwebdevRegexp