Skip to content

Commit d7a684f

Browse files
shreyasminochashreyasminocha
committed
Make Example use a regex parameter
As opposed to using two string parameters: `source` and `flags`.
1 parent a65896e commit d7a684f

10 files changed

Lines changed: 54 additions & 58 deletions

File tree

‎chapters/alternation.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Alternation allows matching _one_ of several phrases. This is more powerful than
44

55
Delimit the set of phrases with pipes—`|`.
66

7-
<Example source="foo|bar|baz" flags="g">
7+
<Example regex={/foo|bar|baz/g}>
88
<String>foo baz</String>
99
<String>Your food</String>
1010
<String>Behind bars</String>
@@ -16,7 +16,7 @@ Delimit the set of phrases with pipes—`|`.
1616

1717
If only a part of the regex is to be "alternated", wrap that part with a [group](/chapter/groups)—capturing or non-capturing.
1818

19-
<Example source="Try (foo|bar|baz)" flags="g">
19+
<Example regex={/Try (foo|bar|baz)/g}>
2020
<String>Try foo</String>
2121
<String>Try bar</String>
2222
<String>Try baz</String>
@@ -29,7 +29,7 @@ If only a part of the regex is to be "alternated", wrap that part with a [group]
2929

3030
Matching numbers between 100 and 250:
3131

32-
<Example source="1\d\d|2[0-4]\d|250" flags="g">
32+
<Example regex={/1\d\d|2[0-4]\d|250/g}>
3333
<String>100, 157, 199</String>
3434
<String>139 + 140 = 279</String>
3535
<String>201 INR</String>

‎chapters/anchors.mdx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Marked by a carat (`^`) at the beginning of the regex, this anchor makes it nece
1010

1111
You can think of it as matching an _invisible character_ always present at the _beginning_ of the string.
1212

13-
<Example source="^p" flags="g">
13+
<Example regex={/^p/g}>
1414
<String>photoshop</String>
1515
<String>pineapple</String>
1616
<String>tap</String>
@@ -25,7 +25,7 @@ This anchor marked by a dollar (`$`) at the end of the regex. It is analogous to
2525

2626
You can think of it as matching an _invisible character_ always present at the _end_ of the string.
2727

28-
<Example source="p$" flags="g">
28+
<Example regex={/p$/g}>
2929
<String>photoshop</String>
3030
<String>pineapple</String>
3131
<String>apple</String>
@@ -38,7 +38,7 @@ You can think of it as matching an _invisible character_ always present at the _
3838

3939
The `^` and `$` anchors are often used in conjunction to ensure that the regex matches the entirety of the string, rather than just a part.
4040

41-
<Example source="^p$" flags="g">
41+
<Example regex={/^p$/g}>
4242
<String>p</String>
4343
<String>pi</String>
4444
<String>pea</String>
@@ -48,7 +48,7 @@ The `^` and `$` anchors are often used in conjunction to ensure that the regex m
4848

4949
Let's revisit an example from [_Repetition_](/chapters/repetition), except we add the two anchors at the ends of the regex.
5050

51-
<Example source="^https?$" flags="g">
51+
<Example regex={/^https?$/g}>
5252
<String>http</String>
5353
<String>https</String>
5454
<String>http/2</String>
@@ -64,7 +64,7 @@ A word boundary is a _position_ between a [word character](/chapters/character-e
6464

6565
The word boundary anchor, `\b`, once again matches an imaginary invisible character that exists between consecutive word and non-word characters.
6666

67-
<Example source="\bp" flags="g">
67+
<Example regex={/\bp/g}>
6868
<String>peach</String>
6969
<String>banana, peach</String>
7070
<String>banana+peach</String>
@@ -77,7 +77,7 @@ The word boundary anchor, `\b`, once again matches an imaginary invisible charac
7777
Words characters include <code>a-z</code>, <code>A-Z</code>,{" "}
7878
<code>0-9</code>, and <code>_</code>.
7979
</Note>
80-
<Example source="\bp\b" flags="g">
80+
<Example regex={/\bp\b/g}>
8181
<String>word p word</String>
8282
<String>(p)</String>
8383
<String>p+q+r</String>
@@ -92,14 +92,14 @@ There is also a non-word-boundary anchors: `\B`.
9292

9393
As the name suggests, it matches everything apart from word boundaries.
9494

95-
<Example source="\Bp" flags="g">
95+
<Example regex={/\Bp/g}>
9696
<String>ape</String>
9797
<String>leap</String>
9898
<String>(leap)</String>
9999
<String>a pot</String>
100100
<String>pea</String>
101101
</Example>
102-
<Example source="\Bp\B" flags="g">
102+
<Example regex={/\Bp\B/g}>
103103
<String>ape</String>
104104
<String>_peel</String>
105105
<String>leap</String>

‎chapters/basics.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Regular expressions are typically formatted as `/<rules>/<flags>`. Often people
44

55
Let's start with the regex `/p/g`.
66

7-
<Example source="p" flags="g">
7+
<Example regex={/p/g}>
88
<String>pancake</String>
99
<String>pineapple</String>
1010
<String>apple</String>
@@ -14,7 +14,7 @@ Let's start with the regex `/p/g`.
1414

1515
As we can see, `/p/g` matches all lowercase `p` characters. Note that regexes are case sensitive by default. If the regex has one or more "matches" within the input string, it is said to "match" the regex. Think of "the matches" as an array, and whether an input "matches" a regex as a boolean.
1616

17-
<Example source="pp" flags="g">
17+
<Example regex={/pp/g}>
1818
<String>apple</String>
1919
<String>pineapple</String>
2020
<String>happiness</String>

‎chapters/character-classes.mdx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
It's possible to match a character from one of several characters. Here's an example:
44

5-
<Example source="[aeiou]" flags="g">
5+
<Example regex={/[aeiou]/g}>
66
<String>avocado</String>
77
<String>brinjal</String>
88
<String>onion</String>
@@ -13,7 +13,7 @@ Our regex `/[aeiou]/g` matches all vowels in our input strings.
1313

1414
Here's another example of these in action:
1515

16-
<Example source="p[aeiou]t" flags="g">
16+
<Example regex={/p[aeiou]t/g}>
1717
<String>pat</String>
1818
<String>pet</String>
1919
<String>pit</String>
@@ -26,7 +26,7 @@ We match a `p`, followed by one of the vowels, followed by a `t`.
2626

2727
There's an intuitive shortcut for matching a character from within a continuous _range_.
2828

29-
<Example source="[a-z]" flags="g">
29+
<Example regex={/[a-z]/g}>
3030
<String>john_s</String>
3131
<String>matej29</String>
3232
<String>Ayesha?!</String>
@@ -41,7 +41,7 @@ There's an intuitive shortcut for matching a character from within a continuous
4141

4242
We can combine ranges and individual characters in our regexes.
4343

44-
<Example source="[A-Za-z0-9_-]" flags="g">
44+
<Example regex={/[A-Za-z0-9_-]/g}>
4545
<String>john_s</String>
4646
<String>matej29</String>
4747
<String>Ayesha?!</String>
@@ -58,7 +58,7 @@ Our regex `/[A-Za-z0-9_-]/g` matches a single character, which must be (at least
5858

5959
We can also "negate" these rules:
6060

61-
<Example source="[^aeiou]" flags="g">
61+
<Example regex={/[^aeiou]/g}>
6262
<String>Umbrella</String>
6363
<String>cauliflower</String>
6464
<String>ou</String>

‎chapters/character-escapes.mdx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,19 @@ Character escapes act as shorthands for some common character classes.
66

77
The character escape `\d` matches digit characters, from `0` to `9`. It is equivalent to the character class `[0-9]`.
88

9-
<Example source="\d" flags="g">
9+
<Example regex={/\d/g}>
1010
<String>2020</String>
1111
<String>100/100</String>
1212
<String>It costs $5.45</String>
1313
<String>3.14159</String>
1414
</Example>
15-
<Example source="\d\d" flags="g">
15+
<Example regex={/\d\d/g}>
1616
<String>2020</String>
1717
<String>100/100</String>
1818
<String>It costs $5.45</String>
1919
<String>3.14159</String>
2020
</Example>
21-
<Example source="\D" flags="g">
21+
<Example regex={/\D/g}>
2222
<String>2020</String>
2323
<String>100/100</String>
2424
<String>It costs $5.45</String>
@@ -36,7 +36,7 @@ The escape `\w` matches characters deemed "word characters". These include:
3636

3737
It is thus equivalelnt to the character class `[a-zA-Z0-9_]`.
3838

39-
<Example source="\w" flags="g">
39+
<Example regex={/\w/g}>
4040
<String>john_s</String>
4141
<String>matej29</String>
4242
<String>Ayesha?!</String>
@@ -46,7 +46,7 @@ It is thus equivalelnt to the character class `[a-zA-Z0-9_]`.
4646
<String>get out</String>
4747
<String>21*2 = 42(1)</String>
4848
</Example>
49-
<Example source="\W" flags="g">
49+
<Example regex={/\W/g}>
5050
<String>john_s</String>
5151
<String>Ayesha?!</String>
5252
<String>4952</String>
@@ -73,12 +73,12 @@ The technicalities, however, will usually not be important.
7373

7474
This escape is difficult to demonstrate through my `Example` component. However, a few elementary examples follow anyway.
7575

76-
<Example source="\s" flags="g">
76+
<Example regex={/\s/g}>
7777
<String>word word</String>
7878
<String>tabs vs spaces</String>
7979
<String>snake_case.jpg</String>
8080
</Example>
81-
<Example source="\S" flags="g">
81+
<Example regex={/\S/g}>
8282
<String>word word</String>
8383
<String>tabs vs spaces</String>
8484
<String>snake_case.jpg</String>
@@ -88,7 +88,7 @@ This escape is difficult to demonstrate through my `Example` component. However,
8888

8989
While not a typical character escape, `.` matches any[^1] character.
9090

91-
<Example source="." flags="g">
91+
<Example regex={/./g}>
9292
<String>john_s</String>
9393
<String>Ayesha?!</String>
9494
<String>4952</String>

‎chapters/escapes.mdx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@ This is done by **prefixing the character with a `\`**.
2525

2626
---
2727

28-
<Example source="\(paren\)" flags="g">
28+
<Example regex={/\(paren\)/g}>
2929
<String>paren</String>
3030
<String>(paren)</String>
3131
<String>a (paren)</String>
3232
</Example>
33-
<Example source="(paren)" flags="g">
33+
<Example regex={/(paren)/g}>
3434
<String>paren</String>
3535
<String>parents</String>
3636
<String>(paren)</String>
@@ -39,14 +39,14 @@ This is done by **prefixing the character with a `\`**.
3939

4040
---
4141

42-
<Example source="example\.com" flags="g">
42+
<Example regex={/example\.com/g}>
4343
<String>example.com</String>
4444
<String>a.example.com/foo</String>
4545
<String>example_com</String>
4646
<String>example@com</String>
4747
<String>example_com/foo</String>
4848
</Example>
49-
<Example source="example.com" flags="g">
49+
<Example regex={/example.com/g}>
5050
<String>example.com</String>
5151
<String>a.example.com/foo</String>
5252
<String>example_com</String>
@@ -56,13 +56,13 @@ This is done by **prefixing the character with a `\`**.
5656

5757
---
5858

59-
<Example source="A\+" flags="g">
59+
<Example regex={/A\+/g}>
6060
<String>A+</String>
6161
<String>A+B</String>
6262
<String>5A+</String>
6363
<String>AAA</String>
6464
</Example>
65-
<Example source="A+" flags="g">
65+
<Example regex={/A+/g}>
6666
<String>A+</String>
6767
<String>A+B</String>
6868
<String>5A+</String>
@@ -71,12 +71,12 @@ This is done by **prefixing the character with a `\`**.
7171

7272
---
7373

74-
<Example source="worth \$5" flags="g">
74+
<Example regex={/worth \$5/g}>
7575
<String>worth $5</String>
7676
<String>worth $54</String>
7777
<String>not worth $5</String>
7878
</Example>
79-
<Example source="worth $5" flags="g">
79+
<Example regex={/worth $5/g}>
8080
<String>worth $5</String>
8181
<String>worth $54</String>
8282
<String>not worth $5</String>

‎chapters/flags.mdx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@ There are 5 kinds of flags:
1212

1313
All examples thus far have had the global flag. When the global flag isn't enabled, the regex doesn't match anything beyond the first match.
1414

15-
<Example source="[aeiou]" flags="g">
15+
<Example regex={/[aeiou]/g}>
1616
<String>corona</String>
1717
<String>cancel</String>
1818
<String>rhythm</String>
1919
</Example>
20-
<Example source="[aeiou]" flags="">
20+
<Example regex={/[aeiou]/}>
2121
<String>corona</String>
2222
<String>cancel</String>
2323
<String>rhythm</String>
@@ -27,19 +27,19 @@ All examples thus far have had the global flag. When the global flag isn't enabl
2727

2828
As the name suggests, enabling the "insensitive" flag makes the regex case insensitive about matching text.
2929

30-
<Example source="#[0-9A-F]{6}" flags="i">
30+
<Example regex={/#[0-9A-F]{6}/i}>
3131
<String>#AE25AE</String>
3232
<String>#555555</String>
3333
<String>Even #a2ca2c?</String>
3434
<String>#FFF</String>
3535
</Example>
36-
<Example source="#[0-9A-F]{6}" flags="">
36+
<Example regex={/#[0-9A-F]{6}/}>
3737
<String>#AE25AE</String>
3838
<String>#555555</String>
3939
<String>Even #a2ca2c?</String>
4040
<String>#FFF</String>
4141
</Example>
42-
<Example source="#[0-9A-Fa-f]{6}" flags="">
42+
<Example regex={/#[0-9A-Fa-f]{6}/}>
4343
<String>#AE25AE</String>
4444
<String>#555555</String>
4545
<String>Even #a2ca2c?</String>

‎chapters/groups.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ We'll see how to do a lot of this in later chapters, but learning how groups wor
1313

1414
Capturing groups are denoted by `(` … `)`. Here's an expository example:
1515

16-
<Example source="a(bcd)e" flags="g">
16+
<Example regex={/a(bcd)e/g}>
1717
<String>abcde</String>
1818
<String>abcdefg?</String>
1919
<String>abcde</String>
@@ -27,7 +27,7 @@ Capturing groups allow _extracting_ parts of matches.
2727

2828
Capturing groups can also be used to group regex parts for ease of [repetition](/repetition) of said group.[^1] While we will cover repetition in detail in chapters that follow, here's an example that demonstrates the utility of groups.
2929

30-
<Example source="a(bcd)+e" flags="g">
30+
<Example regex={/a(bcd)+e/g}>
3131
<String>abcdefg</String>
3232
<String>abcdbcde</String>
3333
<String>abcdbcdbcdef</String>
@@ -36,7 +36,7 @@ Capturing groups can also be used to group regex parts for ease of [repetition](
3636

3737
Other times, they are used to group logically similar parts of the regex for readability.
3838

39-
<Example source="(\d\d\d\d)-W(\d\d)" flags="g">
39+
<Example regex={/(\d\d\d\d)-W(\d\d)/g}>
4040
<String>2020-W12</String>
4141
<String>1970-W01</String>
4242
<String>2050-W50-6</String>

0 commit comments

Comments
 (0)