DEV Community

楊東霖
楊東霖

Posted on • Originally published at devplaybook.cc

Regex Tester JavaScript — Test Regular Expressions Online

Regex Tester JavaScript

A regex tester for JavaScript lets you write and validate regular expressions with live feedback — no console.log loops, no Node.js terminal, no guessing. Paste your pattern and test string, and see exactly which parts match, which groups capture, and where the regex fails.

This guide covers JavaScript regex syntax, the most useful patterns, and how to avoid the common traps that make regex debugging painful.


JavaScript Regex Basics

JavaScript has built-in regular expression support via the RegExp object and regex literals:

// Regex literal syntax (preferred)
const pattern = /hello/i;

// Constructor syntax (for dynamic patterns)
const term = "hello";
const dynamic = new RegExp(term, "i");

// Test if a string matches
console.log(pattern.test("Hello World")); // true

// Find all matches
console.log("Hello hello".match(/hello/gi)); // ["Hello", "hello"]
Enter fullscreen mode Exit fullscreen mode

Regex Flags in JavaScript

Flags change how the pattern behaves:

Flag Name Effect
g Global Find all matches, not just the first
i Case-insensitive A matches a
m Multiline ^ and $ match line starts/ends, not just string start/end
s DotAll . matches newlines (ES2018+)
u Unicode Enables full Unicode matching
d Indices match() returns indices for each capture group (ES2022+)
// Without multiline: only matches at string start
/^\w+/.test("first line\nsecond line"); // true (matches "first")

// With multiline: matches at each line start
"first\nsecond".match(/^\w+/gm); // ["first", "second"]
Enter fullscreen mode Exit fullscreen mode

Essential JavaScript Regex Patterns

Email Validation

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

emailRegex.test("user@example.com");  // true
emailRegex.test("not-an-email");       // false
Enter fullscreen mode Exit fullscreen mode

Note: A truly RFC-compliant email regex is extremely complex. For production, use a library or server-side validation after a basic format check.

URL Extraction

const urlRegex = /https?:\/\/[^\s<>"{}|\\^`\[\]]+/g;

const text = "Visit https://devplaybook.cc or https://example.com";
const urls = text.match(urlRegex);
// ["https://devplaybook.cc", "https://example.com"]
Enter fullscreen mode Exit fullscreen mode

Named Capture Groups

const dateRegex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;

const match = "2026-03-24".match(dateRegex);
if (match) {
  const { year, month, day } = match.groups;
  console.log(year, month, day); // "2026" "03" "24"
}
Enter fullscreen mode Exit fullscreen mode

Named groups make your regex self-documenting and easier to maintain.

Phone Number Normalization

// Match US phone numbers in various formats
const phoneRegex = /^\(?(\d{3})\)?[-.\s]?(\d{3})[-.\s]?(\d{4})$/;

const formats = [
  "(415) 555-1234",
  "415-555-1234",
  "415.555.1234",
  "4155551234",
];

formats.forEach(p => console.log(phoneRegex.test(p))); // all true

// Extract and normalize
"(415) 555-1234".replace(phoneRegex, "$1-$2-$3"); // "415-555-1234"
Enter fullscreen mode Exit fullscreen mode

Password Strength Check

// Require: 8+ chars, one uppercase, one lowercase, one digit, one special char
const strongPassword = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

strongPassword.test("Weak1!");        // false (too short)
strongPassword.test("Strong1!");      // false (no special except !)
strongPassword.test("Str0ng@Pass");   // true
Enter fullscreen mode Exit fullscreen mode

The Three Main Regex Methods

test() — Boolean Check

const hasNumbers = /\d/.test("abc123"); // true
Enter fullscreen mode Exit fullscreen mode

Use when you only need to know if a pattern exists. Fastest option.

match() — Extract Matches

// Without 'g' flag: returns first match with groups
"2026-03-24".match(/(\d{4})-(\d{2})-(\d{2})/);
// ["2026-03-24", "2026", "03", "24", index: 0, ...]

// With 'g' flag: returns all matches, no groups
"cat bat sat".match(/[cbsr]at/g);
// ["cat", "bat", "sat"]
Enter fullscreen mode Exit fullscreen mode

replace() — Transform Strings

// Replace first match
"hello world".replace(/\w+/, "FIRST"); // "FIRST world"

// Replace all matches (use /g or replaceAll)
"hello world".replace(/\w+/g, s => s.toUpperCase()); // "HELLO WORLD"

// Use captured groups in replacement
"John Smith".replace(/(\w+)\s(\w+)/, "$2, $1"); // "Smith, John"
Enter fullscreen mode Exit fullscreen mode

Common Regex Mistakes in JavaScript

Mistake 1: Forgetting the g Flag with exec()

With the global flag, exec() advances lastIndex on each call:

const re = /\d+/g;
const str = "abc 123 def 456";

let match;
while ((match = re.exec(str)) !== null) {
  console.log(match[0]); // "123", then "456"
}
Enter fullscreen mode Exit fullscreen mode

Without the g flag, exec() always returns the first match.

Mistake 2: Escaping Special Characters

Inside a regex, . matches any character, not a literal dot. Escape with \:

// WRONG: "3.14" matches "3X14", "3a14", etc.
/3.14/.test("3x14"); // true

// CORRECT: only matches literal "3.14"
/3\.14/.test("3x14"); // false
/3\.14/.test("3.14"); // true
Enter fullscreen mode Exit fullscreen mode

Mistake 3: Using new RegExp() Without Escaping Backslashes

In a string, \d becomes d before the regex engine sees it. Double the backslash:

// WRONG: \d is treated as just "d"
new RegExp("\d+");

// CORRECT: \\d becomes \d in the regex
new RegExp("\\d+");
Enter fullscreen mode Exit fullscreen mode

Free Regex Testers for JavaScript

DevPlaybook Regex Playground — Test patterns against multiline strings with live match highlighting and capture group display.

Regex Tester Pro — Advanced version with flag toggles, replacement preview, and pattern explanation.

AI Regex Explainer — Paste any complex regex and get a plain-English explanation of what each part does.

For learning regex patterns, see also: 10 Essential Regex Patterns Every Developer Should Know.


Regex Cheatsheet

Character Classes:
  \d    digit (0-9)
  \w    word char (a-z, A-Z, 0-9, _)
  \s    whitespace
  \D    non-digit
  \W    non-word
  \S    non-whitespace
  [abc] any of a, b, c
  [^abc] not a, b, or c

Quantifiers:
  *     0 or more
  +     1 or more
  ?     0 or 1
  {n}   exactly n
  {n,}  n or more
  {n,m} between n and m
  *?    lazy (match as few as possible)

Anchors:
  ^     start of string (or line with m flag)
  $     end of string (or line with m flag)
  \b    word boundary
  \B    non-word boundary

Groups:
  (abc)       capturing group
  (?:abc)     non-capturing group
  (?<name>…)  named capturing group
  (?=abc)     positive lookahead
  (?!abc)     negative lookahead
  (?<=abc)    positive lookbehind (ES2018+)
  (?<!abc)    negative lookbehind (ES2018+)
Enter fullscreen mode Exit fullscreen mode

Summary

A regex tester for JavaScript speeds up pattern development by giving you immediate visual feedback. Key takeaways:

  • Use named capture groups for readable, maintainable patterns
  • Always escape literal special characters like . and +
  • Check your flags — g, m, and s change behavior significantly
  • Use test() for boolean checks, match() to extract values, replace() to transform

Test your patterns in the DevPlaybook Regex Playground before shipping to production.


Speed Up Your Development Workflow

The Developer Productivity Bundle includes 51 VSCode snippets — covering JavaScript, TypeScript, React, and Python patterns — so you spend less time writing boilerplate and more time solving problems. $29, one-time.


Level Up Your Dev Workflow

Found this useful? Explore DevPlaybook — cheat sheets, tool comparisons, and hands-on guides for modern developers.

🛒 Get the DevToolkit Starter Kit on Gumroad — 40+ browser-based dev tools, source code + deployment guide included.

Top comments (0)