Intro to Regular Expressions

RegEx for Beginners in JavaScript

What is a regular expression?

RegEx is a sequence of characters that define a search pattern in a form or text. It is used in popular languages like Javascript, Go, Python, Java, C# which supports regex fully. In JavaScript, regular expressions are objects to find patterns of char combinations in strings. Some typical use cases of regular expressions are validating a string with the pattern, searching within a string, replace substrings in a string, extract some meta-information from a string.

Popular Regex and String Methods

test()

The test() method executes a search for a match between a regular expression and a specified string. The return is true or false.

const string = "This is an example of test"
const regex = /exam/;
console.log(regex.test(string)) =>> true

match()

There is a method of String. It finds matches in a string and returns an array of the matches.

const string = "This is an example of the match method";
var regex =/ match/
console.log(str.match(regex)); ==> [ "match" ]

To find all matches, we use the g (global) flag(see below)

const string = "This is a test to test match method";
const regex =/test/g
console.log(str.match(regex)); ==>[ "test", "test" ]

In case of no matches, null is returned (and NOT an empty array. Important to remember while applying array methods).

var string = "This is a test" ;
console.log(str.match(/hello/)); ==> null

Flags

Flags are optional parameters that can be added to a regular expression to affect its matching behavior. There are two main flags that modify the search in different ways

  • i: Ignores casing (/e/i will match both ‘e’ and ‘E’)
  • g: Global search returning all matches for a given expression inside a string — without it, only the first match is returned

These flags can be used separately or together in any order as seen down below.

conts string = "Hello, hello";
console.log(str.match(/he/gi)
==> Array(2)[ "He","he"]

Groups and ranges

Several characters or character classes inside square brackets […] means we want to “search for any of these characters"

For example [bd] will match for ‘b’ or ‘d’

console.log(/[bd]/.test("bed")); =>>true
console.log(/[bd]/.test("medical")); ==>true
console.log(/[bd]/.test("zoo")); ==>false

Character classes

Character classes are shorthands for certain character sets.

\d = Any digit character (from 0 to 9)

\D = Non-digit: any character except \d

\w = Any alphanumeric character from the basic Latin alphabet (including. digit), including the underscore

\W = Non-wordly character: anything but \w.

\s = a single white space character, including space, tab, form feed, line feed, and other Unicode spaces

\S = Non-space: any character except \s, for instance a letter

--

--

--

Full-Stack Software Engineer / New York City / www.danielcreyes.dev

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Calling Express API in React using react-script

Angular: Dynamic Importing Large Libraries

A Simple Introducing to Javascript

Currency API: How to Convert Prices (with up-to-date exchange rates) with JavaScript

Typescript Basics: Enums and Generics (Part 3)

What is React…

Solution Recipe 8: How to create a custom multilingual unsubscribe and preference page in Klaviyo

Overview of where to enable hosted pages in Klaviyo

What is difference between NSArray and Array ?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Daniel C Reyes

Daniel C Reyes

Full-Stack Software Engineer / New York City / www.danielcreyes.dev

More from Medium

4 Places to put JS code

Javascript arrow functions is a topic of importance and the best part is it’s very easy to…

The JavaScript Spread Operator (…) — A Basic Guide

JavaScript Algorithms: Maximum Subarray(LeetCode)