Run pattern matching with built-in Javascript Regex and String methods

/
javascriptfundamentals

This tutorial is a part of the Learn everything about Javascript in one course.

In previous lecture, we have learn to build the pattern and regex (Regular Expression) for matching. In this lecture, we will use that pattern to do some matching and explore the results.

String built-in matching method: match

Syntax: string.match(string_pattern | regex)

Input Output Time complexity (worst)
(string)
(regex)		 null for no match
a detailed match
array of matches		 O(n) with n is input string length
string_methods.js
// String built-in matching method: match
const str1 = `It's always sunny in Sunnyvale.`
const regex1 = /sunny/i
const regex2 = /sunny/gi
const regex3 = /hola/gi
console.log(str1.match(regex1)) // if modifier `g` not used, details included
// [
//   'sunny', // matched part
//   index: 12, // matched position
//   input: "It's always sunny in Sunnyvale.", // original string
//   groups: undefined
// ]
console.log(str1.match(regex2)) // [ 'sunny', 'Sunny' ]
console.log(str1.match(regex3)) // null
console.log(str1.match('sunny'))
// detail info if there is only 1 match
// [
//   'sunny',
//   index: 12,
//   input: "It's always sunny in Sunnyvale.",
//   groups: undefined
// ]

More about String match method on MDN, w3school.

String built-in matching method: matchAll

Syntax: string.matchAll(string_pattern | regex)

Input Output Time complexity (worst)
(string)
(regex)		 null for no match
iterator (array like) of detailed match(es)		 O(n) with n is input string length

matchAll() is similar to match but also gives you full details with all matched results in from of iterator. Iterator simply data we can loop through to access each item sequencially.

string_methods.js
// String built-in matching method: matchAll
// str1 = `It's always sunny in Sunnyvale.`
// regex2 = /sunny/gi
let arr = str1.matchAll(regex2) // arr is an iterator
for(let a of arr) { // a is each element of arr
  console.log(a) // print all element
}
// we have 2 matches
// [
//   'sunny', // first match
//   index: 12,
//   input: "It's always sunny in Sunnyvale.",
//   groups: undefined
// ]
// [
//   'Sunny', // second match
//   index: 21,
//   input: "It's always sunny in Sunnyvale.",
//   groups: undefined
// ]

More about String matchAll() method on MDN.

String built-in matching method: replace()

Syntax: string.replace(string_pattern | regex, string_replacement)

Input Output Time complexity (worst)
(string, string)
(regex, string)		 original string for no match
new string with replacement		 O(n) with n is input string length

replace(string | regex, string_replacement) take first input as pattern (can be either string or regex) and second input as replacement string then return string with match(es) replaced.

string_methods.js
// String built-in matching method: replace

// string pattern
console.log(str1.replace('sunny', '_rainy_')) // It's always _rainy_ in Sunnyvale.

// regex pattern
console.log(str1.replace(/sunny/gi, '_rainy_')) // It's always _rainy_ in _rainy_vale

More about String replace() method on MDN, w3school.

Syntax: string.search(string | regex)

Input Output Time complexity (worst)
(string)
(regex)		 -1 for no match
index of first match		 O(n) with n is string length
string_methods.js
// String built-in matching method: search
console.log(str1.search('sunny')) // 12, string pattern
console.log(str1.search(/sunny/)) // 12, regex pattern

More about String search() method on MDN, w3school.

Regex built-in matching method: exec()

Syntax: regex.exec(string)

Input Output Time complexity (worst)
(string) null for no match O(n) with n is string length
(string)
without g modifier		 not stateful, always return the first match O(n) with n is string length
(string)
with g modifier		 stateful, return a match, will return the next match if called again O(n) with n is string length
regex_methods.js
// String built-in matching method: match
const str1 = `It's always sunny in Sunnyvale.`

// without modifier `g`, `exec` method always return first match
const regex1 = /sunny/i
console.log(regex1.exec(str1)) // always return first match, that's it
// 1st call
// [
//   'sunny',
//   index: 12,
//   input: "It's always sunny in Sunnyvale.",
//   groups: undefined
// ]
console.log(regex1.exec(str1)) // call `exec` again, get same result as above
// 2nd call, same as 1st call
// [
//   'sunny',
//   index: 12,
//   input: "It's always sunny in Sunnyvale.",
//   groups: undefined
// ]

// with modifier `g`, regex "remembers" its last match and continue from there
const regex2 = /sunny/ig
console.log(regex2.exec(str1))
// 1st call, 
// [
//   'sunny',
//   index: 12, // 1s match
//   input: "It's always sunny in Sunnyvale.",
//   groups: undefined
// ]
console.log(regex2.lastIndex) // 17, 2nd call will start from index 18
console.log(regex2.exec(str1))
// 2nd call, continue to look from the 1st match
// [
//   'Sunny',
//   index: 21, // 2nd match
//   input: "It's always sunny in Sunnyvale.",
//   groups: undefined
// ]
console.log(regex2.exec(str1)) // null, 3rd call, because no more match

More about Regex exec() method on MDN, w3school.

Regex built-in matching method: test()

Syntax: regex.test(string)

Input Output Time complexity (worst)
(string) true
false		 O(n) with n is string length

test(string) returns true if string contains pattern, false if not. test takes string to match as input.

regex_methods.js
// Regex built-in matching method: test
const regex3 = /always/
const regex4 = /never/
// str1 = `It's always sunny in Sunnyvale.`
console.log(regex3.test(str1)) // true
console.log(regex4.test(str1)) // false

More about Regex test() method on MDN, w3school.

Important learning resources

Summary

  1. Regular Expression is about about pattern matching. It is very powerful.
  2. A lot of practicing and referencing will help to master this skill.