Skip to content

Commit

Permalink
Make Example use a regex parameter
Browse files Browse the repository at this point in the history 
As opposed to using two string parameters: `source` and `flags`.
  • Loading branch information
@shreyasminocha
shreyasminocha committed Mar 25, 2020
1 parent a65896e commit d7a684f
Show file tree
Hide file tree
Showing 10 changed files with 54 additions and 58 deletions.
6 changes: 3 additions & 3 deletions chapters/alternation.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ Alternation allows matching _one_ of several phrases. This is more powerful than

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

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

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

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

Matching numbers between 100 and 250:

<Example source="1\d\d|2[0-4]\d|250" flags="g">
<Example regex={/1\d\d|2[0-4]\d|250/g}>
<String>100, 157, 199</String>
<String>139 + 140 = 279</String>
<String>201 INR</String>
Expand Down
16 changes: 8 additions & 8 deletions chapters/anchors.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Marked by a carat (`^`) at the beginning of the regex, this anchor makes it nece

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

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

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

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

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

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

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

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

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

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

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

<Example source="\Bp" flags="g">
<Example regex={/\Bp/g}>
<String>ape</String>
<String>leap</String>
<String>(leap)</String>
<String>a pot</String>
<String>pea</String>
</Example>
<Example source="\Bp\B" flags="g">
<Example regex={/\Bp\B/g}>
<String>ape</String>
<String>_peel</String>
<String>leap</String>
Expand Down
4 changes: 2 additions & 2 deletions chapters/basics.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ Regular expressions are typically formatted as `/<rules>/<flags>`. Often people

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

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

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.

<Example source="pp" flags="g">
<Example regex={/pp/g}>
<String>apple</String>
<String>pineapple</String>
<String>happiness</String>
Expand Down
10 changes: 5 additions & 5 deletions chapters/character-classes.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

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

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

Here's another example of these in action:

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

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

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

We can combine ranges and individual characters in our regexes.

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

We can also "negate" these rules:

<Example source="[^aeiou]" flags="g">
<Example regex={/[^aeiou]/g}>
<String>Umbrella</String>
<String>cauliflower</String>
<String>ou</String>
Expand Down
16 changes: 8 additions & 8 deletions chapters/character-escapes.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,19 @@ Character escapes act as shorthands for some common character classes.

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

<Example source="\d" flags="g">
<Example regex={/\d/g}>
<String>2020</String>
<String>100/100</String>
<String>It costs $5.45</String>
<String>3.14159</String>
</Example>
<Example source="\d\d" flags="g">
<Example regex={/\d\d/g}>
<String>2020</String>
<String>100/100</String>
<String>It costs $5.45</String>
<String>3.14159</String>
</Example>
<Example source="\D" flags="g">
<Example regex={/\D/g}>
<String>2020</String>
<String>100/100</String>
<String>It costs $5.45</String>
Expand All @@ -36,7 +36,7 @@ The escape `\w` matches characters deemed "word characters". These include:

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

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

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

<Example source="\s" flags="g">
<Example regex={/\s/g}>
<String>word word</String>
<String>tabs vs spaces</String>
<String>snake_case.jpg</String>
</Example>
<Example source="\S" flags="g">
<Example regex={/\S/g}>
<String>word word</String>
<String>tabs vs spaces</String>
<String>snake_case.jpg</String>
Expand All @@ -88,7 +88,7 @@ This escape is difficult to demonstrate through my `Example` component. However,

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

<Example source="." flags="g">
<Example regex={/./g}>
<String>john_s</String>
<String>Ayesha?!</String>
<String>4952</String>
Expand Down
16 changes: 8 additions & 8 deletions chapters/escapes.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@ This is done by **prefixing the character with a `\`**.

---

<Example source="\(paren\)" flags="g">
<Example regex={/\(paren\)/g}>
<String>paren</String>
<String>(paren)</String>
<String>a (paren)</String>
</Example>
<Example source="(paren)" flags="g">
<Example regex={/(paren)/g}>
<String>paren</String>
<String>parents</String>
<String>(paren)</String>
Expand All @@ -39,14 +39,14 @@ This is done by **prefixing the character with a `\`**.

---

<Example source="example\.com" flags="g">
<Example regex={/example\.com/g}>
<String>example.com</String>
<String>a.example.com/foo</String>
<String>example_com</String>
<String>example@com</String>
<String>example_com/foo</String>
</Example>
<Example source="example.com" flags="g">
<Example regex={/example.com/g}>
<String>example.com</String>
<String>a.example.com/foo</String>
<String>example_com</String>
Expand All @@ -56,13 +56,13 @@ This is done by **prefixing the character with a `\`**.

---

<Example source="A\+" flags="g">
<Example regex={/A\+/g}>
<String>A+</String>
<String>A+B</String>
<String>5A+</String>
<String>AAA</String>
</Example>
<Example source="A+" flags="g">
<Example regex={/A+/g}>
<String>A+</String>
<String>A+B</String>
<String>5A+</String>
Expand All @@ -71,12 +71,12 @@ This is done by **prefixing the character with a `\`**.

---

<Example source="worth \$5" flags="g">
<Example regex={/worth \$5/g}>
<String>worth $5</String>
<String>worth $54</String>
<String>not worth $5</String>
</Example>
<Example source="worth $5" flags="g">
<Example regex={/worth $5/g}>
<String>worth $5</String>
<String>worth $54</String>
<String>not worth $5</String>
Expand Down
10 changes: 5 additions & 5 deletions chapters/flags.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ There are 5 kinds of flags:

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.

<Example source="[aeiou]" flags="g">
<Example regex={/[aeiou]/g}>
<String>corona</String>
<String>cancel</String>
<String>rhythm</String>
</Example>
<Example source="[aeiou]" flags="">
<Example regex={/[aeiou]/}>
<String>corona</String>
<String>cancel</String>
<String>rhythm</String>
Expand All @@ -27,19 +27,19 @@ All examples thus far have had the global flag. When the global flag isn't enabl

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

<Example source="#[0-9A-F]{6}" flags="i">
<Example regex={/#[0-9A-F]{6}/i}>
<String>#AE25AE</String>
<String>#555555</String>
<String>Even #a2ca2c?</String>
<String>#FFF</String>
</Example>
<Example source="#[0-9A-F]{6}" flags="">
<Example regex={/#[0-9A-F]{6}/}>
<String>#AE25AE</String>
<String>#555555</String>
<String>Even #a2ca2c?</String>
<String>#FFF</String>
</Example>
<Example source="#[0-9A-Fa-f]{6}" flags="">
<Example regex={/#[0-9A-Fa-f]{6}/}>
<String>#AE25AE</String>
<String>#555555</String>
<String>Even #a2ca2c?</String>
Expand Down
6 changes: 3 additions & 3 deletions chapters/groups.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ We'll see how to do a lot of this in later chapters, but learning how groups wor

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

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

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.

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

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

<Example source="(\d\d\d\d)-W(\d\d)" flags="g">
<Example regex={/(\d\d\d\d)-W(\d\d)/g}>
<String>2020-W12</String>
<String>1970-W01</String>
<String>2050-W50-6</String>
Expand Down
Loading

0 comments on commit d7a684f

Please sign in to comment.