JavaScript

Mems about req expression Mems about req expression Mems about req expression

Regular expressions - part 1

Regular expressions are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects. Regular Expression can search, match, replace, substring, parse and split text.

We can use it to validate our input fields. RegEx is used to search, parse and validate input.

In JavaScript, a regular expression is simply a type of object that is used to match character combinations in strings.

A regular expression pattern is composed of simple characters, such as /abc/, or a combination of simple and special characters, such as /ab*c/

let req = /cat/;

This is one example on a regular expression. It consists of a pattern enclosed between slashes.

Basic Regex Cheat Sheet

There are some basic sign, we need to learn, when working with regex

Symbols

  • . — (period) Matches any single character, except for line breaks.
  • * — Matches the preceding expression 0 or more times.
  • + — Matches the preceding expression 1 or more times.
  • ? — Preceding expression is optional (Matches 0 or 1 times).
  • ^ — Matches the beginning of the string.
  • $ — Matches the end of the string.

Character groups

  • \d — Matches any single digit character.
  • \w — Matches any word character (alphanumeric & underscore).
  • [XYZ] — Character Set: Matches any single character from the character within the brackets.
  • [A-Z] — Character Set: Matches any single character from the character within the brackets.
  • [XYZ]+ — Matches one or more of any of the characters in the set.
  • [^A-Z] — Inside a character set, the ^ is used for negation. In this example, match anything that is NOT an uppercase letter.

Flags

  • g — Global search
  • i — case insensitive search
  • () — groups it together

Examples

let req = /\d/; //Matches any single digit character 
console.log(req.test('12-34'));// ??
console.log(req.test('ade-fe'));// ??
console.log(req.test('23-fe'));// ??

The above returns true as long as there is at least one numeric digit in the string

let req = /me+/; //Matches one or more of any of the characters in the set. 
console.log(req.test('meoooow'));// ??
console.log(req.test('emoooo'));// ??
console.log(req.test('mememe'));// ??

The above returns true as long as there is one or more of any of the characters in the set.

let req = /cats? says?/i; //Matches one or more of any of the characters in the set. 
console.log(req.test('the Cat says meow'));// ??
console.log(/cats? says?/i.test('the Cats say meow'));// ??
console.log(req.test('the dog say wuuf'));// ??

The ? operator. This makes the preceding character optional. The ‘s’s have been deemed optional.
The /i flag makes this case-insensitive which is why ‘cats’ will still match with ‘Cats’

Tips & tricks

If you ever want to search for a slash, you need to escape it with a backslash

var slashSearch = /\//; 
var questionSearch = /\?/;

\d is the same as [0-9]: Each match a digit character

\w is the same as [A-Za-z0-9_]: Each matches any single alphanumeric character or underscore

JavaScript

How can we use it? - part 2

We can use regex to validate our input fields

Is there any letter?

let req = /[A-Z]/ig; //checks for case insensitive letters
console.log(req.test('test'));
console.log(req.test('t2232'));
console.log(req.test('2232'));
console.log(req.test('/?+*'));

Write a text here:

//checks if there is any letters
let lettersOnly = (input) =>{
let req = /[A-Z]/ig;
return req.test(input);
}

Is there any numbers?

let req = /\d/g; //checks for numbers
console.log(req.test('test'));
console.log(req.test('t2232'));
console.log(req.test('2232'));
console.log(req.test('/?+*'));

Write a number here:

//checks if there is any numbers
let numbersOnly = (input) =>{
let req = /\d/g;
return req.test(input);
}

Is there any specialcharacters?

let req = /[^A-Z][^\d]/ig; //checks for specialcharacters
console.log(req.test('test'));
console.log(req.test('t2232'));
console.log(req.test('2232'));
console.log(req.test('/?+*'));

Write a symbol here:

//checks if there is any specialcharacters
let symbolsOnly = (input) =>{
let req = /[^A-Z][^\d]/ig;
return req.test(input);
}

Is there 6 characters?

let req = /^.{6,}$/; //checks for numbercharacters
console.log(req.test('test'));
console.log(req.test('t2232'));
console.log(req.test('22ffrfr32'));
console.log(req.test('/?+*'));

Write 6 characters here:

//checks if there is 6 characters
let numChar = (input) =>{
let req = /^.{6,}$/;
return req.test(input);
}
JavaScript

Common (and Ready-to-Match) Regular Expressions

Match a Duplicated Word

\b(\w+)\s+\1\b

Match a Valid Date (MM/DD/YYYY)

^(0[1–9]|1[012])[- /.](0[1–9]|[12][0–9]|3[01])[- /.](19|20)\d\d$

Match a Valid Date (MM-DD-YYYY)

^(19|20)\d\d[- /.](0[1–9]|1[012])[- /.](0[1–9]|[12][0–9]|3[01])$

Match a Username

^[a-z0–9_-]{3,16}$

Match an Email Address

\b[A-Za-z0–9._%+-]+@[A-Za-z0–9.-]+\.[A-Za-z]{2,}\b

Validate an Email Address

^[A-Za-z0–9._%+-]+@[A-Za-z0–9.-]+\.[A-Za-z]{2,}$
Cheat sheet from MDN

Examples

See the Pen SignIn (req) by Dominoeffekten (@dominoeffekten) on CodePen.