JavaScript

Last Updated: 2/2/2023

Regular Expression

  • A regular expression is a sequence of characters that forms a search pattern.
  • The search pattern can be used for text search and text replace operations and extract data.
  • You can also use regular expressions to validate form fields

Syntax

/pattern/modifiers;

Regex Literal

const pattern = /World/

Regex Object

const pattern = new  RegExp("Hello");

Regex Modifiers

  • i: Perform case-insensitive matching
  • g: Perform a global match

Regex methods

test

Searches the string for the pattern, and returns true or false, depending on the result.

const pattern = /e/;  
pattern.test("The best things in life are free!");

exec

It searches a string for a specified pattern, and returns the found text as an object.

const regex1 = RegExp('foo');
const str1 = 'indoor football, outdoor football';
console.log(regex1.exec(str1));

String Methods

Returns the position of the first match.

const text = "Hello World";
console.log(text.search(/hello/i));

replace

const  text = "google.com is the popular search engine. click to go to google.com"
console.log(text.replace(/google/i, "microsoft"));

match

  • If the g flag is used, all results matching the complete regular expression will be returned
  • If the g flag is not used, only the first complete match is returned
let text = "The rain in SPAIN stays mainly in the plain";
console.log(text.match(/ain/));
console.log(text.match(/ain/g));

Character Classes/Meta characters

  • A character class is a special notation that matches any symbol from a certain set.
  • .: Find a single character, except newline or line terminator
  • \w: Find a word character
  • \W: Find a non-word character
  • \d: Find a digit
  • \D: Find a non-digit character
  • \s: Find a whitespace character
  • \S: Find a non-whitespace character
  • \n: Find a new line character
  • \r: Find a carriage return character
  • \t: Find a tab character https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes
let str = "+7(903)-123-45-67";
let regexp = /\d/g;
console.log( str.match(regexp).join('') );

Anchors

  • The caret ^ and dollar $ characters have special meaning in a regexp. They are called “anchors”.
  • The caret ^ matches at the beginning of the text, and the dollar $ – at the end.
let regexp = /^\d\d:\d\d$/;
console.log(regexp.test("12:35"));
console.log(regexp.test("12:3"));

Sets and Ranges

  • [abc]: Find any character between the brackets
  • [^abc]: Find any character NOT between the brackets
  • [0-9]: Find any character between the brackets (any digit)
  • [^0-9]: Find any character NOT between the brackets (any non-digit)
  • [a-z]
  • [A-Z]
  • (x|y): Find any of the alternatives specified
const patter = /[a-zA-Z0-9]/
console.log( "Mop top".match(/[tm]op/gi));

Word boundary

  • \b: Find a match at the beginning/end of a word
  • \B: Find a match, but not at the beginning/end of a word
console.log( "Hello, Java".match(/\bJava\b/) ); // Java
console.log('Hello, JSscript!'.match(/\bJS\b/)); // null

Quantifiers

  • n+: Matches any string that contains at least one n
  • n*: Matches any string that contains zero or more occurrences of n
  • n?: Matches any string that contains zero or one occurrences of n
  • n{X}: Matches any string that contains a sequence of X n's
  • n{X,Y}: Matches any string that contains a sequence of X to Y n's
  • n{X,}: Matches any string that contains a sequence of at least X n's
console.log('ECMAScript 2020'.match(/\d{4}/));
console.log('The official name of ES11 is ES2020'.match(/\d{2,4}/g));
console.log('The official name of ES11 is ES2020'.match(/\d{2,}/g));
console.log('Is this color or colour?'.match(/colou?r/g));
console.log('JavaScript is not Java'.match(/Java\w*/g));

Greedy

In the greedy mode, quantifiers try to match as many as possible and return the largest matches.

console.log('<button type="submit" class="btn">Send</button>'.match(/".+?"/g));

Non greedy or lazy

In the lazy or non-greedy mode, the quantifiers match their preceding elements as few as possible and return the smallest matches.

console.log('<button type="submit" class="btn">Send</button>'.match(/".+"/g));

Capturing Groups

const text = "posts/1";
const pattern = /(\w+)\/(\d+)/;
const match = text.match(pattern);
console.log(match);

Named groups

const text = "posts/10";
const pattern = /(?<resource>\w+)\/(?<id>\d+)/;
const match = text.match(pattern);

Alternation (OR) |

  • Alternation is the term in regular expression that is actually a simple “OR”.
const pattern = /([01]\d|2[0-3]):[0-5]\d/g;
console.log("00:00 10:10 23:59 25:99 1:2".match(pattern)); // 00:00,10:10,23:59

Lookahead

X(?=Y)		Positive lookahead		X if followed by Y
X(?!Y)		Negative lookahead		X if not followed by Y
(?<=Y)X		Positive lookbehind		X if after Y
(?<!Y)X		Negative lookbehind		X if not after Y

let text = "1 turkey costs 30€";
console.log(text.match(/\d+(?=€)/));

Reference:

https://www.w3schools.com/jsref/jsref_obj_regexp.asp

Previous
Next