Patterns & flags

Patterns for text

A string method such as includes() looks for exact text. It can answer: does this text contain cat? Sometimes you want to find a kind of text instead. For example:

• any hashtag, such as #JS or #web,
• anything shaped like a date, such as 2026-09-26,
• the word cat, written with capital or small letters.

A regular expression can find all of these. It is built into JavaScript, so it works in every modern browser.

This lesson uses what you know about strings, string methods, template literals, and Unicode & strings. It uses a few small pattern pieces, such as [A-Za-z] (any one letter) and \d (any one digit). The lessons after this one explain each kind of piece in full.

There are two ways to make a regex:

• A regex literal writes the pattern between two slashes, like /cat/i. The flags go after the last slash.
• The constructor, new RegExp(), builds a regex from strings, like new RegExp("cat", "i"). The first string is the pattern. The second string holds the flags.

Use a literal when you know the pattern while you write the code. Use new RegExp() when the pattern or the flags are stored in a variable.

The code below uses two tools. test(text) returns true if the pattern is found in the text, and false if not. .source gives the pattern as text, without the slashes or flags.

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);

Strings for new RegExp() have one extra rule. Inside a JavaScript string, a backslash \ starts a special code, such as \n for a line break. JavaScript reads the string first and uses up single backslashes. Only then does the regex see the text. So for \d+ (one or more digits), write two backslashes in the string:

• As a literal: /\d+/
• With the constructor: new RegExp("\\d+")

Text that comes from a user brings a second problem. In a pattern, some characters have a special meaning. A dot . means "any one character". To escape a character means to put a backslash in front of it, so it stands for itself. Then \. means a real dot.

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"));

• Line 2 builds a regex straight from "a.b". The dot means any character, so line 5 finds axb and prints true.
• Line 3 first puts a backslash in front of every special character. Now the dot means a real dot.
• So line 6 prints false for axb, and line 7 prints true for a.b.

With a literal, flags go right after the last slash: /cat/gi. With the constructor, they go in the second string: new RegExp("cat", "gi"). Each flag turns one option on. The order of the letters doesn't matter.

Each row of this table is one flag: its letter, its name, and what it changes.

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("-"));

Every line prints true, except the last one, which prints 3-5. A few lines need a word:

• Line 3: \n is a line break, so the text has two lines. With m, ^ can match the start of the second line.
• Line 5: ^.$ means "exactly one character". With u, one emoji counts as one character.
• Line 6: the v flag lets the pattern ask "is this a letter, and also one of A to F?"
• Lines 7 to 9: the sticky regex starts at index 4, where cat begins in "one cat".
• Lines 10 and 11: with d, JavaScript records where the digits 42 sit: from index 3 up to 5.

You don't need every flag yet. Later lessons use m with anchors (^ and $), v with character sets, and d with groups. For now, know what each letter turns on.

A regex has two methods that search text:

• test(text) answers yes or no. It returns true or false.
• exec(text) returns details about the first match: the matched text, where it starts, and more. If nothing matches, it returns null.

Both are simple, until the regex has the g or y flag. Then the regex keeps a number called lastIndex: the index where the next search starts. An index is a position in a string, counting from 0. Each search that finds a match moves lastIndex to just after the match. Step through the code and watch lastIndex change.

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 same thing happens with a different string. lastIndex belongs to the regex, not to the text.

1const word = /cat/g;2 3console.log(word.test("cat"));4console.log(word.test("cat"));5word.lastIndex = 0;6console.log(word.test("cat"));

• Line 3 finds cat and prints true. Now lastIndex is 3.
• Line 4 passes a new string, also "cat". But the search starts at index 3, the end of the text. So it prints false, and the failed search sets lastIndex back to 0.
• Line 5 sets lastIndex to 0 by hand, to make the fresh start clear. Line 6 prints true.

This table helps you pick a method. Start from what you need in the first column.

The g flag is not bad. The problem is that one regex object keeps lastIndex between calls. To avoid surprises, do one of these:

• Set lastIndex = 0 before a new search.
• Make a new regex inside the function that does the search.
• Use match() or replaceAll() with a g regex. They always start from index 0.

What exec() gives back

When exec() finds a match, it returns a match object. A match object is an array with a few extra properties:

• match[0] is the whole matched text.
• match[1], match[2], and so on hold the captured groups. A captured group is a part of the pattern inside round brackets ( ). The text it matched is saved on its own.
• match.index is the index where the match starts.
• match.input is the whole string that was searched.
• match.groups holds groups that have names.
• match.indices holds start and end positions. It only exists with the d flag.

In the code below, (?<tag>...) is a named group: a captured group with a name, here tag. Inside it, #[A-Za-z]+ means a # and then one or more letters.

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("-"));

• Line 5 prints #JS, the whole match.
• Line 6 prints 4, because # is at index 4 in "Use #JS today".
• Line 7 prints true: input is the same string as text.
• Line 8 prints the text of the group named tag: #JS.
• Lines 9 and 10 print 4-7. The match starts at index 4 and ends just before index 7.

Groups get their own lesson later. For now, know two things. groups gives names to parts of a match. indices tells you where each part sits in the text.

Some string methods take a regex. Each one gives back a different kind of result:

• search() gives the index of the first match, or -1 if there is none.
• match() gives an array of matched strings with g, or one match object without g.
• matchAll() gives a match object for every match.
• replace() and replaceAll() give a new string with the matches changed.
• split() cuts the string at each match and gives an array of the pieces.

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"));

• Line 3 prints 18, the index where chai starts.
• Line 4 prints both hashtags. The pattern #[A-Za-z]+ means a # and then one or more letters.
• Line 5 prints each hashtag with its index.
• Line 6 cuts the text at a comma or a semicolon. In the pattern, | means "or", and \s* takes any spaces after the mark.
• Line 7 turns the date around (the next part explains $3/$2/$1).
• Line 8 changes every cat to dog.

Special codes in the replacement text

The second argument of replace() is the replacement: the text that goes in place of each match. Inside it, a few codes have a special meaning:

• $& puts in the whole match.
• $1 puts in the first captured group, $2 the second, and so on.
• $<name> puts in the group with that name.

You can also pass a function instead of a string. JavaScript calls the function once for each match. The function returns the new text.

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()));

• Line 1 prints [cat]: $& puts the whole match inside the square brackets.
• Line 2 prints Lovelace, Ada: the two groups swap places.
• Line 3 prints topic:javascript: the group named name holds javascript.
• Line 4 prints FEE FI: the function turns each match into capital letters.

The tester below shows a pattern, its flags, some text, and the matches together. Type the pattern without the slashes. To stay safe, the tester:

• builds the regex inside try/catch, so a broken pattern shows an error message instead of breaking the page,
• limits how long the pattern and the text can be,
• refuses a repeat inside a repeat, such as (a+)+, because it can run very slowly,
• shows the matches as plain text, never as 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 the flags gi. Then try a broken pattern, such as a single (. If you add the d flag, each match in the list also shows its d positions.

Practical uses

Regexes show up in everyday web pages. You can use them to:

• give quick feedback while someone fills in a form,
• find hashtags or codes in text,
• change the format of dates that always have the same shape,
• highlight the words someone searched for.

A regex check in the browser only helps the user. It doesn't protect anything, because the user can change code in their own browser. The server must check the data again.

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"), "[$&]"));

• Line 5 checks that the email has the shape "text, @, text, dot, text". It prints true.
• Line 6 prints both hashtags.
• Line 7 changes the date to 26/09/2026.
• Line 8 builds a regex from term and wraps each js, in any case, in square brackets.

1const phone = "555-123-4567";2const postcode = "SW1A 1AA";3const messy = "  Asha   likes   tea  ";4const note = "New #JS lesson, #regex today";5 6console.log(/^\d{3}-\d{3}-\d{4}$/.test(phone));7console.log(/^[A-Z]{1,2}\d[A-Z\d]? \d[A-Z]{2}$/i.test(postcode));8console.log(messy.replace(/\s+/g, " ").trim());9console.log(note.match(/#[A-Za-z0-9_]+/g).join(", "));10 11const cards = "<p>one</p><p>two</p>";12console.log(cards.match(/<p>.*<\/p>/)[0]);13console.log(cards.match(/<p>.*?<\/p>/)[0]);

• Line 6 checks a phone number shape: three digits, a dash, three digits, a dash, four digits.
• Line 7 checks a UK postcode shape, with a space in the middle.
• Line 8 turns each run of spaces into one space. \s+ means one or more spaces. Then trim() removes the spaces at both ends.
• Line 9 collects every hashtag with match() and g.

Lines 12 and 13 show the difference. The greedy pattern on line 12 takes both paragraphs as one match: <p>one</p><p>two</p>. The lazy pattern on line 13 stops at the first </p>, so it gives <p>one</p>. Choose the narrowest pattern that fits your data. It is easier to read, and it is less likely to match text you didn't expect.

Common misconceptions

• "A regex understands what text means." It only follows the pattern. It can find text shaped like an email address. It can't tell whether that mailbox exists.
• "g only means find every match." It also makes test() and exec() move lastIndex on the regex object.
• "match() and matchAll() give the same thing." match() gives different results with and without g. matchAll() always gives one match object per match, and it needs g.
• "new RegExp() uses the same backslashes as a literal." Its pattern is a string first, so each backslash usually needs a second backslash.
• "A regex is always the shortest correct answer." Sometimes startsWith(), includes(), URL, Intl, or a parser is clearer and safer.

These four methods look alike. Each row says what one of them gives back and when to use it.

Key takeaways

• A regex is a RegExp object: a pattern you use to search strings.
• Use a literal for a pattern you know while writing the code. Use new RegExp() when the pattern is in a variable.
• Flags turn options on. With g or y, the regex also remembers lastIndex.
• exec() and matchAll() give match objects. The d flag adds start and end positions.
• Pick the string method that gives the result you need: an index, a list, pieces, or new text.

Up next: Character classes & sets.