loading...

Basic RegExp in JS

philipsterling profile image PhilipSterling ・2 min read

Regular Expressions or Regex are strings used for describing search patterns within text.

var pattern = new RegExp(pattern, attributes);
//or 
var pattern = /pattern/attributes;
//eg pattern = /\n/g or pattern = new RegExp(\n,g)
//for newline characters globally

It gets complicated

/[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,6}/i
//What is this?

The Pattern Example-

In order to better understand patterns in regex I will show some complicated examples and break them down into understandable components.

//Philip@example.com
/[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,6}/i
//this is the regex for identifying an email address string 
//regardless of address

//First component
//Philip
/[A-Z0-9._%+-]/
//This component looks for a string containing a through z
//represented by A-Z or 0-9 represented by 0-9 then the other
//allowed characters in the first part of an email which are
// . _ % + -

//Second component
//Philip@
/+@/
//This component makes the return whatever block came before the
//@ sign in the email address and checks for the @ sign

//Third component
//Philip@example
/[A-Z0-9.-]/
//This component makes the return a any character block that includes
// a through z 0 through 9 . and -

//Fourth component
//Philip@example.
/+\./
//This component makes the return add a . by use of \. which
//escapes the dot in

//Fifth component
//Philip@example.com
/[A-Z]{2,6}/
//This component adds the values of any string a through z that is
//between 2 and 6 characters long.
//For example .co would work but .o or .comcomo would not

The Attributes Example -

These are typically used for the characters 'g' 'i' and 'm' which allow you to search (g) globally through the whole string, (i) independent of case, and (m) in multiline matches

//In our example case we used the attribute /i so that it would accept
//independent of case for any character a through z

Basic Patterns to know -

//Special Characters
//Any special characters have to be escaped into the regex 
//through the use of the \ character, these include
\0 - null

\t - tab

\n - newline

\. - .

\[ - [

//and so on

//Quantifiers
//Quantifiers determine the amount of a certain character or pattern you are looking for

a* - 0 or more a's

a+ - 1 or more a's

a? - 0 to 1 a's

a$ - any string that ends in a

^a - any string that begins with a

a{2} - exactly 2 a's in sequence

a{2,} - 2 or more a's in sequence

a{2,4} - 2 to 4 a's in sequence

//Metacharacters
//Metacharacters are used to represent a variety of character with
//limited input

. - any single character

\s - whitespace

\S - not whitespace

\d - decimal digit

\D - not a decimal digit

\w - alphanumeric character

\W - not alphanumeric character

{ab|bc} - or operator

//Ranges
//Ranges of characters are done in regex through bracket notation

[A-Z] - all characters a through z

[.] - all dots

[^.] - all not dots

That is all the basic inputs for regex that allow you to better create patterns for string searching.


Sources

https://regexr.com/ - Useful tool for testing out your regexes to make sure they are working before implementing them.

Discussion

pic
Editor guide
Collapse
andrevks profile image
André Geraldo

Thanks dude, you explained enough to me get started :D