DEV Community

Cover image for Regular Expressions(RegEx) Basics
Jenuel Oras Ganawed
Jenuel Oras Ganawed

Posted on

Regular Expressions(RegEx) Basics

In JavaScript, a Regular Expression (RegEx) is an object that describes a sequence of characters used for defining a search pattern.

This post will go over some basic stuff about regular expressions. Regular Expressions enable us to easily find patterns in a string.

basic use - Let us find the word 'apple' in the string

const text = "This is an apple";
const regex = /apple/;

const result = text.match(regex)
console.log(result)

/**
output:
[
  0: "apple"
  groups: undefined
  index: 11
  input: "this is an apple"
  length: 1
]
*/
Enter fullscreen mode Exit fullscreen mode

Find Many String

We are going to use the previous example and were going to add a global option to the regex. This will create an array of all occurrences. Note, this is case sensitive.

Using match

const text = 'this is an apple and another apple or APPLe';
const regex = /apple/g;

console.log(text.match(regex));
/**
Output:
['apple', 'apple']
*/
Enter fullscreen mode Exit fullscreen mode

Using matchAll

const text = 'this is an apple and another apple or APPLe';
const regex = /apple/g;

console.log([...text.match(regex)]);
/**
Output:
[
  0: ['apple', index: 11, input: 'this is an apple and another apple or APPLe', groups: undefined]
  1: ['apple', index: 29, input: 'this is an apple and another apple or APPLe', groups: undefined]
]
*/
Enter fullscreen mode Exit fullscreen mode

How to Set Case Insensitive

We are going to add the i option to the modifier to make the pattern case insensitive.

const text = 'this is an apple and another apple or APPLe';
const regex = /apple/gi;

console.log([...text.matchAll(regex)])
/**
[
  0: ['apple', index: 11, input: 'this is an apple and another apple or APPLe', groups: undefined]
  1: ['apple', index: 29, input: 'this is an apple and another apple or APPLe', groups: undefined]
  2: ['APPLe', index: 38, input: 'this is an apple and another apple or APPLe', groups: undefined]
]
*/
Enter fullscreen mode Exit fullscreen mode

Find All Capital Letters

const text = 'Make Arnold Reverse the Video about Eternal Latency';
const regex = /[A-Z]/g; // we still need to use the global option

console.log(text.match(regex))
/**
Output:
['M', 'A', 'R', 'V', 'E', 'L']
*/
Enter fullscreen mode Exit fullscreen mode

We can also set our regex to ignore the letter M.

const text = 'Make Arnold Reverse the Video about Eternal Latency';
const regex = /(?![M])[A-Z]/g;

console.log(text.match(regex));
/**
    Output:
    ['A', 'R', 'V', 'E', 'L']
 */
Enter fullscreen mode Exit fullscreen mode

How To Find Digits in a string

const text = 'We have a sugar of 200g, a lemon of 1kg and 1000kg of water.';
const regex = /\d/g; // using \d to match any digit

console.log(text.match(regex));
/**
    Output:
    ['2', '0', '0', '1', '1', '0', '0', '0']
 */
Enter fullscreen mode Exit fullscreen mode

Get FULL numbers by using the + option.

const text = 'We have a sugar of 200g, a lemon of 1kg and 1000kg of water.';
const regex = /\d+/g; // using \d+ find full number

console.log(text.match(regex));
/**
    Output:
    ['200', '1', '1000']
 */
Enter fullscreen mode Exit fullscreen mode

Using Replace Function

We're going to find and replace an item. In this example, we're going to find capital letters and replace them with @.

const text = 'I have 1 item.';
const regex = /\d/g; // using \d+ find full number

console.log(text.replace(regex, '@'));
/**
    Output:
    I have @ item.
 */
Enter fullscreen mode Exit fullscreen mode

Other samples:

// replace all capital letters
const result = "This is A New Item".replace(/[A-Z]/g, '@');
console.log(result); // @his is @ @ew @tem

// replace full numbers
const result = "This is A 200kg New Item with 0% capacity".replace(/\d+/g, '@');
console.log(result); // This is A @kg New Item with @% capacity

// replace all letter a
const result = "This is A 200kg New Item with 0% capacity".replace(/[a]/gi, '@');
console.log(result); // This is @ 200kg New Item with 0% c@p@city
Enter fullscreen mode Exit fullscreen mode

Using Search and Exec function

Search will give us the index position of the first match.

const result = "We are the World".search(/the/g);
console.log(result); // 7
Enter fullscreen mode Exit fullscreen mode

Exec on the other hand is like a match but with the purpose to be used in a loop. returns an array of captures or null.

const text = "We are the people of the world";
const regex = /the/g;
let arr;
while ((arr = regex.exec(text)) !== null) {
    console.log(`Found ${arr[0]} in index ${arr.index}.`)
}

/**
    Output:
    Found the in index 7.
    Found the in index 21.
 */
Enter fullscreen mode Exit fullscreen mode

Use of test function

The test Returns a Boolean value that indicates whether or not a pattern exists in a searched string.

example validating an email address(This is a complicated regex but the main point here is how to use the test function):

const regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

console.log(regex.test('brojenuel@123.890')); // false
console.log(regex.test('jenuelganawed936@gmail.com')); // true
Enter fullscreen mode Exit fullscreen mode

other example:

const text = "This is just a text";

console.log(/a/.test(text)); // true - because a exist on the text
console.log(/\d/.test(text)); // false - because no digits found
console.log(/[A-Z]/.test(text)); // true - because theres a capital letter
console.log(/A/i.test(text)); // true - because letter a/A exist on the text
Enter fullscreen mode Exit fullscreen mode

Give Me Coffee

I create a post like this.
If you like to give me money, I will gladly accept 😁👍.

check out my latest personal project:
Believers Sword App

Follow me:
Instgram
Facebook
Youtube


Discussion (0)