Regex: An intro

What is Regex?

Regex is a shortened term for Regular Expression. Regex patterns are used to find, replace or search for text. These patterns may be difficult to read sometimes because they are composed of simple characters such as /code/ or a combination of simple and special characters, such as /code*s/ or /Number (\d+)\.\d*/.

Creating a regular expression in Javascript

You can create it with the RegExp object

const regexp = new RegExp('pattern', 'flag(s)');

or using the literal method

const regexp = /pattern/flag(s); 

When can you use Regex?

Regex can be used to perform the following actions:

• user input validation, e.g. password checker, email validation
• finding a specific text from a large glob of text
• searching for things that match a given pattern
• transforming a text from one format to another

Regex Methods in Javascript

- regexp.test(str) method:

The test method allows you to search for a match between a regex and a string. It returns a boolean, true or false

const str = 'Hello World';
const regexp = /World/;
console.log(regexp.test(str)); // true

- regexp.exec(str) method:

While the test() method allows you to search if a pattern exists within a string, the exec() method will enable you to retrieve the actual match from the string.

const str = 'Hello World';
const regexp = /l/;
console.log(regexp.exec(str)); 

This would only return the first match.
[ 'l', index: 2, input: 'Hello World', groups: undefined ]

Searching with flags

An example:
Using the previous example, 'Hello World' would return true, but 'Hello world' would return false because of the case sensitivity of Regex. You can fix this with the i flag so that /World/i would return true for both strings.

const str = 'Hello World';
const str2 = 'Hello world';
const regexp = /World/i;
console.log(regexp.test(str)); // true
console.log(regexp.test(str2)); // true

Special characters

^ : matches the starting position within the string

const regexp = /^hi/;
console.log(regexp.test('hi')); // true
console.log(regexp.test('hello')); // false

$: matches the end position within the string

const regexp = /bye$/;
console.log(regexp.test('goodbye'));// true
console.log(regexp.test('welcome'));// false

| :or operator. matches previous character or next character

const regexp = /(hi|hello) world/;
console.log(regexp.test('hi world'));// true
console.log(regexp.test('hello world'));// true
console.log(regexp.test('bye world'));// false

+ : matches the previous element one or more times

const regexp = /groo+t/;
console.log(regexp.test('groot'));// true
console.log(regexp.test('grooooot'));// true
console.log(regexp.test('grot'));// false

* : matches the previous element zero, one or more times

const regexp = /groo*t/;
console.log(regexp.test('groot'));// true
console.log(regexp.test('grooooot'));// true
console.log(regexp.test('grot'));// true

?: matches the previous element zero or one time

const regexp = /groo?t/;
console.log(regexp.test('groot'));// true
console.log(regexp.test('grooooot'));// false
console.log(regexp.test('grot'));// true

. : matches any single character

const regexp = /gr.t/;
console.log(regexp.test('grit'));// true
console.log(regexp.test('grot'));// true

[]: matches a range of characters

const regexp = /[cb]at/;
console.log(regexp.test('cat'));// true
console.log(regexp.test('bat'));// true
console.log(regexp.test('sat'));// false

{ x,y }: matches a specified number of occurrences of x up to y

const regexp = /gro{2,4}t/;
console.log(regexp.test('groooot'));// true
console.log(regexp.test('grot'));// false
console.log(regexp.test('groot'));// true

\ : used to escape a special character
(): groups characters

Resources:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp