1 of 28

Intro to REGEX

1.2.2

2 of 28

Consider this code without RegEx:

const isOnlyAlphaNumeric = (str) => {

if (!str.length) return false;

const valid = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_';

for (let i = 0; i < str.length; i++) {

if (!valid.includes(str[i])) {

return false;

}

}

return true;

};

​

console.log(isOnlyAlphaNumeric('Hello world!')); // false

console.log(isOnlyAlphaNumeric('Hello_world')); // true

3 of 28

Here’s the RegEx version:

const isOnlyAlphaNumeric = (str) => /^\w+$/.test(str);

4 of 28

RegEx is a perfect example of using the right tool for right the job

​

Don’t be intimidated!

5 of 28

RegEx = Regular Expressions

RegEx is about matching patterns in strings

  • Present in all major languages with slight differences
  • Uses letters, numbers, and special symbols
  • Trivial to start, easy to use, worth it to master

​

Let’s get started!

https://scriptular.com/

6 of 28

Heads up!

​

We’re going to move quickly

to expose you to all the basics.

Focus on concepts

There are cheat sheets later!

​

7 of 28

Letters

/Hello there/

Exact

letter

matches

8 of 28

Flags: case insensitive

/hello there/i

Modify

the RegEx’s

default

behavior

9 of 28

Flags: global

/e/g

Match

every

instance

10 of 28

Flags: global + insensitive

/h/gi

Combine

and

conquer

11 of 28

Character set: [ ]

/[aeiou]/gi

Match any

single character

from a set of characters

12 of 28

Negated characters: [^]

/[^aeiou]/gi

Avoid the

characters

13 of 28

1 or more: +, 0 or more: *, 0 or 1: ?

/[^aeiou]+/gi

These are the

wildcards

14 of 28

quantifier: {x}, {x, }, {x, y}

/[^aeiou]{2}/gi

Match only

if the numbers

are exact

15 of 28

We need better matchers

  • We’re trying to get all 2 non-vowel runs
    • we want “th” as a match
    • we’re getting “ t” instead (space "t")
  • Character Classes give us special matchers!
    • Like \s for spaces

16 of 28

[0-9], [0-20]

[a-z], [a-d]

[A-Z]

[a-zA-Z]

\d

\D

\w

\W

\s

\S

\b

\B

.

\.

Any single digit, any in range

Any lowercase letter, any in range

Any uppercase letter

Any letter

Any digit (0-9)

Any NON digit

Any alphanumeric (and _ )

Any NON alphanumeric

Any whitespace character

Any NON whitespace character

Any word break

Any NON break

Any character

An “escaped” literal period

16

Special

Character Classes/Sets

17 of 28

Putting it together: all length 2 sequences of non-vowel letters

/[^aeiou\s]{2}/gi

18 of 28

Groups are for multiple, specific

characters,

sets are for one

​

groups: ( ), (this|or|that)

/(cat|dog)/gi

19 of 28

anchors: ^, $

/^i.+!$/gi

Match only

if the numbers

are exact

20 of 28

Whew, that was a lot!

​

Take 10 minutes to play around

in scriptular.com on your own

before we add JS into the mix.

We slacked the cheat sheet!

21 of 28

g = global, i = case insensitive

You know what letters are

0 to 9

[ ]

[^]

*

+

?

^, $

{2} {2,} {2,4}

( ) (this|or|that)

flags

letters

digits

character class/set

Negated set

0 or more

1 or more

0 or 1

start of string, end of string

quantifier

groups

21

Cheat

Sheet

22 of 28

Using RegEx with

JAVASCRIPT

23 of 28

Creating a new RegEx

New RegExp (don’t forget the p)

Literal syntax

Clunky, but dynamic

Succinct, but static

const literal = /[^a-z]/g;�const wrong = /`${name}`/; // won't be dynamic

const regEx = new RegExp('ab', 'g');�const greet = new RegExp(`Hi ${name}`, 'g');

24 of 28

When using RegExp,

you must escape the “\” characters!

“\” are escape characters,

to use them literally, escape them: “\\”

const brokenRegEx = new RegExp(`\w\d`, 'g');�console.log(brokenRegEx);�// /wd/g - the \ are ignored��const goodRegEx = new RegExp(`\\w\\d`, 'g');�console.log(goodRegEx);

// /\w\d/g

25 of 28

The .test() RegEx method

  • .test() returns a boolean if you match a regular expression finds any match in a string
  • it is a regex method!

​

​

console.log(/[a-z]/.test('Hello!')); // true�console.log(/\d/.test('Hello!')); // false

26 of 28

Now,

Let’s try writing the function from the opening ourselves!

27 of 28

const isOnlyAphaNumeric = (str) => /^\w+$/.test(str);

So clean

28 of 28

Next Steps:

For your HW, you’ll need to use the .match and .replace methods.

Check them out on your own!