RegExp.dib

#!meta

{"kernelInfo":{"defaultKernelName":"csharp","items":[{"aliases":[],"name":"csharp"}]}}

#!markdown

<br>

<div style="text-align: center;">
<pre style="display: inline-block; text-align: left;">
 _____            ______          __    __
|  __ \          |  ____|        / /    \ \
| |__) |___  __ _| |__  __  __  | | _ __ | |
|  _  // _ \/ _` |  __| \ \/ /  | || '_ \| |
| | \ \  __/ (_| | |____ >  <   | || |_) | |
|_|  \_\___|\__, |______/_/\_\  | || .__/| |
             __/ |               \_\ |  /_/
            |___/                  |_|
</pre>
</div>

<br>
<br>

#!markdown

<div style="text-align: center;">
<img src="./welcome-to-regex-hell.png" alt="Welcome to regex hell Meme" style="height: 550px;">
</div>

#!markdown

---

#!markdown

# Regex language feature comparison


<img src="./RegexJS.png" alt="Regex Table" style="width: 100%">

> This image is compiled from [Wikipedia](https://en.wikipedia.org/wiki/Comparison_of_regular_expression_engines#Language_features) 2021

So lets focus on JavaScript RegEx

#!markdown

----

# What will we talk about today?

- **Basic concepts (Part 1)**
  - `|` OR statement
  - `( )` Grouping
- **Assertions**
  - `\N`
  - `^` & `$`
  - `[abc]` , `[^xyz]` & `[a-z]`
- **Quantifiers**
  - `?` & `*`
  - `+`
  - `x{n}`, `x{n,}` , `x{,m}`  & `x{n,m}`
  - `x*?`, `x{n,m}?`
- Character classes (Part 2)
  - `.`
  - `\w` & `\W`
  - `\d` & `\D`
  - `\s` & `\S`
  - `\t` , `\r` , `\n` , `\v` , `\f` , `\0`
  - `\xHH` , `\uHHHH` , `\u{HHHH}` or `\u{HHHHH}`
- RegExp flags
  - g = **g***lobal*
  - i = *case* **i***nsensitive*
  - m = **m***ultiline*
  - s = **s***ingle line*
  - u = **u***nicode*  `\p{X}` & `\P{X}`
  - y = *stick***y**
  - d = generate indices for substring matches
- The hard part of RegExp
  - `[ ]` or `( )`
  - Utilizing (named) groups in code
  - difference between exec and match
  
```JavaScript
const raw = /pattern/flags
const cls = new RegExp('pattern', 'flags');
const cls = new RegExp(/pattern/, 'flags');
```

<br>

----

#!markdown

# Basic Consepts

## OR statement

#!javascript

const regex = /gray|grey/

const mkay = regex.test('mkay') // false
const gray = regex.test('gray')
const grey = regex.test('grey')

console.log(`mkay: ${mkay} \ngray: ${gray} \ngrey: ${grey}`)

#!markdown

## Grouping

#!javascript

const regex = /gr(a|e)y/

const mkay = regex.test('mkay')
const gray = regex.test('gray')
const grey = regex.test('grey')

console.log(`mkay: ${mkay} \ngray: ${gray} \ngrey: ${grey}`)

#!markdown

<br>
<br>

---

#!markdown

# Assertions
An Assertion in Regular Expression is **when a match is possible in some way**

### \N

#!javascript

const regexA = /\040/
const regexB = / /

const testA = regexA.test('Hello there')
const testB = regexB.test('Hello there')

console.log(`testA: ${testA}\ntestB: ${testB}`)

#!markdown

### ^ & $

#!javascript

const start = /^start/
const end = /end$/

const startA = start.test('start end')
const startB = start.test(' start end ')

const endA = end.test('start end\n end')
const endB = end.test(' start end ')

console.log(`startA: ${startA}  startB: ${startB}\n- endA: ${endA}  - endB: ${endB}`)

#!markdown

---

#!markdown

### [abc] Character set

#!javascript

const regex = /[eaiou]/g

const response = 'You shall not pass!'.match(regex)

console.log(response)

#!markdown

### [^xyz] Negated set

#!javascript

const regex = /[^eaiou]/g

const response = 'You shall not pass!'.match(regex)

console.log(response)

#!markdown

### [a-z] Range

#!javascript

const regex = /[A-Za-z]/g

const response = 'abcdef]gHIJKLMN'.match(regex)

console.log(response)

#!markdown

<br>

---

#!markdown

# Quantifiers
A quantifier after an element (such as a token, character, or group) specifies how many times the preceding element is allowed to repeat.  
The most common quantifiers are the question mark ?, the asterisk * (derived from the Kleene star), and the plus sign + (Kleene plus).

### ? - 0 or 1

#!javascript

const regex = /^colou?r$/

const colouur = regex.test('colouur')
const colour = regex.test('colour')
const color = regex.test('color')

console.log(`colouur: ${colouur} \ncolour: ${colour} \ncolor: ${color}`)

#!markdown

### * - 0 or more

#!javascript

const regex = /^colou*r$/

const colouur = regex.test('colouur')
const colour = regex.test('colour')
const color = regex.test('color')

console.log(`colouur: ${colouur} \ncolour: ${colour} \ncolor: ${color}`)

#!markdown

---

#!markdown

### + - 1 or more

#!javascript

const regex = /^colou+r$/

const colouur = regex.test('colouur')
const colour = regex.test('colour')
const color = regex.test('color')

console.log(`colouur: ${colouur} \ncolour: ${colour} \ncolor: ${color}`)

#!markdown

### X{n} - N amount

#!javascript

const regexA = /^colou{1}r$/
const regexB = /^colou{2}r$/

const colouurA = regexA.test('colouur')
const colourA = regexA.test('colour')
const colorA = regexA.test('color')

const colouurB = regexB.test('colouur')
const colourB = regexB.test('colour')
const colorB = regexB.test('color')

console.log(`- colouurA: ${colouurA} - colourA: ${colourA}  - colorA: ${colorA}\n- colouurB: ${colouurB}  - colourB: ${colourB} - colorB: ${colorB}`)

#!markdown

<br>
<br>

---

#!markdown

### X{n,} minimum that X needs to be found  
`n` needs to be positive  
`+` is the same as `X{1,}`  
`*` is the same as `X{0,}`  
`?` is the same as `X{0,1}`

#!javascript

const regex = /^colou{2,}r$/

const colouuur = regex.test('colouuur')
const colouur = regex.test('colouur')
const colour = regex.test('colour')

console.log(`colouuur: ${colouuur} - colouur: ${colouur} - colour: ${colour}`)

#!markdown

### X{n,m} minimum and maximum
`m` always needs to be bigger then what is before the `,`  
`?` is the same as `X{0,1}`  
> Some browsers accept `X{,1}` to be the same as `X{0,1}`

#!javascript

const regex = /^colou{2,3}r$/

const colouuuur = regex.test('colouuuur')
const colouuur = regex.test('colouuur')
const colouur = regex.test('colouur')
const colour = regex.test('colour')

console.log(`colouuuur: ${colouuuur} - colouur: ${colouur} \ncolouuur: ${colouuur}   - colour: ${colour}`)

#!markdown

---

### X+? and X{n,m}? - Lazy quantifiers

So all the quantifiers that we just went over can be made lazy with an additional ?  
By default are the expressions greedy.

Yes `x??` is possible.  
No I have not found a use case for `x??`

#!javascript

// Also named a greedy quantifier
const regexGreedy = /"(.*)"/g
const quotes = `Is it "You shall not pass!" or is it "You cannot pass!"`

const responseGreedy = quotes.match(regexGreedy)

// Also named a lazy quantifier due to the ?
const regexLazy = /"(.*?)"/g

const responseLazy = quotes.match(regexLazy)

console.log(`Greedy: [${responseGreedy}] \nLazy: [${responseLazy}]`)

#!markdown

<div style="text-align: center;">
<img src="./toy-story-greed.jpeg" alt="Toy story greed Meme" style="height: 350px;">
</div>

---

#!markdown

<br>

<div style="text-align: center;">
<pre style="display: inline-block; text-align: left;">
  ______           _            __     _____           _       __ 
 |  ____|         | |          / _|   |  __ \         | |     /_ |
 | |__   _ __   __| |     ___ | |_    | |__) |_ _ _ __| |_     | |
 |  __| | '_ \ / _` |    / _ \|  _|   |  ___/ _` | '__| __|    | |
 | |____| | | | (_| |   | (_) | |     | |  | (_| | |  | |_     | |
 |______|_| |_|\__,_|    \___/|_|     |_|   \__,_|_|   \__|    |_|
                                                                  
                                                                  
</pre>
</div>

<br>
<br>

#!markdown

<div style="text-align: center;">
<img src="./yer-a-regex-wizard.jpg" alt="Yer a regex wizard Meme" style="height: 550px;">
</div>

<br>

---

#!markdown

<br>

<div style="text-align: center;">
<pre style="display: inline-block; text-align: left;">
 _____            ______         __    __      _____           _       ___  
|  __ \          |  ____|       / /    \ \    |  __ \         | |     |__ \ 
| |__) |___  __ _| |__  __  __ | | _ __ | |   | |__) |_ _ _ __| |_       ) |
|  _  // _ \/ _` |  __| \ \/ / | || '_ \| |   |  ___/ _` | '__| __|     / / 
| | \ \  __/ (_| | |____ >  <  | || |_) | |   | |  | (_| | |  | |_     / /_ 
|_|  \_\___|\__, |______/_/\_\ | || .__/| |   |_|   \__,_|_|   \__|   |____|
             __/ |              \_\ |  /_/                                  
            |___/                 |_|                                       
</pre>
</div>

<br>
<br>

#!markdown

<div style="text-align: center;">
<img src="./how-to-catex.webp" alt="How to Catex Meme" style="height: 525px;">
</div>

#!markdown

----

# What will we talk about today?


- Basic concepts (Part 1)
  - `|` OR statement
  - `( )` Grouping
- Assertions
  - `\N`
  - `^` & `$`
  - `[abc]` , `[^xyz]` & `[a-z]`
- Quantifiers
  - `?` & `*`
  - `+`
  - `x{n}`, `x{n,}` , `x{,m}`  & `x{n,m}`
  - `x*?`, `x{n,m}?`
- **Character classes (Part 2)**
  - `.` 
  - `\w` & `\W`
  - `\d` & `\D`
  - `\s` & `\S`
  - `\t` , `\r` , `\n` , `\v` , `\f` , `\0`
  - `\xHH` , `\uHHHH` , `\u{HHHH}` or `\u{HHHHH}`
- **RegExp flags**
  - g = **g***lobal*
  - i = *case* **i***nsensitive*
  - m = **m***ultiline*
  - s = **s***ingle line*
  - u = **u***nicode*  `\p{X}` & `\P{X}`
  - y = *stick***y**
  - d = generate indices for substring matches
- **The hard part of RegExp**
  - ` [ ] ` or ` ( ) `
  - Utilizing (named) groups in code
  - difference between exec and match
  
```JavaScript
const raw = /pattern/flags
const cls = new RegExp('pattern', 'flags');
const cls = new RegExp(/pattern/, 'flags');
```
----

#!markdown

# Character classes
**Character classes** are one of the most commonly used features of **regular expressions**.  
A character class allows you to match any symbol from a certain character set. A character class is also called a character set

### . - Yes that is a character class

#!javascript

const regex = /.+/

const mkay = regex.test('mkay')
const gray = regex.test('gray')
const grey = regex.test('grey')

console.log(`mkay: ${mkay} \ngray: ${gray} \ngrey: ${grey}`)

#!markdown

<div style="text-align: center;">
<img src="./first-the-dot.jpg" alt="First the dot Meme" Meme" style="height: 425px;">
</div>

#!markdown

<br>

----

### \w & \W

#!javascript

const regexA = /\w+/g
const regexB = /[a-zA-Z0-9_]+/g

const responseA = 'You shall not pass!'.match(regexA)
const responseB = 'You shall not pass!'.match(regexB)

console.log('Response A: ', responseA)
console.log('Response B: ', responseB)

#!javascript

const regexA = /\W+/g
const regexB = /[^a-zA-Z0-9_]/g

const responseA = 'You shall not pass!'.match(regexA)
const responseB = 'You shall not pass!'.match(regexB)

console.log('Response A: ', responseA)
console.log('Response B: ', responseB)

#!markdown

<br>
<br>

----

### \d & \D

#!javascript

const regexA = /\d/g
const regexB = /[0-9]/g


const responseA = 'I can only count to 4. 1, 2, 5, 4. Me count so poor'.match(regexA)
const responseB = 'I can only count to 4. 1, 2, 5, 4. Me count so poor'.match(regexB)

console.log('Response A: ', responseA)
console.log('Response B: ', responseB)

#!javascript

const regexA = /\D/g
const regexB = /[^0-9]/g


const responseA = 'I can only count to 4. 1, 2, 5, 4. Me count so poor'.match(regexA)
const responseB = 'I can only count to 4. 1, 2, 5, 4. Me count so poor'.match(regexB)

console.log('Response A: ', responseA)
console.log('Response B: ', responseB)

#!markdown

----

### \s & \S

#!javascript

const regexA = /\s/g
const regexB = /[ \t\n]/g

const responseA = 'You shall not pass!'.match(regexA)
const responseB = 'You shall not pass!'.match(regexB)

console.log('Response A: ', responseA)
console.log('Response B: ', responseB)

#!javascript

const regexA = /\S/g
const regexB = /[^ \t\n]/g

const responseA = 'You shall not pass!'.match(regexA)
const responseB = 'You shall not pass!'.match(regexB)

console.log('Response A: ', responseA)
console.log('Response B: ', responseB)

#!markdown

<br>
<br>

----

### \t, \r, \n

#!javascript

const regexA = /\t/
const regexB = /	/ // tab token

const responseA = '		Tabs vs spaces'.match(regexA)
const responseB = '		Tabs vs spaces'.match(regexB)

console.log(responseA)
console.log(responseB) // note the rendered \t

#!javascript

const regexA = /\r\n/ // known as CRLF used in Windows (can be set by your code editor)
const regexB = /\n/ // known as LF is used in Unix, Unix only uses LF as line breaks.
const regexC = /\r/ // known as CR used in the old MacOS (pre-OSX MacIntosh)

const textA = '\r\n'
const textB = '\n'
const textC = '\r'

const resultA = [regexA.test(textA), regexA.test(textB), regexA.test(textC)]
const resultB = [regexB.test(textA), regexB.test(textB), regexB.test(textC)]
const resultC = [regexC.test(textA), regexC.test(textB), regexC.test(textC)]

console.log(['\r\n', '\n', '\r'])
console.log(resultA)
console.log(resultB)
console.log(resultC)

#!markdown

----

### \0, \f, \v

#!javascript

// Machtes a null caracter
const nullRegex = /\0/

// A hidden white space
const whiteSpaceR = /\f/ // the readable version
const whiteSpaceH = // // my editor makes it look like this


const vSimple = /\v/ // matches unicode vertical whitespace, considered a character class by the PCRE engine
const vFull = /[\n\r\f\u000B\u0085\u2028\u2029]/ // or its represented like this

const verticalTabR = /\u000B/
const verticalTabH = // // the vertical tab

const lineSeparatorR = /\u0085/ 
const lineSeparatorH = /…/ // the line separator

// The following info will VS Code show 
// The character U+2028 "
" and U+2029 "
" could be confused with the character U+0020, which is more common in source code. Adjust settings
const weirdSpace0R = /\u2028/ 
const weirdSpace0H = /
/ 
const weirdSpace1R = /\u2029/
const weirdSpace1H = /
/ 

#!markdown

[Stack**overflow**](https://stackoverflow.com/a/9168133/7185314)
> it's a feature of the JavaScript language, documented in the ECMAScript standard (3rd edition section 7.3),  
> that the U+2028 and U+2029 characters count as line endings.  
> Consequently a JavaScript parser will treat any unencoded U+2028/9 character in the same way as a newline.  
> Since you can't put a newline inside a string literal, you get a syntax error.  
>  
> This is an unfortunate oversight in the design of JSON: it is not actually a proper subset of JavaScript.  
> Raw U+2028/9 characters are valid in string literals in JSON,  
> and will be accepted by JSON.parse, but not so in JavaScript itself.  
>  
> Hence it is only safe to generate JavaScript code using a JSON parser if you're sure it explicitly \u-escapes those characters.  
> Some do, some don't; many \u-escape all non-ASCII characters, which avoids the problem.

---

#!markdown

### \xHH , \uHHHH , \u{HHHH} or \u{HHHHH}
As shown in the **\0, \f, \v** part above we have seen some use of the \uHHHH

***WARNING*** The use of \u{HHHH} or \u{HHHHH} might not be supported in all browsers / js engines

#!javascript

const regexA = /\u000B/ // \uHHHH matches 4 hexadecimal digits this one is used on previouse page as well
const regexB = /\x0B/ // \xHH matches 2 hexadecimal digits
const regexC = /\u{000B}/u // \u{HHHH} matches 4 hexadecimal digits when unicode flag is used
const regexD = /\u{0000B}/u // \u{HHHHH} matches Surrogates and Supplementary characters in the hexadecimal 

const text = ''

resultA = regexA.test(text)
resultB = regexB.test(text)
resultC = regexC.test(text)
resultD = regexD.test(text)

console.log(`\\u000B: ${resultA} \n\\x0B: ${resultB} \n\\u{000B}: ${resultC} \n\\u{0000B}: ${resultD}`)

#!markdown

Oracle:
> To support supplementary characters without changing the char primitive data type and causing incompatibility with previous Java programs, supplementary characters are defined by a pair of code point values that are called surrogates. The first code point is from the high surrogates range of U+D800 to U+DBFF, and the second code point is from the low surrogates range of U+DC00 to U+DFFF. For example, the Deseret character LONG I, U+10400, is defined with this pair of surrogate values: U+D801 and U+DC00.

Windows:
> Windows applications normally use UTF-16 to represent Unicode character data. The use of 16 bits allows direct representation of 65,536 unique characters, but this Basic Multilingual Plane (BMP) is not nearly enough to cover all the symbols used in human languages. Unicode version 4.1 includes over 97,000 characters, with over 70,000 characters for Chinese alone.
>
> The Unicode standard has established 16 additional "planes" of characters, each the same size as the BMP. Naturally, most code points beyond the BMP do not yet have characters assigned to them, but definition of the planes gives Unicode the potential to define 1,114,112 characters (that is, 216 * 17 characters) within the code point range U+0000 to U+10FFFF. For UTF-16 to represent this larger set of characters, the Unicode Standard defines "supplementary characters".

#!markdown

----

# Flags

Regular expressions have optional flags that allow for functionality like global searching and case-insensitive searching.  
These flags can be used separately or together in any order,  
and are included as part of the regular expression. 

#!javascript

const raw = /pattern/flags
const cls = new RegExp('pattern', 'flags');
const cls = new RegExp(/pattern/, 'flags');

#!markdown

## Flags we have seen here

- Global
- Unicode

What do we remember of them?

<div style="text-align: center;">
<img src="./regex-math.png" alt="Regex math Meme" style="height: 300px;">
</div>

<br>
<br>

----

#### /g - Continues to find more matches after the first one

#!javascript

const regex1 = new RegExp('foo', 'g');
const regex2 = new RegExp('bar', '');

// expected output: regex1: true regex2: false
console.log(`Example1: regex1: ${regex1.global} regex2: ${regex2.global}`);

const regexp1 = /t(e)(st(\d?))/g; // \d matches numbers
const regexp2 = /t(e)(st(\d?))/;
const str = 'test1test2';

const arrayAll = [...str.matchAll(regexp1)];
const arrayMatchA = str.match(regexp1)
const arrayMatchB = str.match(regexp2)

console.log('Example2')
console.log(arrayAll[0]);
// expected output: arrayAll ["test1", "e", "st1", "1"]

console.log(arrayAll[1]);
// expected output: arrayAll ["test2", "e", "st2", "2"]

console.log(arrayMatchA);
// expected output: arrayMatchA ["test1", "test1"]

console.log(arrayMatchB);
// expected output: arrayMatchB ["test1", "e", "st1", "1"]

#!markdown

----

#### /u - Having the power of unicode's!

#!javascript

const regex1 = /\p{Emoji_Presentation}/g
const regex2 = /\p{Emoji_Presentation}/gu
const regex3 = /\p{Script_Extensions=Armenian}+/gu
const regex4 = /\P{Script_Extensions=Armenian}+/gu
const regex5 = /\u{000B}/u // \u{HHHH} matches 4 hexadecimal digits when unicode flag is used
const regex6 = /\u{0000B}/u // \u{HHHHH} matches Surrogates and Supplementary characters in the hexadecimal 

const str = 'զվարճանք is the word "fun" in Armenian 👌 '

console.log(str.match(regex1))
console.log(str.match(regex2))
console.log(str.match(regex3))
console.log(str.match(regex4))
console.log(str.match(regex4))
console.log(str.match(regex4))

#!markdown

##### Other handy modifiers from \p

`/\p{Lu}/` Matches an uppercase letter that has an lowercase variant  
`/\p{Ll}/` Matches a lowercase letter that has an uppercase variant  
You do not need to use the /u flag on those modifiers.  

----

#### /i /m /s

#!javascript

const regexI1 = /NOTE/i // case Insensitve flag
const regexI2 = /NOTE/

const test1 = regexI1.test('note')
const test2 = regexI2.test('note')

console.log(`Case insensitve: ${test1}  expected: true \nCase sensitve:   ${test2} expected: false`)

#!javascript

const regexM1 = /^foo/m // Multiline flag
const regexM2 = /^foo/

const test1 = regexM1.test('\nfoo') // Regex sees everly line as start of matching
const test2 = regexM2.test('\nfoo') // Regex sees \n as start of matching

console.log(`Multiline on:  ${test1}  expected: true \nMultiline off: ${test2} expected: false`)

#!javascript

const regexS1 = /bar.example/s // Single line flag
const regexS2 = /bar.example/

const str = 'bar\nexample foo example' // multi line string

console.log(`Test on new line: ${regexS1.test(str)}  | expected: true \nTest on new line: ${regexS2.test(str)} | expected: false`)

#!markdown

----

#### /y
Perform a "stick**y**" search that matches starting at the current position in the target string

#!javascript

const regex = /^foo/my

regex.lastIndex = 2;
const res1 = regex.test('..foo')

regex.lastIndex = 2;
const res2 = regex.test('.\nfoo')

console.log(` "..foo": ${res1} \n ".\\nfoo": ${res2} `)

#!markdown

#### /d

in**d**ices. The JavaScript regex engine now returns the indices at which the regex matched in the subject string.

#!javascript

const regexD1 = /foo/gd // Gives string position of your matches
const regexD2 = /foo/g

const str = 'foo bar foo'
console.log(regexD1.exec(str).indices[0])
console.log(regexD1.exec(str).indices[0])
console.log(regexD2.exec(str).indices)

#!markdown

----

## The hard part of RegExp

#### ( ) and [ ]

#!javascript

const regexA = /gr(a|e)y/
const regexB = /gr[ae]y/

const mkayA = regexA.test('mkay')
const grayA = regexA.test('gray')
const greyA = regexA.test('grey')

const mkayB = regexB.test('mkay')
const grayB = regexB.test('gray')
const greyB = regexB.test('grey')

console.log(`mkayA: ${mkayA} | mkayB: ${mkayB} \ngrayA: ${grayA}  | grayB: ${grayB} \ngreyA: ${greyA}  | greyB: ${greyB}`)

#!markdown

#### Utilizing (named) groups in code

> Comment and uncomment to see the difference with named groups and without

#!javascript

const imageDescription = 'This image has a resolution of 1440x900 pixels.'
// const regexpSize = /(([0-9]+)x([0-9]+)) pixels/ // before named groups where a thing 🧠
const regexpSize = /(?<resolution>(?<width>[0-9]+)x(?<height>[0-9]+)) pixels/ // adding named groups making it readable ✨
const result = imageDescription.match(regexpSize)
const [fullMatch, group1, group2, group3] = result
const { resolution, width, height } = result.groups
console.log(`Group - Width: ${group2} / Height: ${group3}. Resolution: ${group1}. Full match: ${fullMatch}`)
// expected output: "Group - Width: 1440 / Height: 900. Resolution: 1440x900. Full match: 1440x900 pixels"
console.log(`Named - Width: ${width} / Height: ${height}. Resolution: ${resolution}. Full match: ${fullMatch}`)
// expected output: "Named - Width: 1440 / Height: 900. Resolution: 1440x900. Full match: 1440x900 pixels"

#!markdown

---

#### Difference between exec and match

`string.match(regexp)`  
does not update the state of the regexp

`regexp.exec(string)`  
does update the state of the regexp

example modified from [mdn web docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec)

#!javascript

const regexp = RegExp('foo*', 'g');
const string = 'table football, foosball';
let array1;
let array2;

array1 = string.match(regexp)
console.log(`Found ${array1[0]}. Next starts at ${regexp.lastIndex}.`);
// Expected output: "Found foo. Next starts at 0."

while ((array2 = regexp.exec(string)) !== null) {
  console.log(`Found ${array2[0]}. Next starts at ${regexp.lastIndex}.`);
  // Expected output: "Found foo. Next starts at 9."
  // Expected output: "Found foo. Next starts at 19."
}

array1 = string.match(regexp) // does not care of the regexp state
console.log(`Found ${array1[0]}. Next starts at ${regexp.lastIndex}.`);
// Expected output: "Found foo. Next starts at 0."

#!markdown

----
<br>

<div style="text-align: center;">
<pre style="display: inline-block; text-align: left;">
  ______           _            __     _____                         __    __  
 |  ____|         | |          / _|   |  __ \                       / /    \ \ 
 | |__   _ __   __| |     ___ | |_    | |__) |___  __ _  _____  __ | | _ __ | |
 |  __| | '_ \ / _` |    / _ \|  _|   |  _  // _ \/ _` |/ _ \ \/ / | || '_ \| |
 | |____| | | | (_| |   | (_) | |     | | \ \  __/ (_| |  __/>  <  | || |_) | |
 |______|_| |_|\__,_|    \___/|_|     |_|  \_\___|\__, |\___/_/\_\ | || .__/| |
                                                   __/ |            \_\ |  /_/ 
                                                  |___/               |_|      
</pre>
</div>

<br>
<br>

<div style="text-align: center;">
<img src="./I-know-regex.png" alt="I know regex Meme" style="height: 600px;">
</div>

----