Skip to content
Permalink
Browse files
Make Example use a regex parameter
As opposed to using two string parameters: `source` and `flags`.
  • Loading branch information
shreyasminocha committed Mar 25, 2020
1 parent a65896e commit d7a684ffd5e819edce6407e31d55df4faf972f84
Showing 10 changed files with 54 additions and 58 deletions.
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>

0 comments on commit d7a684f

Please sign in to comment.