JS: RegExp Tutorial

By Xah Lee. Date: . Last updated: .

RegExp stands for “regular expression”. It allows you to check if a string has certain pattern, or replace parts of string by pattern.

Basic Example of Checking Email Pattern

Let's say you have a string, and you want to know if it contains repeation of letter o.

// check if a string contains a pattern

var myString = "search google";

// check if the string contains at least 2 or more repeated o
    myString.search( /oo+/ )
); // 8
// return value is the start position of match

// check if the string contains “z”
console.log (
    myString.search ( /z/ )
 ); // -1
// if not found, returns -1

The /oo+/ is a RegExp pattern.

The syntax /…/ is a literal expression for RegExp.

In between the slashes, is the regexp pattern.

The regexp pattern /oo+/ means, the character o, followed by 1 or more o, The + means 1 or more of the preceding pattern.

[see JS: RegExp Syntax]

The line myString.search( … ) means search the pattern in myString.

search is a method of string prototype. It returns a number that's the first character's index where the pattern matches. If the pattern is not found, it returns -1.

[see JS: String Methods for RegExp]

Note: if you never worked with regexp before, don't worry. regexp is not something you understand the first day. It takes many months of use to be fully comfortable.

Basic Example using RegExp with If

In this example, we want to check if a string contains the substring “oo”.

var xlink = "http://google.com/";

var search_result = xlink.search(/oo/);

if ( search_result !== -1) {
    console.log("found match");
    console.log(search_result); // 8 ← the index of match
} else {
    console.log("not found");

Regexp Replace String Example

Regexp can also be used to replace parts of a string that matches a pattern.

// example of RegExp replace
// add a alt attribute to a HTML image tag.

var x1 = '<img src="cat.jpg">';

var x2 = x1.replace(/<img src="([-_\w]+)\.jpg">/, '<img src="$1.jpg" alt="$1">');

console.log(x2); // prints <img src="cat.jpg" alt="cat">

Regexp Example: Get All Captured Patterns

// example of RegExp “match” method, capture groups
// capture the attribute values in a image tag
var xx = '<img class="pict" src="cat.jpg" alt="my cat" width="600" height="400">';

var result = xx.match(/<img class="([^"]+)" src="([^"]+)" alt="([^"]+)" width="([^"]+)" height="([^"]+)">/);

console.log(result[0]); // <img class="pict" src="cat.jpg" alt="my cat" width="600" height="400">
console.log(result[1]); // pict
console.log(result[2]); // cat.jpg
console.log(result[3]); // my cat
console.log(result[4]); // 600
console.log(result[5]); // 400

RegExp Topic

  1. JS: RegExp Tutorial
  2. JS: String Methods for RegExp
  3. JS: RegExp Object
  4. JS: RegExp Constructor
  5. JS: RegExp.prototype
  6. JS: RegExp Syntax

JavaScript Basics

  1. How to Run JavaScript
  2. JS: How to Use Browser Console
  3. JavaScript Basics
  4. JS: Data Types
  5. JS: true, false
  6. JS: Operators
  7. JS: Variable
  8. JS: Branch Control: if then else, switch
  9. JS: for while do Loop
  10. JS: Array Basics
  11. JS: Object Basics
  12. JS: RegExp Tutorial
  13. JS: Throw Try Catch Finally
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Ask me question on patreon