Patterns & flags

Patterns for text

Strings answer exact questions: does this text include cat? Regular expressions answer pattern questions: is there a hashtag, a date-shaped piece, or a word no matter how it is capitalized? They are part of JavaScript, so every modern browser can use them with ordinary strings.

This lesson builds on strings, string methods, template literals, and Unicode & strings. We will use tiny character patterns like [A-Za-z] and \d, but the next lessons teach character classes, quantifiers, groups, anchors, and performance in depth.

JavaScript has two creation forms. A regex literal puts the pattern between slashes, like /cat/i. The constructor receives strings, like new RegExp("cat", "i"). Use a literal when the pattern is fixed. Use the constructor when the pattern or flags come from a variable.

1const literal = /cat/i;Run2const animal = "dog";3const fromText = new RegExp(animal, "i");4 5console.log(literal.test("CAT"));6console.log(fromText.test("hot dog"));7console.log(fromText.source);

Constructor strings have one extra rule: the JavaScript string parser sees backslashes before the regex parser does. A digit pattern is /\d+/ as a literal, but new RegExp("\\d+") as a constructor string.

1const userText = "a.b";2const unsafe = new RegExp(userText);3const safe = new RegExp(userText.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));4 5console.log(unsafe.test("axb"));6console.log(safe.test("axb"));7console.log(safe.test("a.b"));

Flags sit after a literal, /cat/gi, or in the constructor’s second argument, new RegExp("cat", "gi"). Think of them as switches on the regex object.

1console.log(/cat/g.test("cat cat"));2console.log(/cat/i.test("CAT"));3console.log(/^cat/m.test("dog\ncat"));4console.log(/a.b/s.test("a\nb"));5console.log(/^.$/u.test("😀"));6console.log(/^[\p{Letter}&&[A-F]]$/v.test("D"));7const sticky = /cat/y;8sticky.lastIndex = 4;9console.log(sticky.test("one cat"));10const withIndices = /ID-(\d+)/d.exec("ID-42");11console.log(withIndices.indices[1].join("-"));

This is only the overview. m connects to anchors, v connects to Unicode set operations, and d becomes more powerful when you learn groups. Here you just need to recognize what each switch changes.

Use test() for a yes/no answer. Use exec() when you need details about the match. Both methods are simple until you reuse a regex with g or y. Those flags make the regex remember lastIndex, the next place to search.

1const word = /cat/g;Run2const text = "cat cat";3 4console.log(word.test(text));5console.log(word.lastIndex);6console.log(word.test(text));7console.log(word.lastIndex);8console.log(word.test(text));9console.log(word.lastIndex);10word.lastIndex = 0;11console.log(word.test(text));

The trap is not that g is bad. It is that a single regex object can carry state between calls. Reset lastIndex, create a fresh regex, or use a string method that manages the iteration for you.

Match objects and indices

exec() returns null when nothing matches. When it succeeds, it returns an array-like match object. match[0] is the full match, later entries are captured groups, index is the start position, and input is the original string.

1const pattern = /(?<tag>#[A-Za-z]+)/d;2const text = "Use #JS today";3const match = pattern.exec(text);4 5console.log(match[0]);6console.log(match.index);7console.log(match.input === text);8console.log(match.groups.tag);9console.log(match.indices[0].join("-"));10console.log(match.indices.groups.tag.join("-"));

The named group and d flag are previews. Groups get their own lesson; this lesson only needs you to know that groups can name captured text and indices can show where the full match and captures live in the input.

Regexes become practical through string methods. search returns an index. match returns simple matches or one detailed match. matchAll gives every detailed match. replace, replaceAll, and split transform text.

1const text = "Order 2026-09-26: chai, cake. Tags: #JS #web";2 3console.log(text.search(/chai/i));4console.log(text.match(/#[A-Za-z]+/g).join(", "));5console.log([...text.matchAll(/#[A-Za-z]+/g)].map((m) => `${m[0]}@${m.index}`).join(" | "));6console.log("red, green; blue".split(/,\s*|;\s*/).join("|"));7console.log(text.replace(/(\d{4})-(\d{2})-(\d{2})/, "$3/$2/$1"));8console.log("cat cat".replaceAll(/cat/g, "dog"));

Replacement patterns

Replacement strings have their own mini-language. $& means the whole match, $1 means the first captured group, $<name> means a named group, and a function replacer can compute the replacement in JavaScript.

1console.log("cat".replace(/cat/, "[$&]"));2console.log("Ada Lovelace".replace(/([A-Za-z]+) ([A-Za-z]+)/, "$2, $1"));3console.log("#javascript".replace(/#(?<name>[a-z]+)/, "topic:$<name>"));4console.log("fee fi".replace(/f[a-z]+/g, (match) => match.toUpperCase()));

A tester helps you connect the pattern, flags, text, and match result. This one builds a RegExp inside try/catch, caps input length, refuses obvious slow nested quantifiers, and renders highlights as React text instead of HTML.

1const pattern = new RegExp("#[A-Za-z]+", "gi");2const text = "Learning #JavaScript and #regex";3const matches = [...text.matchAll(pattern)].map((match) => ({4  text: match[0],5  index: match.index,6}));7 8console.log(matches.map((match) => `${match.text}@${match.index}`).join(", "));

Try #[A-Za-z]+ with gi, then try an invalid pattern such as (. If you add d, the match list also shows index spans from the regex engine.

Practical uses

Regex basics show up in everyday UI work: quick form feedback, finding hashtags or codes, reformatting date strings with known shapes, and highlighting search terms. Keep validation honest: client-side regex is helpful feedback, not a trusted security boundary.

1const email = "ada@example.com";2const text = "Learning #JavaScript and #regex on 2026-09-26";3const term = "js";4 5console.log(/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email));6console.log(text.match(/#[A-Za-z]+/g).join(", "));7console.log(text.replace(/(\d{4})-(\d{2})-(\d{2})/, "$3/$2/$1"));8console.log("JS regex basics".replace(new RegExp(term, "gi"), "[$&]"));

Common misconceptions

• “A regex understands meaning.” It only follows the pattern. It can find email-shaped text; it cannot prove the mailbox exists.
• “g only means find all.” It also makes test() and exec() advance lastIndex on the regex object.
• “match and matchAll are interchangeable.” match() changes shape with g; matchAll() gives detailed objects for every match and requires g.
• “The constructor uses the same escaping as a literal.” Constructor patterns are strings first, so backslashes often need another backslash.
• “Regex is always the shortest correct solution.” Sometimes startsWith, includes, URL, Intl, or a parser is clearer and safer.

Key takeaways

• A regex is a RegExp pattern object used with strings.
• Use literals for fixed patterns and new RegExp() for variable patterns.
• Flags change behavior; g and y also make lastIndex matter.
• exec() and matchAll() expose match objects; d adds index spans.
• Choose the string method that matches the result you need: find, list, split, or replace.

Up next: Character classes & sets.