Regex and Javascript continued

Franklyn Rodriguez
4 min readOct 29, 2020

This is part of a series I am writing for me to have a better understanding of Regex and for others who learn like me to have a sort of reference.

In this series I would like to talk about character flags and character sets in Regex.

The most common Regex flags that you will see are the /g and /i flags used at the end of the Regex. These flags are used in combination with other character sets or classes to filter through and search for something with this added parameter.

i

This flag is used to find a regex regardless of case.

/[a-zA-Z]/ = /[a-z]i/;

Instead of writing a Regex that’s done like the one on the left we can just shorted it out and add the i flag right before the Regex is closed to search for regardless of case. It helps to save you from writing double.

g

This flag is used to find repeat words

/repeat repeat/ = /repeat/g;

Instead of writing repeat characters you can just use it once to signify there multiples we are looking for.

gi\

The great thing about these Regex flags is that they can be used to be combined as well.

/repeat Repeat/ = /Repeat/gi

Character Sets

In continuation of speaking of the .match() method:

*

The asterisk or star character set when used with .match() would return anyone of the characters you are looking for.

/bo*/;
let myRegex = /bo*/
let phrase = ["boo", "bones", "booklets", "boomkins", "bOOOooo", "bench"]
let regexArray = phrase.find(el => el.match(myRegex))
//returns "boo"

Using with a map function returns an array with null values

let myRegex = /bo*/
let phrase = ["boo", "bones", "booklets", "boomkins", "bOOOooo", "stench", "dog"]
let regexArray = phrase.map(el => el.match(myRegex))
//(7) [Array(1), Array(1), Array(1), Array(1), Array(1), null, null]

Be careful of you use Regex when combining them with other built in methods either in javascript or whatever language you are using it with.

[ ]

The square brackets allow you to define a regex where it find any match with the characters you put in the middle.

let bigStr = "big";
let bogStr = "bog";
let bgRegex = /b[aiu]g/;
bigStr.match(bgRegex); // Returns ["big"]
bogStr.match(bgRegex); // Returns null

There are also three pretty useful sort of subsets from this character set. They are the (hyphen character set), the ^(caret character set), and the +(plus character set).

The hyphen character set is used to define a range of character sets.

Instead of typing out all the letters you are looking for you can do something like the following:

let str = "Regex is useful" 
let findRegex = /[e-g]/ //range from e to g
str.match(findRegex)

It can do this with longer sentences as well:

let quoteSample = "The quick brown fox jumps over the lazy dog.";
let alphabetRegex = /[a-z]/ig; // Change this line
let result = quoteSample.match(alphabetRegex); // Change this line
//result prints out the string
//["T", "h", "e", "q", "u", "i", "c", "k", "b", "r", "o", "w", "n", "f", "o", "x", "j", "u", "m", "p", "s", "o", "v", "e", "r", "t", "h", "e", "l", "a", "z", "y", "d", "o", "g"]

Also with numbers:

let jennyStr = "Jenny8675309"; let myRegex = /[a-z0-9]/ig; // matches all letters and numbers in jennyStr jennyStr.match(myRegex);

^

The caret character set is used to negate the matches you don’t want to find in your regex.

You would place them after the opening bracket and before the characters you do no want to match

E.g. /[^!@#$%^&*]/

This is used validate some username usually making sure there are no special characters in them.

let quoteSample = "3 blind mice."; let myRegex = /[^aeiou0-9]/gi;  let result = quoteSample.match(myRegex) 
//[" ", "b", "l", "n", "d", " ", "m", "c", "."]

This search will find what is not a vowel or a number as you can see in the above comment.

One thing to note with this is that using it outside of a character set will make the search change to find those characters in the beginning of the string.

let calAndCalendar = "Cal and Calendar both start with Cal."; 
let calRegex = /^Cal/;
let result = calRegex.test(calAndCalendar);
//result will print out true

Here we are using the test method which results in a boolean response.

+

The plus character set is used to match a character or group of characters that appears one or more times in a row.

/aaaa/ === /a+/g

We could use the above expression to match with strings of apples, aaples, baanaas, orraanges and return an array with the character set it is looking for in it’s match. Here the only one it will not return would be apples because it is by itself and not in a group.

Thanks for reading up to here! I will be including more character sets and speak about checking for all or none in the next article!.

Linkedin: https://www.linkedin.com/in/franklynrodriguez5/://www.linkedin.com/in/franklynrodriguez5/

Github: git

--

--

Franklyn Rodriguez

Full-Stack Developer on the search for new opportunities to learn and grow my skills