FluffyBench

JavaScript regex: find a pattern, save the part you need

Need to pull order numbers from a page of text? A regular expression can find each order and save just the digits—here’s how patterns, groups, and flags fit together.

FluffyBench · 5 min read · Reviewed

What are the pattern and the text?

A regular expression, or regex, describes the shape of text you want to find. Think of the pattern as a stencil and your text as the page behind it: JavaScript looks for places where the characters fit.

Start with a pattern that doesn't vary: order-2048 finds that exact order number inside a message.

Pattern order-2048 above Your order-2048 is ready., with order-2048 highlighted as the match.

JavaScript regex example

The pattern is the rule; the highlighted text is the match. How we reviewed

Need to test a pattern against your own text?

FluffyBench's Regex Tester

See which text matches as you change the pattern.

How do you find any order number?

Most characters mean themselves; \d means a digit, and + means one or more. So order-\d+ finds order numbers without making you list every number in advance.

order-2048 does not match Ready: order-7; order-\d+ highlights order-7. a.b matches a-b; a\.b does not.

JavaScript regex example

A dot means any character except a line break; \. means a literal period.

How do choices, repeats, and boundaries work?

Square brackets choose one character from a set; a repeat symbol controls how many of the preceding character or group can fit. For example, [A-F]+ finds a run of letters from A through F.

[A-F] highlights F in FACE; [A-F]+ highlights FACE. ab*c matches ac, ab+c matches abbc, and ab?c matches abc.

JavaScript regex example

The repeat counts are *: zero or more; +: one or more; ?: zero or one.

To require the whole text to fit, add ^ at the start and $ at the end. These anchors mark positions; they don't consume letters.

order-\d+ finds order-2048 inside Your order-2048 is ready.; ^order-\d+$ finds no match in that message.

JavaScript regex example

Finding a number inside a message and checking an entire value are different jobs.

Why does a pattern grab too much text?

Repeats are greedy: they take as much text as they can while letting the rest of the pattern match. Adding ? after a repeat makes it lazy, so it takes the shortest span that works.

On the same text <b>hi</b>, <.*> highlights the whole string and <.*?> highlights the opening <b>.

JavaScript regex example

Both patterns need a closing >; the lazy repeat reaches the first one.

How do you save just the order number?

Put parentheses around the piece you want to save: order-(\d+) matches order-2048 and saves 2048 as Group 1. You don't need to split the match yourself.

order-(\d+) maps to full match order-2048 and Group 1, 2048. In (?:order)-(\d+), (?:order) saves nothing and the digits remain Group 1.

JavaScript regex example

(?:...) groups pieces without saving another capture; grouping the literal word order is optional here.

The full match still includes the word and hyphen. Captures give you extra pieces alongside it, numbered by the order of their opening parentheses. If you'll reuse several pieces, MDN’s groups reference also explains named groups.

What do flags change?

Flags are switches for how a pattern searches. In FluffyBench's Regex Tester, Ignore case (i) lets order-\d+ find ORDER-2048 too.

  1. Test text contains uppercase ORDER-2048 with no highlight.
    Test text contains uppercase ORDER-2048 with no highlight.
    Step 1. The text is ORDER-2048. The lowercase pattern order-\d+ doesn't match it yet.
    1. The text uses uppercase ORDER.
  2. Matches shows 0 matches and No matches found with Ignore case off.
    Matches shows 0 matches and No matches found with Ignore case off.
    Step 2. With Ignore case off, no match is found.
    1. No matches found: letter case differs.
  3. Pattern order-\d+ with Ignore case selected.
    Pattern order-\d+ with Ignore case selected.
    Step 3. Ignore case is the i flag: capitals and lowercase letters can match each other.
    1. The pattern stays order-\d+.
    2. Turn on Ignore case.
  4. Matches now shows one match, ORDER-2048, with its original uppercase letters.
    Matches now shows one match, ORDER-2048, with its original uppercase letters.
    Step 4. The same text now matches. The result keeps the letters as they were written.
    1. ORDER-2048 now matches.

The m flag lets anchors work at line boundaries; s lets a dot match a line break. FluffyBench labels them Each line and Dot matches new lines.

^order-\d+$ on Ready then order-2048: no match without m, the second line matches with m. a.b across a line break: no match without s, both lines match with s.

JavaScript regex example

Line anchors and dots have separate switches; changing one doesn’t change the other.

In JavaScript code, g lets repeated exec() calls move through successive matches. Without flags, each call starts its search from the beginning.

A first exec() call with /order-\d+/ finds order-7 in order-7; order-2048. Repeated exec() calls with g find order-7 and order-2048.

JavaScript regex example

FluffyBench's Regex Tester finds all matches automatically and has no g button.

Unicode and less common flags have their own details. For text with emoji or combined characters, the Unicode, UTF-8 and UTF-16 guide explains why a visible symbol isn't always one JavaScript text unit.

Doing it in FluffyBench Regex Tester

FluffyBench's Regex Tester helps you check what a pattern finds and which pieces it saves. A matching order and a near miss make the difference easy to see.

Here's the whole job, from entering your pattern to copying the saved number alongside its full match.

  1. FluffyBench Regex Tester with order-(\d+) in Regular expression pattern and all four options off.
    FluffyBench Regex Tester with order-(\d+) in Regular expression pattern and all four options off.
    Step 1. Enter order-(\d+) between the slashes. Leave the options off for this example.
    1. Enter order-(\d+) as the pattern.
  2. Test text contains order-2048 and order-ABC on separate lines; the numeric order is highlighted.
    Test text contains order-2048 and order-ABC on separate lines; the numeric order is highlighted.
    Step 2. Enter order-2048 and order-ABC on separate lines. The numeric order matches; the letters don't.
    1. Put a match and a near miss in Test text.
  3. The Test text and Matches tabs with Matches selected.
    The Test text and Matches tabs with Matches selected.
    Step 3. On a phone, open Matches to see the result. Short examples update live.
    1. Open Matches.
  4. One match: order-2048, with Group 1: 2048 and the Copy button.
    One match: order-2048, with Group 1: 2048 and the Copy button.
    Step 4. Check the full match and Group 1. Copy saves a numbered text list of matches and captures to your clipboard.
    1. The full match is order-2048.
    2. Group 1 is the saved number: 2048.
    3. Copy the match list.

When a pattern comes from another language, its syntax may differ. The MDN JavaScript regex guide is the reference for the JavaScript form; FluffyBench's Regex Tester page explains messages for invalid or long-running patterns.

Search FluffyBench