Live with Regex and /K(athie Lee|elly)/ 
Tags: javascript, beginners, jokes
Published: 2019-08-26 20:10:22

![Steve Jobs in a turtleneck sweater](https://thepracticaldev.s3.amazonaws.com/i/61xywjckpxbcyru4htkd.jpg)
>*"Somebody once told me the world of Regex is gonna roll me...I ain't the sharpest tool in the shed." - Steve Jobs*

I'm writing about regex because I hate regex. I've been coding for a little over a year and each time I've encountered regex the same thing happens - I leave the situation feeling cold and shamed, lying naked on the floor. I kept telling myself that I would study regex and get better, but I never did...

Until now.

First things first - 

**Don't be like me.** 
![Still of Jack Nicholson holding a small dog from the film "As Good As It Gets"](https://thepracticaldev.s3.amazonaws.com/i/plwd6yhs9liv2uh0b791.jpg)
Don't wait a year to tackle something that you are struggling with. 

Second things second - 

Don't beat yourself up for not grasping a concept right away.

I personally learn through repetition - I shouldn't have run away from regex, I should have sought it out and practiced until it made sense.

Okay so now, *let's talk about regex, baby.*

##Regex##

This post is meant to be a brief introduction to the major concepts of regex.

Regex AKA regular expression AKA regexp are search patterns used to find and replace matches in text. For the purposes of this article/blog/masterpiece, we'll specifically deal with regex and JavaScript. JavaScript regular expressions can be declared literally using forward slashes - 
`let my_regex = /aaa/`
or using the RegExp constructor -
`let my_regex = new Regexp('aaa')` 

Regex search patterns are made up of literal characters (example: the letter "a") and characters with special meaning (example: the asterisk symbol \*). By combining literal characters and with special characters, regex can be used to find just about anything in a piece of text. Throw in regex's optional flags and you are on your way to *Flavor Town*.

`Literal characters + special characters + regex flags = FLAVOR TOWN`

![Picture of chef Guy Fieri](https://thepracticaldev.s3.amazonaws.com/i/pk3ivhdqy9nzyhwlzj2f.jpg)

##Regex Flags##

Regex has 6 flags... I decided that for the dignity of this post I am not going to make the obvious theme park jokes. This is a serious scholarly thing I'm doing here.

![Serious expression Guy Fieri](https://thepracticaldev.s3.amazonaws.com/i/rtjx8g1v1zugue16a4xh.jpg)

| Flag | Search type |
| ----------- | ----------- |
| g | global |
| i | case-insensitive |
| m | multi-line |
| s | match newline characters with "." |
| u | unicode |
| y | sticky - matches at the current position |


Regex flags are always listed at the end of a regex pattern like so - `/matchymatch/i`. Of these flags, global search (looks for all matches in a string instead of just the first match) and case-insensitive search (looks for matches regardless of capitalization) are the most common.

##Special Characters##

Let's go through some of these special characters and their uses. This is not included in the table below, but you can also use a pipe \| to indicate OR.

*Make sure to escape special characters in your regexes (except in character sets)!*

###Quantifiers###

Quantifiers allow you to specify the number of matches with your regex.

| Special Character | Use |
| ----------- | ----------- |
| \* | matches 0 or more times (/a*b/ matches "aaab", "b", "ab") |
| \+ | matches 1 or more times |
| \{n\}| match exactly n times (modify to \{n, m\} to match between n and m times) |
| ? | modify other quantifiers from matching the max number of times to matching the minimum number of times |

###Character Classes and Boundaries###

| Special Character | Use |
| ----------- | ----------- |
| \^ | matches the beginning of a string/line |
| $ | matches the end of a string/line |
| \. | matches any single character (except newline character) |
| x\(?=y)| look ahead assertion (only matches x if followed by y) |
| \(?!w)| negated look ahead |
| \[xyz]| character set - match any character in the set  |
| \b | matches a word boundary |
| \B | matches a non-word boundary |
| \d | matches a digit character |
| \D | matches a non-digit character |
| \s | matches a white space character |
| \S | matches non-white space |
| \w | matches any alpha-numeric character (includes underscore) |
| \W | matches any non-word character |

A complete table can be found on [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Using_special_characters)

##Regex Methods##

Here are a few methods that can be used with regex.

| Method | Description |
| ----------- | ----------- |
| .match | returns an array of matches |
| .test | returns true or false if the regex matches |
| .split | splits a string using a matched regex |
| .replace | replaces matches with a new substring |

```javascript
my_regex = /K(athie Lee|elly)/
morning_show_one = "Live! with Regis and Kathie Lee"
morning_show_two = "Live! with Regis and Kelly"
my_regex.test(morning_show_one) // true
morning_show_two.match(my_regex) // ["Kelly", "elly"]
splitter = /and k./
morning_show_one.split(splitter) // ["Live! with Regis ", "lly"]
morning_show_two.replace(my_regex, "Michael/Ryan") // "Live! with Regis and Michael/Ryan"
```

##In Conclusion...##

There is a lot to learn about regex and this is just the tip of the iceberg. 

I used some great resources in my research for this post that I highly recommend checking out:
- [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)
- [Regular-Expressions.info](https://www.regular-expressions.info/tutorial.html)

That's all for this trip but don't you worry, there's plenty more great places all over this internet. I'll be looking for you next time, on Desktops, Dev.to's, and Drives!