Home » Tutorial » Regular expressions in JavaScript

Regular expressions methods

Ilya Kantor
  1. String methods
    1. str.match(regexp) {#str-match}
    2. str.search(regexp) {#str-search}
    3. str.split(regexp|substr, limit) {#str-split}
    4. str.replace(regexp|substr, newSubStr|function)
  2. RegExp methods
    1. regexp.exec(str) {#regexp-exec}
    2. regexp.test(str) {#regexp-test}
  3. Summary

In JavaScript regular expressions are represented by RegExp class and integrated into String.

String methods

str.match(regexp) {#str-match}

For a global regexp returns array of matches:

alert( "12 34".match( /\d+/g ) )  // 12, 34
  • For a regexp without g flag - returns the first match and groups: 

    alert( "12 34".match( /(\d)(\d)/ ) )  // 12, 1, 2

    • The str.match is unable to find all matches with groups. There is another method for that, regexp.exec, given below.

    Another subtle feature is that when there are no results, match returns null, not an empty array.

    Keeping that in mind helps to evade errors like below:

    var matches = "lala".match( /\d/ )

alert(matches.length) // error! match is null, there is no length

    Returns the index of first match, or -1 if not found:

    alert( "test12".search( /\d+/ ) )  // 4

    Can be used to test a string for a match:

    var str = prompt("Enter a string", 'test12')

if (str.search(/\d/) != -1) {
  alert("The string has numbers")
} else {
  alert("The string has no numbers")
}

    str.split(regexp|substr, limit) {#str-split}

    Splits a string into array by given substr or regexp.

    For example:

    alert( '12-34-56'.split('-') ) // 12, 34, 56

    We can also use a regexp:

    alert( 'Hello \n world'.split( /\s+/ ) ) // Hello, world

    If there is an optional second argument limit, the array is cut at limit length:

    alert( '12-34-56'.split('-', *!*2*/!*) ) // 12, 34

    So, the part of split after limit pieces is lost.

    str.replace(regexp|substr, newSubStr|function)

    A swiss army knife for replacements. At it’s simplest form accepts a string as the first argument (what to search).

    alert( 'aaa'.replace('a','b') )  // baa

    Only the first occurence is replaced for a string. To replace all occurences, the first argument must be a global regexp.

    alert( 'aaa'.replace( /a/g ,'b') )  // bbb

    Because of that, replace is rarely used with a string as the first argument.

    The second argument can be a replacement string with following special chars possible:

    Pattern Inserts
    $$ Inserts a “$”.
    $& Inserts the matched substring.
    $``</td> <td>Inserts the portion of the string that precedes the matched substring.</td> </tr> <tr> <td>$’</td> <td>Inserts the portion of the string that follows the matched substring.</td> </tr> <tr> <td style="white-space: nowrap;"><code>$n</code> or <code>$nn</code></td> <td>Where <code>n</code> or <code>nn</code> are decimal digits, inserts the nth parenthesized submatch string, provided the first argument was aRegExpobject.</td> </tr>
    </table>

    For example,

    var str = 'John Smith'
alert( str.replace( /(\w+)\s+(\w+)/g ,'$2, $1') ) // Smith, John

    The other option for the second argument is a replacement function. It is called for each match and the result is used as a replacement.

    The parameters are:

    str, then variable count ofp1, p2, .. pn, thenoffset, s:

    <ul>
    <li>

    str- the full match,</li>
    <li>    p1, p2, …, pn- captured bracket groups, numbered left-to-right</li>
    <li>    offset- the position of the match,</li>
    <li>    s- the source string</li>
    </ul>

    Usually two last parameters are ignored. For example:

    function r(str, p1, p2) {
  return 'name:' + p1 + ' surname:' + p2
}

var str = 'John Smith'

alert( str.replace( /(\w+)\s+(\w+)/g, r) ) // name:John surname:Smith

    The replacement function is very powerful, because it has all parameters and can perform any conversion of the match.

    <h2 id="regexp-methods"><code>RegExp</code> methods</h2>

    <h3 id="regexp-exec-str-regexp-exec"><code>regexp.exec(str)</code> {#regexp-exec}</h3>

    When the regexp is not global,

    regexp.exec(str)is exactly the same asstr.match(regexp). It returns the first match and groups.

    But when the regexp is global, then

    regexp.exec(str)is the only way to find all matches with groups.

    The code below finds all tags and captures their names:

    var str = '<span> <p>'
var re = /<(.*?)>/g

while( res = re.exec(str) ) {
  alert('match:' + res[0] + ' tag:' + res[1])
}

    We call

    re.execmultiple times and each time gives a new match (ornull).

    That's because a

    RegExpobject has internal propertylastIndex.

    The

    execstarts searching fromlastIndexposition, and then moves it forward (or resets if not found).

    The example below demonstrates that

    lastIndex = 0at start, then it shifts on each match, and finally, when there are no more matches, is set back to0. 

    var str = '<span> <p>'
var re = /<(.*?)>/g

alert('Start: re.lastIndex = '+re.lastIndex) // 0

while( res = re.exec(str) ) {
  alert('match:' + res[0] + ' tag:' + res[1])
  alert('Update lastIndex = '+re.lastIndex)  // 6, then 10
}

alert('Finish: re.lastIndex = '+re.lastIndex) // 0

    <h3 id="regexp-test-str-regexp-test"><code>regexp.test(str)</code> {#regexp-test}</h3>
    Checks if

    regexpmatches thestr. Returnstrue/false.

    For example, we can check that a string is exactly a number by testing against <code class="pattern">^\d+$</code>:

    var str = "123"

alert( /^\d+$/.test(str) )  // true

    <h2 id="summary">Summary</h2>

    Here's a brief cheatsheet of methods for purposes.

    <ul>
    <li>To split a string into pieces - use <a href="#str-split">

    str.split</a>.</li>
    <li>To perform a replacement - use <a href="#str-replace">    str.replace</a>.</li>

    <li>To find all matches with groups - use a loop of <a href="#regexp-exec">

    regexp.exec</a>, without groups - can use a single call to <a href="#str-match">str.match</a>.</li>

    <li>To test if the string matches - use <a href="#regexp-test">

    regexp.test`.
    See also:

    Tutorial