Basic RegEx in Javascript for beginners 🔥
Tags: javascript, beginners, webdev, codenewbie
Published: 2020-07-04 20:07:23

##What is regular expression
This is a sequence of character that define a search pattern in a form or text. It is used in popular languages like Javascript, Go, Python, Java, C# which supports regex fully. Text editors like Atom, Sublime and VS code editor use it to find and replace matches in your code.
Example in vs code editor. Click (ALT+ R) to use regex

![regex view in vs code](https://i.ibb.co/sb0xqWt/Screenshot-163.png)

###Applications
- Grabbing HTML tags
- Trimming white spaces
- Removing duplicate text
- Finding or verifying card numbers
- Form Validation
- Matching Ip addresses
- Matching a specific word in a large block of text.

####Literal character
It matches a single character. Example, if you want to match character 'e' in bees and cats.
#### Meta character
Match a range of characters. Example lets do an easy regex to find specific numbers 643 in a series of numbers.It will only match 643 not the rest of the numbers. I am using [Regex101](https://regex101.com/)

![simple regex](https://i.ibb.co/6H9wFXB/643.png)
#####Two ways of writing regex
```JS
   1) const regex = /[a-z]/gi;
   2) const regex = new RegExp(/[a-z], 'gi'/);
```
#### Different types of meta characters include:
##### 1) Single character
```JS
   let regex; 
  // shorthand for the single characters 
   regex = /\d/; //Matches any digital character
   regex = /\w/; // Matches any word character [a-zA-z0-9_]
   regex = /\s/; // Matches any whitespace
   regex = /./;  //Matches any character except line terminators
   regex = /\W/; //Matches any non-word characters. Anything that's not [^a-zA-z0-9]
   regex = /\S/; // Matches any non whitespace
   regex = /\D/; //Matches any non-digit character [^0-9]
   regex = /\b/; //assert position at a word boundary
   regex = /\B/; // matches non-boundary word

   // Single characters
   regex = /[a-z]/; // Matches lowercase letters between a-z (char code 97-122)
   regex = /[A-Z]/; // Matches uppercase letters between A-z (char code 65-90)
   regex = /[0-9]/; // Matches digits numbers between 0-9 (char code 48- 57)
   regex = /[a-zA-Z]/; // matches matches both lower and uppercase letters
   regex = /\./ ; // matches literal character . (char code 46)
   regex = /\(/ ; // matches literal character (
   regex = /\)/ ; // matches literal character )
   regex = /\-/ ; // matches literal character - (char code 95)
```
##### 2) Quantifiers 
They measure how many times you want the single characters to appear. 
```JS
   * : 0 or more
   + : 1 or more
   ? : 0 or 1
   {n,m} : min and max
   {n} : max
  /^[a-z]{5,8}$/; //Matches 5-8 letters btw a-z
  /.+/;  // Matches at least one character to unlimited times
 const regex = /^\d{3}-\d{3}-\d{4}$/; // Matches 907-643-6589

const regex = /^\(?\d{3}\)?$/g  // matches (897) or 897

const regex = /.net|.com|.org/g // matches .com or .net or .org

```
##### 3) Position
```JS
  ^ : asserts position at the start
  $ : asserts position at the end
 \b : word boundary
 const regex = /\b\w+{4}\b/; // Matches four letter word.
```
If you want to look for words with any 4 word character use \b without the boundary it will select any 4 word letters from word characters.
![regex with boundary](https://i.ibb.co/qr5Tvyz/Screenshot-164.png)

#### Character Classes
This are characters that appear with the square brackets [...]
```JS
   let regex;
   regex = /[-.]/; //match a literal . or - character
   regex = /[abc]/; //match character a or b or c
   regex =/^\(?\d{3}\)?[-.]\d{3}[-.]\d{4}$/; // matches (789)-876-4378, 899-876-4378 and 219.876.4378
```
####Capturing groups 
This is used to separate characters within a regular expression and is enclosed with  parentheses (....) 
The below regex pattern captures different groups of the numbers
![regex pattern](https://i.ibb.co/dgx0yM0/capturing-groups.png)

Capturing groups is useful when you want to find and replace some characters. Example you can capture a phone number or a card number and replace it by showing only the first 3-4 digits. Take a look at the example below.
![regex pattern](https://i.ibb.co/DKkb48C/carbon-2.png)
```JS
//How to create a regex pattern for email address

 const regex = /^(\w+)@(\w+)\.([a-z]{2,8})([\.a-z]{2,8})?$/
 
// It matches janetracy@jsninja.co.uk or janetracy@hey.com
```
#### Back reference
You can capture a group within a [regex pattern](https://regex101.com/library/Py5VMF) by using (\1)
```JS
   const regex = /^\b(\w+)\s\1\b$/;
   // This will capture repeated words in a text.
```
Back reference can be used to replace markdown text to html.
![regex pattern](https://i.ibb.co/DWR2ZKQ/carbon-3.png)

###Types of methods used regular expression

####1) Test method
This is a method that you can call on a string and using a regular expression as an argument and returns a boolean as the result. True if the match was found and false if no match found.
```JS
const regex = /^\d{4}$/g; 
regex.test('4567'); // output is true
```
#### 2) match method
It is called on a string with a regular expression and returns an array that contains the results of that search or null if no match is found.
```JS
const s = 'Hello everyone, how are you?';
const regex = /how/;
s.match(regex);
// output "how"
```

#### 3) exec method
It executes a search for a match in a specified string. Returns a result array or null. Both full match and captured groups are returned. 
```JS
   const s = '234-453-7825';
   const regex = /^(\d{3})[-.](\d{3})[.-](\d{4})$/;
   regex.exec(s);
//output ["234-453-7825", "234", "453", "7825"]
```
#### 4) replace method
Takes in two arguments, regex and the string/ callback function you want to replace it with. This method is really powerful and can be used to create different projects like games.
```JS
  const str = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
  const regex = /\b\w{4,6}\b/g;
 const results = str.replace(regex, replace)

 function replace(match){
  return 'replacement';
}
// output 
replacement replacement replacement sit replacement, consectetur adipiscing replacement, sed do eiusmod replacement incididunt ut replacement et replacement replacement replacement.

```
#### 5) split method
The sequence of character that makes where you should split the text. You can call the method it on a string and it takes regular expression as an argument.
```JS
   const s = 'Regex is very useful, especially when verifying card 
   numbers, forms and phone numbers';
   const regex = /,\s+/;
   regex.split(s);
  // output ["Regex is very useful", "especially when verifying card numbers", "forms and phone numbers"]
// Splits the text where is a , or whitespace
   
``` 
###Let's make a small fun project
We want to make a textarea, where you can write any word character and when you click the submit button, the text generated will be individual span tags. When you hover on the span text, background color will change and also the text to (Yesss!!).
Let's do this!!!!!
```Html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Regex expression</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Regex expression exercises</h1>
    <div class="text-container">
        <textarea name="textarea" id="textarea" class = "textarea" cols="60" rows="10">
            Coronavirus disease (COVID-19) is an infectious disease caused by a newly discovered coronavirus.

            Most people 234-9854 infected with the COVID-19 virus will experience mild to moderate respiratory illness and recover without requiring special treatment.  Older people, and those with underlying medical problems like cardiovascular disease, diabetes, chronic respiratory disease, and cancer are more likely to develop serious illness.
            
            The best way to prevent and slow down 456-2904 transmission is be well informed about the COVID-19 virus, the disease it causes and how it spreads. Protect yourself and others from infection by washing your hands or using an alcohol based rub frequently and not touching your face. 
            
            The COVID-19 virus spreads 860-8248 primarily through droplets of saliva or discharge from the nose when an infected person coughs or sneezes, so it’s important that you also practice respiratory etiquette (for example, by coughing into a flexed elbow).        </textarea>
        <div class="result-text">
        </div>
        <button type="submit">Submit</button>
      </div>
    
    <script src="regex.js"></script>
</body>
</html>
```
Let's write the Javascript part
```JS
const button = document.querySelector('button');
const textarea = document.querySelector('textarea');
const resultText = document.querySelector('.result-text');

function regexPattern (){
    
    const regex = /(\W+)/g;
    const str = textarea.value;


    const results = str.split(regex);
    console.log(results);

     
    results.forEach(result =>{
        if(result != null){
            const span = document.createElement('span');
            span.innerHTML = result;
            resultText.appendChild(span);
    



            span.addEventListener ('mouseover', () => {
                const randomColour = Math.floor(Math.random()* 255);
                const randomColour1 = Math.floor(Math.random()* 255);
                const randomColour2 = Math.floor(Math.random()* 255);
                span.style.backgroundColor = `rgba(${randomColour}, ${randomColour1}, ${randomColour2})`; 
                span.textContent = 'Yesss!'               
            });

        }        
        
    });


};

button.addEventListener('click', () => {
    resultText.innerHTML += `<p class ='text-info'>This is what I matched</P>`;

    regexPattern();
});
```
####results
![regex project](https://i.ibb.co/0q9j4LK/screencapture-127-0-0-1-5500-regex-exercise-index-html-2020-07-05-10-22-29.png)
[Source code in my GitHub](https://muchresultinge.github.io/regex-word-generator/)
[Watch the result video](https://vimeo.com/user118963371/review/435428478/e6d146cb59)

#### Websites resources for learning regex in Js
+ 💻[Regular expression info](https://www.regular-expressions.info/quickstart.html)
+ 💻[Regex.com](https://regexr.com/)
+ 💻[Regexone](https://regexone.com/)
+ 💻[Regex101](https://regex101.com/)

#### Youtube videos
+ 🎥[Regular Expressions (Regex) Mini Bootcamp by Colt Steele](https://www.youtube.com/watch?v=EiRGUNrz9MY)
+ 🎥[Learn Regular Expressions In 20 Minutes by Web Dev Simplified](https://www.youtube.com/watch?v=rhzKDrUiJVk)
+ 🎥[Regular Expressions (RegEx) Tutorial by NetNinja](https://www.youtube.com/watch?v=r6I-Ahc0HB4&list=PL4cUxeGkcC9g6m_6Sld9Q4jzqdqHd2)
+ 🎥[Regular Expressions (Regex) in JavaScript by FreecodeCamp](https://www.youtube.com/watch?v=909NfO1St0A)

#### Books
+ 📖[Mastering Regular Expressions by Jeffrey E. F. Friedl](https://www.amazon.com/Mastering-Regular-Expressions-Understand-Productive-ebook/dp/B007I8S1X0)
+ 📕[Regular Expressions Cookbook by Jan Goyvaerts](https://www.amazon.com/Regular-Expressions-Cookbook-Solutions-Programming/dp/1449319432/ref=pd_bxgy_img_3/139-9415231-5476500?_encoding=UTF8&pd_rd_i=1449319432&pd_rd_r=ef24aa36-51bb-4a12-b0d4-2cc69b9fed66&pd_rd_w=FOQLm&pd_rd_wg=73GRS&pf_rd_p=4e3f7fc3-00c8-46a6-a4db-8457e6319578&pf_rd_r=6GP5DZ9VB8174P09BB41&psc=1&refRID=6GP5DZ9VB8174P09BB41)
+ 📙[Introducing Regular Expressions by Michael Fitzgerald](https://www.amazon.com/Introducing-Regular-Expressions-Step-Step/dp/1449392687/ref=sr_1_2?dchild=1&keywords=regex+books&qid=1593950860&s=books&)

###Conclusion
As a code newbie I was terrified when i first saw how regex looks like but this week, I decided to learn it and write about. To be honest I will use this post as a future reference, I hope you will too.
Now that you know how powerful regex is and where it can be applied. Especially in form validation or card number validation. I hope this helps any beginner to understand how powerful regex can be and how to use it.