Regex: An intro
Tags: javascript, beginners
Published: 2022-02-01 12:56:07


### What is Regex?
Regex is a shortened term for Regular Expression. Regex patterns are used to find, replace or search for text. These patterns may be difficult to read sometimes because they are composed of simple characters such as `/code/` or a combination of simple and special characters, such as `/code*s/` or `/Number (\d+)\.\d*/`. 


### Creating a regular expression in Javascript
You can create it with the `RegExp` object 
```
const regexp = new RegExp('pattern', 'flag(s)');
```
or using the literal method
```
const regexp = /pattern/flag(s); 
```

### When can you use Regex?
Regex can be used to perform the following actions:
- user input validation, e.g. password checker, email validation
- finding a  specific text from a large glob of text 
- searching for things that match a given pattern
- transforming a text from one format to another


### Regex Methods in Javascript
#### - `regexp.test(str)` method:
The test method allows you to search for a match between a regex and a string. It returns a boolean, `true` or `false`
```
const str = 'Hello World';
const regexp = /World/;
console.log(regexp.test(str)); // true
```


#### -  `regexp.exec(str)` method:
While the `test()` method allows you to search if a pattern exists within a string, the `exec()` method will enable you to retrieve the actual match from the string.
```
const str = 'Hello World';
const regexp = /l/;
console.log(regexp.exec(str)); 
```
This would only return the first match. 
`[ 'l', index: 2, input: 'Hello World', groups: undefined ]`


### Searching with flags

| Flags   | Description  |
| :---        |    :----:   |
|i     | this flag allows all the search to be case-insensitive. | 
| g      | this performs a global search for all matches; only the first match would be retrieved if not used. | 
| m |      this allows multi-line search| 
| s      | this allows a `.` to match a newline character `\n`. | 
|u     |this allows you to use Unicode-related features.| 
|y      | this performs a "sticky" search that matches starting at the current position in the target string  | 

An example:
Using the previous example, `'Hello World'` would return `true`, but `'Hello world'` would return `false` because of the case sensitivity of Regex. You can fix this with the `i` flag so that /World/i would return true for both strings.
```
const str = 'Hello World';
const str2 = 'Hello world';
const regexp = /World/i;
console.log(regexp.test(str)); // true
console.log(regexp.test(str2)); // true
```



### Special characters

^ : matches the starting position within the string
```
const regexp = /^hi/;
console.log(regexp.test('hi')); // true
console.log(regexp.test('hello')); // false
```
$: matches the end position within the string 
```
const regexp = /bye$/;
console.log(regexp.test('goodbye'));// true
console.log(regexp.test('welcome'));// false
```
&#124; :`or` operator. matches previous character `or` next character
```
const regexp = /(hi|hello) world/;
console.log(regexp.test('hi world'));// true
console.log(regexp.test('hello world'));// true
console.log(regexp.test('bye world'));// false
```
&#043;  : matches the previous element one or more times 
```
const regexp = /groo+t/;
console.log(regexp.test('groot'));// true
console.log(regexp.test('grooooot'));// true
console.log(regexp.test('grot'));// false
```
&#042;  : matches  the previous element zero, one or more times
```
const regexp = /groo*t/;
console.log(regexp.test('groot'));// true
console.log(regexp.test('grooooot'));// true
console.log(regexp.test('grot'));// true
```
?: matches the previous element zero or one time
```
const regexp = /groo?t/;
console.log(regexp.test('groot'));// true
console.log(regexp.test('grooooot'));// false
console.log(regexp.test('grot'));// true
```

.  : matches any single character
```
const regexp = /gr.t/;
console.log(regexp.test('grit'));// true
console.log(regexp.test('grot'));// true
```
[]: matches a range of characters
```
const regexp = /[cb]at/;
console.log(regexp.test('cat'));// true
console.log(regexp.test('bat'));// true
console.log(regexp.test('sat'));// false
```
{ x,y }: matches a specified number of occurrences of x up to y
```
const regexp = /gro{2,4}t/;
console.log(regexp.test('groooot'));// true
console.log(regexp.test('grot'));// false
console.log(regexp.test('groot'));// true
``` 
\ : used to escape a special character
(): groups characters 
   
 
Resources:
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp