DEV Community

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

Posted on

4 1

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


Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more