Skip to content

Latest commit

 

History

History

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 

Regular Expressions

  Regular expressions are a powerful tool for searching and replacing a string. In JS, they are implemented by the RegExp object and integrated into string methods.

  • "long" syntax: regexp = new RegExp("pattern", "flags");
  • "short" syntax: regexp = /pattern/; // no flags
  • "short" syntax: regexp = /pattern/gmi; // with gmi flags

Slashes are used when we know exactly what the regular expression will be when we write the code - which is most situations.
And new RegExp - when we want to create a regular expression "on the fly" from a dynamically generated string.

  Regular expressions can have flags that affect the search.

  • m (multiline mode);
  • u (includes full Unicode support.);
  • g (the search looks for all matches, without it - only the first);
  • i (search is case-insensitive: there is no difference between A and a);
  • s (enables "dotall" mode, in which the dot . can match the newline character \n);
  • y (search mode at a specific position in the text);

The str.match(regexp) method for the string returns matches with the regular expression regexp

 let str = "Father, our father!";
 console.log( str.match(/father/gi) );  // => (2) ['Father', 'father']
 console.log( str.match(/parent/gi) );  // => null

In the absence of matches, not an empty array, but null is returned.

let matches = "JavaScript".match(/HTML/); // => null

str.replace(regexp, replacement) replaces matches from regexp in str with replacement (all if g flag is present, otherwise only first)

console.log( "We will, we will".replace(/we/i, "I") ); /);  // => I will, we will
console.log( "We will, we will".replace(/we/ig, "I") );  // => I will, I will

  In the replacement string, we can use special combinations of characters to insert match fragments:

  • $& inserts all matches found
    • console.log ( "! HTML as well as CSS".replace(/HTML/, "$& and JavaScript") ); => ! HTML and JavaScript as well as CSS
  • $` inserts part of the string before the match
    • console.log ( "! HTML as well as CSS".replace(/HTML/, "$` JavaScript") ); => ! ! JavaScript as well as CSS
  • $' inserts the part of the string after the match
    • console.log ( "! HTML as well as CSS".replace(/HTML/, "$' JavaScript") ); => ! as well as CSS JavaScript as well as CSS

The regexp.test(str) method checks if there is at least one match, if so, returns true, otherwise false.

console.log( /learning/i.test("I'm learning JavaScript") ); // => true

  A character class is a special notation that corresponds to any character in a particular set.

  • \d = "any single digit"
  let myNumber = '+38-062-751-59-37';
	let regexp = /\d/g;
	console.log (myNumber.match(regexp) );  // => ['3', '8', '0', '6', '2', '7', '5', '1', '5', '9', '3', '7']
  • \s = ("space")
  • \w = ("word")
  • . dot means "any character"

find non-numeric \D characters and remove them from the string:

 let myNumber = '+38-062-751-59-37';
 console.log (myNumber.replace(/\D/g, "") ); // => 380627515937

  The caret ^ and dollar $ characters have special meanings in regular expressions. They are called "anchors".

  • ^ means match with beginning of text, and $ - with end;
  • both together ^...$ are often used to check if a string matches a pattern completely;

Let's check that the string is a time in the format 12:34, that is, two numbers, then a colon, then two more numbers.

 let regexp = /^\d\d:\d\d$/;
		console.log ( regexp.test("14:27") );     // => true
		console.log ( regexp.test("14:327") );   // => false

In multiline mode, ^ and $ denote the start/end of each line of text.

  Multiple characters in square brackets […] mean "search for any given character".
For example, [a-z] corresponds to a character in the range from a to z, or [0-5] to a number from 0 to 5.