w3resource

JavaScript: Regular Expression

Regular Expression

A regular expression (sometimes abbreviated to "regex") is a pattern used to match character combinations in a string.

For example, a regular expression can be used to search for all text lines in a paragraph that contain word "red" and display those lines where the match is found.

You can also substitute the word "red" with "green". Sometimes regular expressions are used to check an email, password, name etc. into a HTML form field to get a valid format. In JavaScript, regular expressions are also objects.

Creating Regular Expression

There are two ways to construct a regular expression.

Using an object initializer, as follows:

var colorName = /Green/;

The above code creates a new RegExp object called colorName and assigns the pattern Green. In the above notation, the forward slash character (/) is used to designate the starting and end of the pattern.

Using the constructor function, as follows :

re = new RegExp("Green")

JavaScript: Regular Expressions patterns

Sometimes various pattern matching is required instead of direct matching. For example, the pattern /xy*z/ matches any character.

For example, /bo*/ matches 'boo' in "A book" and 'b' in "A beautiful river", but nothing in "A going concern".

Contents:

Using the Test Method:

let TextStr = "The quick brown fox jumps over the lazy dog.";
let MatchRegex = /quick/;
let rexp = MatchRegex.test(TextStr); 
console.log(rexp); //true
MatchRegex = /Quick/;
rexp = MatchRegex.test(TextStr);
console.log(rexp); //false

Match Literal Strings:

let TextStr = "The quick brown fox jumps over the lazy dog.";
let MatchRegex = /quick/; 
let rexp = MatchRegex.test(TextStr); 
console.log(rexp); //true

Match a Literal String with Different Possibilities:

let TextStr = "Cow is domestic animal.";
let DomRegexp = /Cow|cat|rose|dog/;
let rexp = DomRegexp.test(TextStr);
console.log(rexp); //true

Ignore Case While Matching:

let TextStr = "JavaScriptTutorial";
let IgCaseRegexp = /JavaScriptTutorial/i;
let rexp = IgCaseRegexp.test(TextStr);
console.log(rexp); //true

Extract Matches:

let TextStr = "Extract the 'zip' from this file.";
let codingRegexp = /zip/;
let rexp = TextStr.match(codingRegexp);
console.log(rexp); //["zip"]

Find More Than the First Match:

let TextStr = "The quick brown fox jumps over the lazy dog";
let MoreRegexp = /the/gi;
let rexp = TextStr.match(MoreRegexp);
console.log(rexp); //["The", "the"]

Match Anything with Wildcard Period:

let TextStr = "The final phases of the war!";
let WildRegexp = /.ar/;
let rexp = WildRegexp.test(TextStr);
console.log(rexp); //true

Match Single Character with Multiple Possibilities:

let TestStr = "The quick brown fox jumps over the lazy dog.";
let vowelRegexp = /[aeiou]/gi; 
let rexp = TestStr.match(vowelRegexp); 
console.log(rexp); //["e", "u", "i", "o", "o", "u", "o", "e", "e", "a", "o"]

Match Letters of the Alphabet:

let TestStr = "Pack my box with five dozen liquor jugs.";
let alphabetRegexp = /[a-z]/gi; 
let rexp = TestStr.match(alphabetRegexp); 
console.log(rexp); // ["P", "a", "c", "k", "m", "y", "b", "o", "x", "w", "i", "t", "h", "f", "i", "v", "e", "d", "o", "z", "e", "n", "l", "i", "q", "u", "o", "r", "j", "u", "g", "s"]

Match Numbers and Letters of the Alphabet:

let TestStr = "Python 3.8.0, documentation released on 14 October 2019.";
let my_Regexp = /[d-n0-9]/gi; 
let rexp = TestStr.match(my_Regexp); 
console.log(rexp); // ["h", "n", "3", "8", "0", "d", "m", "e", "n", "i", "n", "e", "l", "e", "e", "d", "n", "1", "4", "e", "2", "0", "1", "9"]

Match Single Characters Not Specified:

let TestStr = "The 4 books was on the table.";
let my_Regexp = /[^aeiou^0-9]/gi; 
let rexp = TestStr.match(my_Regexp); 
console.log(rexp); // ["T", "h", " ", " ", "b", "k", "s", " ", "w", "s", " ", "n", " ", "t", "h", " ", "t", "b", "l", "."]

Match Characters that Occur One or More Times:

let TestStr = "Hippopotamus";
let my_Regexp = /p+/g; 
let rexp = TestStr.match(my_Regexp);
console.log(rexp); // ["pp", "p"]

Match Characters that Occur Zero or More Times:

let TestStr = "Huuuuuuuuuuuuuuuurrah!";
let my_Regexp = /Hu*/; 
let rexp= TestStr.match(my_Regexp);
console.log(rexp); // ["Huuuuuuuuuuuuuuuu"]

Find Characters with Lazy Matching:

let textStr = "<em>Wind blow very fast</em>";
let my_Regexp = /<em>?/; 
let rexp = textStr.match(my_Regexp);
console.log(rexp); // ["<em>"]

Match Beginning String Patterns:

let TestStr = "Pack my box with five dozen liquor jugs.";
let my_Regexp = /^Pack/; 
let rexp = my_Regexp.test(TestStr);
console.log(rexp); // true

Match Ending String Patterns:

let TestStr = "Pack my box with five dozen liquor jugs";
let my_Regexp = /jugs$/; 
let rexp = my_Regexp.test(TestStr);
console.log(rexp); // true

Match Ending String Patterns:

let TestStr = "Pack my box with five dozen liquor jugs";
let my_Regexp = /jugs$/; 
let rexp = my_Regexp.test(TestStr);
console.log(rexp); // true

Match All Letters and Numbers:

let TestStr = "Pack my box with five dozen liquor jugs";
let my_Regexp = /\b/gi; 
let rexp = TestStr.match(my_Regexp).length;
console.log(rexp); // 16

Match Everything But Letters and Numbers:

let TestStr = "Pack my box with five dozen liquor jugs";
let my_Regexp = /\W/g; 
let rexp = TestStr.match(my_Regexp).length;
console.log(rexp); // 7

Restrict Possible Usernames:

let TestStr = "TheQuickbrownFox";
let userRexp = /^[a-z]([0-9][0-9]+|[a-z]+\d*)$/i;
let rexp = userRexp.test(TestStr);
console.log(rexp); // true

Match Whitespace:

let TestStr = "Pack my box with five dozen liquor jugs";
let countWSRexp = /\s/g; 
let rexp = TestStr.match(countWSRexp);
console.log(rexp)// [" ", " ", " ", " ", " ", " ", " "]

Match Non-Whitespace Characters:

let TestStr = "Pack my box with five dozen liquor jugs";
let countNWSRexp = /\S/g; 
let rexp = TestStr.match(countNWSRexp);
console.log(rexp)// ["P", "a", "c", "k", "m", "y", "b", "o", "x", "w", "i", "t", "h", "f", "i", "v", "e", "d", "o", "z", "e", "n", "l", "i", "q", "u", "o", "r", "j", "u", "g", "s"]

Specify Upper and Lower Number of Matches:

let TestStr = "Ok bye";
let my_Regex = /Ok{1,5}\sbye/; 
let rexp = my_Regex.test(TestStr)
console.log(rexp) // true

Specify Only the Lower Number of Matches:

let TestStr = "Hauuurah";
let my_Regex = /Hau{3,}rah/; 
let rexp = my_Regex.test(TestStr);
console.log(rexp) // true

Specify Exact Number of Matches:

let TestStr = "Huuuuuurah";
let my_Regexp = /Hu{6}rah/; 
let rexp = my_Regexp.test(TestStr);
console.log(rexp) // true

Check for All or None:

let TestStr = "Beautiful";
let my_Regexp = /Beauti?ful/; 
let rexp = my_Regexp.test(TestStr);
console.log(rexp) // true

Positive and Negative Lookahead:

let TestStr = "Skyrider";
let my_Regexp = /^(?=\w{6,})(?=\D*\d{2})/;
let rexp = my_Regexp.test(TestStr);
console.log(rexp) // false

Check For Mixed Grouping of Characters:

let TestStr = "JavaScript Tutorial";
let myRegexp = /(PHP|JavaScript).*Tutorial/;
let rexp = myRegexp.test(TestStr);
console.log(rexp) // true

Reuse Patterns Using Capture Groups:

let TestStr = "15 15 15";
let my_Regex = /^(\d+)\s\1\s\1$/;
let rexp = my_Regex.test(TestStr);
console.log(rexp) // true

Use Capture Groups to Search and Replace:

let TextStr = "This is red flower.";
let Org_Regexp = /red/; 
let replace_Regexp = "yellow"; 
let rexp = TextStr.replace(Org_Regexp, replace_Regexp);
console.log(rexp) // "This is yellow flower."

Remove Whitespace from Start and End:

let TestStr = "   JavaScript, Tutorial!  ";
let my_Regexp = /^\s+|\s+$/g; 
let rexp = TestStr.replace(my_Regexp, ""); 
console.log(rexp) // "JavaScript, Tutorial!"

The following table provides a complete list and description of the special pattern matching characters that can be used in regular expressions.

Character Meaning
\ Indicates that the next character is special and not to be interpreted literally
For example, /d/ matches the character 'd'. By placing a backslash in front of d, that is by using /\d/, the character becomes special to mean matches any character which are a digit.
-or-
Indicates that the next character is not special and should be interpreted literally.
^ Matches the beginning of the string or line.
For example /^A/ does not match the 'A' in "about Articles" but does match it in "Articles of life"
$ Matches the end of the string or line.
For example, /e$/ does not match the 't' in "exact", but does match it in "w3resource"

* Matches the previous character 0 or more times.
For example, /bo*/ matches 'boo' in "A bootable usb" and 'b' in "A beautiful mind", but nothing in "A going concern".
+ Matches the previous character 1 or more times.
For example, /a+/ matches the 'a' in "Daniel" and all the a's in "Daaam"
? Matches the previous character 0 or 1 time.
For example, /r?eu?/ matches the 're' in "w3resource" and the 'eu' in "europe".  
. The decimal point matches any single character except a new line.
For example, /.n/ matches 'an' and 'on' in "an orange is on the table".
(x) Matches 'x' and remember the matching character. For example, /(go)/ matches and remembers 'go' in "go there"
x|y Matches either 'x' or 'y'.
For example, /green|red/ matches 'green' in "green color" and blue in "blue color."
{n} Matches exactly n (a positive integer) occurrences of the preceding character.
For example, /a{2}/ doesn't match the 'a' in "dam," but it matches all of the a's in "daam," and the first two a's in "daaam"
{n,} Matches at least n (a positive integer) occurrences of the preceding character.
For example, /a{2,}/ doesn't match the 'a' in "dam," but it matches all of the a's in "daam," and the first two a's in "daaam"  
{n,m} Matches at least n and at maximum m (n and m are positive integer) occurrences of the preceding character.
For example, /a{1,3}/ matches nothing in "dom", the 'a' in "dam," the first two a's in "daam" and the first three a's in "daaaaaam". Notice that when matching "daaaaaam", the match is "aaa" as the maximum value of m is 3 though the original string had more a's in it.
[xyz] Matches any one from the character set, using a hyphen you can specify a range of characters.
For example. [uvwxyz] is the same as [u-z]. The match 'y' in "yellow" and the 'u' in "blue" .
[^xyz] Matches any character that is not enclosed in the brackets, using a hyphen you can specify a range of characters.
For example, [^wxyz] is the same as [^w-z]. They initially match 'b' in "blue" and 's' in "specify".  
[\b] Matches a backspace.
\b Matches a word boundary (position between a word character and a non-word character), such as a space.
For example, /\bn\w/ matches the 'on' in "sooner"
\B Matches the position which is beyond a word character and a non-word character boundary.
For example, /\w\Bn/ matches 'on' in "sooner".
\cX Matches a control character (X) in a string. For example, /\cM/ matches control-M in a string.
\d Matches any character which is a digit. Equivalent to [0-9].
For example, /\d/ or /[0-9]/ matches '2' in "E2 means second example."
\D Matches any character which is a non-digit. Equivalent to [^0-9].
For example, /\D/ or /[^0-9]/ matches 'C' in "E2 means second example."
\f Matches a Form feed
\n Matches a New line
\r Matches a Carriage return.
\s Matches any white space character (including tab, new line, carriage return, form feed, vertical tab). [ \t\n\r\f\v].
For example, /\s\w*/ matches ' apple' in "An apple."
\S Matches any non-white space character. Equivalent to [^ \f\n\r\t\v].
For example, /\S/\w* matches 'An' in "An apple"
\t Matches a tab
\v Matches a vertical tab.
\w Matches any word character (alphanumeric) including the underscore. Equivalent to [A-Za-z0-9_].
For example, /\w/ matches 'g' in "green," '8' in "12.86," and '3' in "3G."
\W Matches any non-word character, equivalent to [^A-Za-z0-9_].
For example, /\W/ or /[^$A-Za-z0-9_]/ matches '$' in "150$"
\n Where n is a positive integer. A back reference to the last sub string matching the n parenthetical in the regular expression
For example, /red(,)\sgreen\1/ matches 'red, green', in "red, green, white, black."
\ooctal
An octal escape value allows embedding ASCII codes into regular expressions.
\xhex A hexadecimal escape value allows embedding ASCII codes into regular expressions.

Previous: Javascript object Object - Properties and Methods
Next: Javascript RegExp Objects - Properties and Methods



JavaScript: Tips of the Day

Returns all unique values of an array, based on a provided comparator function

Example:

const tips_uniqueElementsBy = (arr, fn) =>
  arr.reduce((acc, v) => {
    if (!acc.some(x => fn(v, x))) acc.push(v);
    return acc;
  }, []);

console.log(tips_uniqueElementsBy(
  [
    { id: 0, value: 'p' },
    { id: 1, value: 'q' },
    { id: 2, value: 'r' },
    { id: 1, value: 's' },
    { id: 0, value: 't' }
  ],
  (a, b) => a.id == b.id
)); 

Output:

[[object Object] {
  id: 0,
  value: "p"
}, [object Object] {
  id: 1,
  value: "q"
}, [object Object] {
  id: 2,
  value: "r"
}]