JavaScript, Intro to Regular Expressions

Photo by Markus Winkler on Unsplash

What is a regular expression?

A regular expression is a line of code that you would commonly use as a way to search text for a specific character or group of characters matching the sequence, or meeting the parameters of the search. Simply, a regular expression is a pattern or sequence of code used when we want to search for matching items inside of text. For instance when we hit the ‘command + F’ or ‘Ctrl + F’ shortcut, it should open up a mini search bar in your web browser. Whatever keys we type into the search bar helps us search for and distinguish and gather all of the words or matching characters on the page. It’s a great shortcut and tool for pinpointing text, especially if you are parsing through a large document. However, often with regular expressions, it is useful for you want to make any changes to the text based on the parameters put inside of the regular expression.

Let’s look at an example using a LeetCode problem called “Valid Palindrome”. This problem asks: “Given a string s, determine if it is a palindrome, considering only alphanumeric characters and ignoring cases.” There are two examples given. The first says: if the string is “A man, a plan a canal: Panama” than the outcome should be true, because ignoring all symbols that are not alphanumeric, we should return “amanaplanacanalpanama” which if we were to reverse the string would spell out the same word. The second example says: if a string reads “race a car” then the output should be false, because again ignoring all non-alphanumeric values, we would return “raceacar”, which if reversed would not spell the same string.

var isPalindrome = function(s) {
    //replace everything in s that is not a letter/number with an empty string/negative space
    s = s.replace(/[^a-z0-9]/gi,"")
    let left = 0
    let right = s.length -1
    while (left < right){
        if (s[left].toLowerCase() !== s[right].toLowerCase()) return false
        left++ 
        right--
    }
    return true
};

In the code above:

We start the first line by replacing the string with a configured version of the input where we modify its value using a regular expression and the .replace built in string method. The Replace, takes in two arguments, in this case 1) a regular expression, and 2) an empty string with no spaces, which will remove the white space in our string. We are using a two point method for the solution, where our left variable is equal to the starting index of our string and the right index is equal to the length of the string. While left is less than right we will scan and iterate from the outside of the array to the inside, incrementing the left and decrementing the right, our catch statement being: if the letter in the left index of the string does not equal the right than return false, otherwise continue incrementing and decrementing the values of left and right respectively. If we fully get from the outside to the center without returning false, then we return true. Now for a more in depth look at the regular expression.

how does it work?

We will look at the regular expression used in the LeetCode problem above.

s = s.replace(/[^a-z0-9]/gi,"")

The syntax for regular expressions or regex uses the forward slash (/) as the open and close for a regular expression. So in our example /[^a-z0–9]/gi, everything within the forward slashes comprises the regular expression, and the letters following the forward slashes are the flags. A flag is an optional addition to the end of a regular expression that further affects a search. In this case, we have two flags g and i. There are six flags in total, which in this blog post I will only cover the two in the example above. I will include a link where you can learn more about regular expressions in 20 minutes.
g = global => it returns all matches. Without it, we would only return the first match.
i = case insensitive => ignores case sensitivity so that there is no difference, for example between A and a

The square brackets []are used when you aren’t absolutely sure of what you are searching for, everything inside will describe roughly the parameters of what you are searching for. So in the case of our example above, we have ^a-z0-9 the up arrow ^ inside of the brackets negates anything that is not mentioned inside of the square brackets. So in our example since we have the laters a-z and the numbers 0–9, anything other than those characters will be ignored in the search. And because in our example, they are ignored, we only use the letters and numbers in the input string. All punctuation marks and non-alphanumeric symbols are ignored.

conclusion

Regular expressions are a great way to search through text quickly and efficiently. There are so many uses, and I hope the links provided can be of help to further understand the use cases and ways to integrate regex into projects or algorithms you build. In the future I hope to make a further in depth guide to using regex as I’ve found it to be one of my preferences for solutions to searching and filtering text.