Master JavaScript Regular Expressions: Syntax, Patterns, and Real-World Examples

Why Regular Expressions

Regular expressions are needed for complex string search and replace, validation, and are supported by many programming languages (JavaScript, Java, Perl, PHP, C#) and operating‑system commands (Linux/Unix, macOS, Windows PowerShell). Tools such as Fiddler, WebStorm, and Vim also use them, and this article focuses on JavaScript regex.

Basic Syntax

Definition

A regular expression is a formal way to describe a pattern of characters.

In JavaScript you can create a regex with the RegExp() constructor or a regex literal.

var pattern1 = /s$/;
var pattern2 = new RegExp('s$');

Both patterns match strings that end with the letter s.

Primitives vs Objects

Primitive values (boolean, number, string, null, undefined) are preferred over wrapper objects. For example:

var s = new String('hello');
typeof 'hello'; // string
typeof s; // object

Two distinct String objects are never strictly equal.

var s1 = new String('hello');
var s2 = new String('hello');
s1 === s2; // false

ES3 vs ES5 RegExp Literals

In ES5 each evaluation of a regex literal creates a new RegExp object, while ES3 reuses the same object. Example:

function getRE() {
  var re = /[a-z]/;
  re.foo = 'bar';
  return re;
}
var reg = getRE();
var re2 = getRE();
console.log(reg === re2); // false in ES5, true in ES3
reg.foo = 'baz';
console.log(re2.foo); // 'bar' in ES5, 'baz' in ES3

Regex Building Blocks

Literal Characters

Character

Matches

Letter or digit

Itself

\t

Tab (\u0009)

\n

Line feed (\u000A)

\v

Vertical tab (\u000B)

\f

Form feed (\u000C)

\r

Carriage return (\u000D)

\xnn

Latin character with hex code nn

\uxxxx

Unicode character with hex code xxxx

\cX

Control character ^X

Character Classes

Class

Matches

[...]

Any character inside the brackets

[^...]

Any character not inside the brackets

.

Any character except line terminators

\w

Word characters [a-zA-Z0-9_]

\W

Non‑word characters

\s

Any whitespace

\S

Any non‑whitespace

\d

Digits [0-9]

\D

Non‑digits

[\b]

Backspace literal

Quantifiers

Quantifier

Matches

{n,m}

At least n but at most m times

{n,}

n or more times

{n}

Exactly n times

?

0 or 1 time (optional)

+

1 or more times

*

0 or more times

JavaScript quantifiers are greedy by default; add a trailing ? for non‑greedy matching.

Grouping and References

Construct

Matches

|

Alternation (left or right sub‑expression)

(...)

Capturing group

(?:...)

Non‑capturing group

\n

Backreference to the nth captured group

Anchors

Anchor

Matches

^

Start of string (or line in multiline mode)

$

End of string (or line in multiline mode)

\b

Word boundary

\B

Non‑word boundary

(?=p)

Positive lookahead

(?!p)

Negative lookahead

Modifiers

Modifier

Effect

i

Case‑insensitive matching

g

Global search (find all matches)

m

Multiline mode (affects ^ and $)

String Methods for Pattern Matching

Method

Purpose

String.search()

Returns index of first match or –1

String.replace()

Searches and replaces; with g replaces all occurrences

String.match()

Returns array of matches; with g returns all

String.split()

Splits string into array using regex or literal separator

RegExp Object

Constructor

var pattern = new RegExp(arg1, arg2);

arg1

is the pattern text; arg2 (optional) specifies modifiers g, i, m.

Properties

Property

Meaning

source

Pattern text (read‑only)

global

Boolean indicating g flag

ignoreCase

Boolean indicating i flag

multiline

Boolean indicating m flag

lastIndex

Index at which to start the next match when g is set

Methods

Method

Purpose

exec()

Executes a search and returns an array or null test()

Returns true if pattern matches

toString()

Converts the RegExp to a string

When g is used, lastIndex advances after each match, allowing repeated exec() or test() calls to iterate through a string.

Practical Examples

Matching URLs

A simple URL pattern:

var patternURL = /https?:\/\/[^/]+\/[-a-z0-9_:@&?=+,.!\/~*%$]*/i;

More precise version with protocol, hostname, optional port, and path:

var patternURL = /^https?:\/\/([^/:]+)(:(\d+))?(\/.*)?$/i;

Matching HTML Tags

To match an HTML tag while handling quoted attributes:

var pattern = /<("[^"]*"|'[^']*'|[^'">])*>/;

Matching Quoted Strings

Pattern that handles escaped quotes: /"(\\.|[^\"])*"/ Alternative that works for both single and double quotes:

/(["'])(?:\\.|[^\1\\])*\1/

Conclusion

This overview covers the most common JavaScript regular‑expression syntax, object properties, methods, and several real‑world patterns. For deeper study, refer to "Mastering Regular Expressions" (Chapter 10) and the classic "Regular Expression Cookbook".