Over a million developers have joined DZone.

JavaScript: an overview of the regular expression API

DZone's Guide to

JavaScript: an overview of the regular expression API

· Mobile Zone ·
Free Resource
This post gives an overview of the JavaScript API for regular expressions. It does not, however, go into details about regular expression syntax, so you should already be familiar with it.

Regular expression syntax

Listed below are constructs that are hard to remember (not listed are things like * for repetition, capturing groups, etc.).
  • Escaping: the backslash escapes special characters, including the slash in regular expression literals (see below) and the backslash itself.
    • If you specify a regular expression in a string you must escape twice: once for the string literal, once for the regular expression. For example, to just match a backslash, the string literal becomes "\\\\".
    • The backslash is also used for some special matching operators (see below).
  • Non-capturing group: (?:x) works like a capturing group for delineating the subexpression x, but does not return matches and thus does not have a group number.
  • Positive look-ahead: x(?=y) means that x matches only if it is followed by y. y itself is not counted as part of the regular expression.
  • Negative look-ahead: x(?!y) the negated version of the previous construct: x must not be followed by y.
  • Repetitions: {n} matches exactly n times, {n,} matches at least n times, {n,m} matches at least n, at most m times.
  • Control characters: \cX matches Ctrl-X (for any control character X), \n matches a linefeed, \r matches a carriage return.
  • Back reference: \n refers back to group n and matches its contents again.


 > /(a+)b\1/.test("aaba")
> /^(a+)b\1/.test("aaba")
> var tagName = /<([^>]+)>[^<]*<\/\1>/;
> tagName.exec("<b>bold</b>")[1]
> tagName.exec("<strong>text</strong>")[1]
> tagName.exec("<strong>text</stron>")

Create a regular expression


    > /abc/.test("ABC")
> /abc/i.test("ABC")

Simple matching

Use the following methods to find out whether a regular expression matches a string.
  • regex.test([str]): returns a boolean indicating whether the match succeeded. If the argument is omitted, the last input string is used again.
  • str.search(regex): returns the index where a match was found, -1 otherwise.


> var regex = /^(a+)b\1$/;
> regex.test("aabaa")
> regex.test("aaba")

Capture groups, optionally repeatedly

Find all matches for a given regular expression in an input string. The following regular expression method and string method are largely equivalent.
  • var matchData = regex.exec([str])
    Missing parameter means: reuse argument from last invocation
  • var matchData = str.match(regex)

regex: has the following properties.

  • Flags: boolean values indicating what flags are set.
    • global: is flag g set?
    • ignoreCase: is flag i set?
    • multiline: is flag m set?
  • Data about the last match:
    • source: the complete input string.
    • lastIndex: the index where to continue the search next time.
matchData: null if there wasn’t a match. Otherwise, an array and two additional properties.
  • Properties:
    • input: The complete input string.
    • index: The index where the match was found.
  • Array: whose length is the number of capturing groups plus one.
    • 0: The match for the complete regular expression (group 0, if you will).
    • n ≥ 1: The capture of group n.

Invoke once:
Flag global is not set.
> var regex = /a(b+)a/;
> regex.exec("_abbba_aba_")
[ 'abbba'
, 'bbb'
, index: 1
, input: '_abbba_aba_'
> regex.lastIndex

Invoke repeatedly: Flag global is set.
> var regex = /a(b+)a/g;
> regex.exec("_abbba_aba_")
[ 'abbba'
, 'bbb'
, index: 1
, input: '_abbba_aba_'
> regex.lastIndex
> regex.exec()
[ 'aba'
, 'b'
, index: 7
, input: '_abbba_aba_'
> regex.exec()

Loop over matches.
 var regex = /a(b+)a/g;
var str = "_abbba_aba_";
while(true) {
var match = regex.exec(str);
if (!match) break;


Search and replace

Invocation: str.replace(search, replacement).
  • search:
    • either a string (to be found literally, has no groups)
    • or a regular expression.
  • replacement:
    • either a string describing how to replace what has been found
    • or a function that computes a replacement, given matching information.
Replacement is a string. The dollar sign $ is used to indicate special replacement directives:
  • $$ inserts a dollar sign $.
  • $& inserts the complete match.
  • $` inserts the text before the match.
  • $' inserts the text after the match.
  • $n inserts group n from the match. n must be at least 1, $0 has no special meaning.


    > "a1b_c1d".replace("1", "[$`-$&-$']")
> "a1b_c1d".replace(/1/, "[$`-$&-$']")
> "a1b_c1d".replace(/1/g, "[$`-$&-$']")

Replacement is a function. The replacement function has the following signature.
function(completeMatch, group_1, ..., group_n, offset, inputStr) { ... }
completeMatch is the same as $& above, offset indicates where the match was found, and inputStr is what is being matched against. Thus, the special variable arguments inside the function starts with the same data as the result of the exec() method.


    > "I bought 3 apples and 5 oranges".replace(
function(match) { return 2 * match; })
'I bought 6 apples and 10 oranges'

Splitting strings

str.split(separator, [limit])

In a string, find the substrings between the separators and return them in an array.

  • separator can be
    • a string: separators are matched verbatim
    • a regular expression: for more flexible separator matching. Many JavaScript implementations include the first capturing group in the result array, if there is one.
  • limit optionally specifies a maximum length for the returned array. A value less than 0 allows arbitrary lengths.


> "aaa*a*".split("a*")
[ 'aa', '', '' ]
> "aaa*a*".split(/a*/)
[ '', '*', '*' ]
> "aaa*a*".split(/(a*)/)
[ '', 'aaa', '*', 'a', '*' ]

  • ECMAScript Language Specification, 5th edition.
  • Regular Expressions at the Mozilla Developer Network Doc Cente

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}