DEV Community

Cover image for Regular Expressions Basics in JavaScript
Sharique Siddiqui
Sharique Siddiqui

Posted on

Regular Expressions Basics in JavaScript

#javascript #intermediate #webdev #frontend

Regular Expressions (or regex) are powerful tools used to find patterns in text. They enable developers to search, match, validate, and manipulate strings efficiently. Whether you want to validate an email, parse data, or replace substrings, understanding regex fundamentals is a valuable skill.

What is a Regular Expression?

A Regular Expression is a sequence of characters that forms a search pattern. In JavaScript, regex can be created in two ways:

Regex literal syntax: 
js
const regex = /pattern/flags;
Enter fullscreen mode Exit fullscreen mode

Using the RegExp constructor:

js
const regex = new RegExp('pattern', 'flags');
Enter fullscreen mode Exit fullscreen mode

The first option compiles the regex when your script loads, while the constructor allows dynamic pattern creation.

Common Regex Flags

Flags modify the behavior of the pattern matching:

  • g — Global search (find all matches)
  • i — Case-insensitive search
  • m — Multi-line search

Example with flags 

js
const regex = /hello/gi;
const text = 'Hello hello HELLO';
console.log(text.match(regex)); // ['Hello', 'hello', 'HELLO']
Enter fullscreen mode Exit fullscreen mode

Basic Regex Patterns

  • Literal characters: match exact text, like /cat/ matches "cat"
  • Metacharacters: special symbols used to build complex criteria
Examples:
  • . matches any single character except newline
  • \d matches any digit (0-9)
  • \w matches any alphanumeric character (letters, digits, underscore)

  • \s matches any whitespace character (spaces, tabs)

  • Quantifiers: specify number of occurrences

Examples:
  • + matches one or more times
  • * matches zero or more times
  • {n} matches exactly n times

Common Operations Using Regular Expressions

JavaScript provides several methods for working with regex patterns:

  • test() — Tests if the pattern exists in the string, returns true/false 
js
const regex = /dog/;
console.log(regex.test('The dog is cute')); // true
Enter fullscreen mode Exit fullscreen mode
  • exec() — Returns detailed match result or null 
js
const regex = /dog/;
console.log(regex.exec('The dog is cute'));
// ["dog", index: 4, input: "The dog is cute", groups: undefined]
Enter fullscreen mode Exit fullscreen mode
String methods with regex:
  • .match() — Returns array of matches
  • .replace() — Replaces matched substrings
  • .search() — Returns index of first match or -1
  • .split() — Splits string using regex as delimiter

Real World Example: Email Validation

A simple regex email validation function:

js
function validateEmail(email) {
  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailPattern.test(email);
}

console.log(validateEmail('user@example.com')); // true
console.log(validateEmail('bad-email'));        // false
Enter fullscreen mode Exit fullscreen mode

Final Thoughts

Regex Concept Description Example
Literal match Matches exact characters /cat/
Flags Modify matching behavior gi (global, case-insensitive)
Character classes Match sets of characters \d, \w, \s
Quantifiers Specify number of occurrences +, *, {3}, {2,5}
Methods Test and manipulate strings test(), match(), replace()

By mastering regular expressions basics, you gain a versatile tool to handle text processing tasks effortlessly in your JavaScript projects.

Stay tuned for more insights as you continue your journey into the world of web development!

Check out theYouTubePlaylist for great JavaScript content for basic to advanced topics.

Please Do Subscribe Our YouTube Channel for clearing programming concept and much more ...CodenCloud

Top comments (0)