regex-zip-code-tutorial/index.html at master · RHieger/regex-zip-code-tutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Typeface for Headings -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">

  <!-- Typeface for body text -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">

  <!-- Typeface for Code -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="./css/zipcodes.css">

  <title>Regex Demo—Zip Code</title>

  <script src="./js/app.js" defer></script>

</head>

<body>

  <section id="intro">

    <header class="mastHead">
      <h1>Demonstration of Regex&mdash;Matching Zip Codes</h1>
    </header>

    <div class="callOutBox">
      <p>
        Below is a test dataset that includes valid zip codes, but also
        content that is clearly not zip codes. The object of this demo is
        to extract from this multiline test data only the valid zip codes
        using a regular expression.
      </p>
    </div>

  </section>

  <section id="dataSet">

    <h2>
      Test Data
    </h2>

    <div id="testData">

        <!-- DATA SET TO BE PASSED TO REGULAR EXPESSION -->
      <div class="test-data-dimensions custom-scrollbar">
        <p class="testString">
          10003<br />
          asdf10003<br />
          10003asdf<br />
          jklm10003^$@%<br />
          10003-8924<br />
          one zero zero zero three<br />
          9101-94015<br />
          94015-9101<br />
          20012<br />
          08735<br />
          KbdsD$%^&*<br />
          sSd070031jKl;m<br />
          70122<br />
          \sKu2034.<br />
          98108<br />
          75381<br />
          asdfjkl;<br />
          60661<br />
          !90004!@#$5^&*<br />
          97218<br />
          #,.$$&&%@<br />
          10022-3337<br />
          eNuhfF!.
        </p>
      </div>

        <hr class="divider" />

        <!-- REGULAR EXPRESSION -->

        <h3>
          Regular Expression
        </h3>

        <code>
          /^[0-9]{5}(-[0-9]{4})?$/gm
        </code>

    </div>

  </section>

  <div id="getResults">
    <div class="verticalButtonGroup">
      <button class="controlButton" id="validate">
        Validate Zip Codes
      </button>
      <button class="controlButton" id="reset">
        Reset
      </button>
    </div>

    <div id="results"
    class="results-data-dimensions default-result">
      <p class="default-message" id="message">no match</p>
      <!-- Dynamic content lives here. -->
    </div>

  </div>

</body>

</html>