-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
278 lines (228 loc) · 12.9 KB
/
index.html
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono|Ubuntu' rel='stylesheet' type='text/css'>
<link href="css/screen.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<title>RegExcavate - Dig into Regular Expressions</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- we want to support Android so need this code in the HTML rather than just putting the files at the root -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- custom build of Modernizr for HTML5 Shiv and tests for SVG -->
<script src="scripts/lib/modernizr.2.6.2.custom.js"></script>
</head>
<body class="excavating">
<section class="app">
<header class="site-header">
<nav class="main-nav">
<a href="#about" tabindex="2">About</a>
<a href="#tutorial" tabindex="3">Tutorial</a>
<a href="#contribute" tabindex="4">Contribute</a>
</nav>
<a class="contribute-github" href="https://github.com/regexcavate/regexcavate">Contribute on Github</a>
</header>
<div class="section-wrap section-wrap-app">
<hgroup class="main-title">
<h1>Regexcavate</h1>
<h2>Dig into regular expressions</h2>
<img class="logo" src="images/logo.svg" alt="Regexcavate // Dig in to regular expressions">
<img class="logo-fallback" src="images/logo-fallback.png" alt="Regexcavate // Dig in to regular expressions">
</hgroup>
<div class="verbose-container">
<input type="text" class="verbose" placeholder="" autofocus tabindex="1">
<p class="noticed-regex">
Uh-oh, it seems like you’ve tried to put a regex in the field.
<a href="" class="help-tab-trigger">That’s not how this works</a>.
</p>
</div>
<h2 class="section-title">How To</h2>
<div class="section-content section-content-app">
<p class="intro-copy">
To begin: break up what you want to match into parts in plain English
and enter them in the field above with each part separated by a comma.
When you’re done, press enter/return.
</p>
<div class="result-container">
<pre><code class="result"> </code></pre>
<textarea type="text" class="copy-me" value=""></textarea>
<span class="copy-result">
<i class="icon icon-copy"> </i> copy
</span>
<div class="tooltip"></div>
<p>Hover over this regex to see how it relates to what you put in the field.
Want a more visual representation of this regex? Try it out over at
<a href="http://www.regexplained.co.uk" class="regexplained" rel="friend">regexplained.co.uk</a>.</p>
<p>Not quite sure how to use this regex? Find how it works with the language you’re using at <a href="http://www.regular-expressions.info/tools.html" rel="friend">regular-expressions.info/tools.html</a>.</p>
</div>
</div>
<div class="help">
<h3 class="help-tab" tabindex="5"><a href="">I’m Confused</a></h3>
<p>Regexcavate is a natural language “translator” for regex. Enter plain English words
that describe what you'd like to match and get back a regular expression.</p>
<p>For more ideas, refresh the page for a random placeholder.</p>
<p>You can also use one of these pre-defined shortcuts:</p>
<!-- this list should be generated dynamicaly and auto fill and execute the verbose input on click -->
<ul id="shortcuts-list"></ul>
</div>
</div>
</section>
<section class="about" id="about">
<div class="section-wrap">
<h2 class="section-title">About</h2>
<div class="section-content">
<p>If you’re involved in writing code of any sort, you’ve no doubt heard of
regular expressions. But most people would agree that when you first
look at them, it can feel a little like deciphering hieroglyphics.</p>
<p>That’s why we created Regexcavate - at it's heart, a natural language “translator”
for regular expressions. The aim is to be a learning tool for digging into regex and finding
out how they can be put together. Even our <em>logo</em> is a regular expression. How meta.</p>
<p>This tool is still in it’s infancy and dealing with a pretty vast topic;
if you’re a regex guru then you might find it can’t do some of the more
complex things you know regex is capable of. If you’d like to help us make this
tool better, or if something doesn’t work that you think should please
read about <a href="#contribute">how to contribue</a> below.</p>
<p>To find out more about this tool and dig deeper, check out the repo over
at <a href="https://github.com/regexcavate/regexcavate" rel="me">github</a>.</p>
</div>
</div>
</section>
<section class="tutorial" id="tutorial">
<div class="section-wrap">
<h2 class="section-title">Tutorial</h2>
<div class="section-content">
<p>If you’re new to regex, and want a bit of a quick intro
<a href="http://remy.bach.me.uk/talks/getting-started-with-regex" rel="friend">these slides</a>
should help get you started.</p>
<p>So you’ve got your regex, what now? Here’s a quick tutorial of what you can
do with it. We’ll look at two useful ways of using regex in Javascript: <code>test</code> and <code>replace</code></p>
<h3>Test</h3>
<p>Let’s say you have a contact form that has a field for a reference number for your account
(say for a bank or utility service). The company’s reference numbers are expected in the form of
<code>1000000AA</code> where A is any letter and 0 is any number. That could be described as:
"1, 6 numbers, 2 letters".</p>
<p>Try to regexcavate for that and you’ll get this:</p>
<pre class="language-javascript"><code>/1[0-9]{6}[a-zA-Z]{2}/</code></pre>
<p><em>Note:</em> in Javascript you can define a regex literal by putting the expression between
<code>/</code> characters. Regexcavate only gives you the expression, but we’re showing
you the Javascript notation for demonstration purposes.</p>
<p>So, how can this be used to check against user input? Well, we can use this pattern in
a little Javascript function like so:</p>
<pre class="language-javascript"><code>var ref = document.getElementById('referenceNumber'); // the ID of reference number field
var regex = /1[0-9]{6}[a-zA-Z]{2}/; // the pattern we’re expecting
if ( regex.test(ref.value) ) {
// do stuff if match found
} else {
// show error messages about reference format
}</code></pre>
<p>For more information on the Javascript <code>test()</code> method, check out
<a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Regexp/test">MDN for Regexp.test</a></p>
<h3>Replace</h3>
<p>Matching a pattern is useful - especially for more complex things like email addresses,
usernames, phone numbers etc. but frequently you want to find and <em>replace</em> on a search
pattern.</p>
<p>If you are using a text editor like Textmate, Sublime Text or Vim, you’ll probably
find that it’s search and replace functionality will accept a regex as the search pattern.
This means you can find stuff that you would not normally be able to.</p>
<p>Let’s say you have some code that is littered with trailing whitespace. This can cause issues
in some languages but is just generally a bit messy to look at. Well, you could match all
whitespace at the end of a line and replace it with nothing to tidy things up.</p>
<p>Try to regexcavate for <em>"any whitespaces, at the end of the line"</em> and you’ll get this:<p>
<pre class="language-javascript"><code>/\s+$/</code></pre>
<p>Now use this in a find and replace, searching for <code>\s+$</code> and "replace all" with
an empty field and you’ll be trailing whitespace free!</p>
<p>You can also use the <code>String.replace()</code> method in Javascript. Here’s a quick
example... we're rather fond of regex, so let's update the string below:</p>
<pre class="language-javascript"><code>var string = 'I hate regular expressions... hate them!';
string = string.replace(/hate/g, 'love'); // "g" replaces all occurrences
console.log(string); // 'I love regular expressions... love them!'</code></pre>
</div>
</div>
</section>
<section class="contribute" id="contribute">
<div class="section-wrap section-wrap-contribute">
<h2 class="section-title section-title-contribute">Contribute</h2>
<div class="section-content">
<p>To make this little tool as awesome and as useful as possible, we need
all the help we can get - so that means yours! We’ve got lots of new
features in the pipeline but would really appreciate input from the community.</p>
<h3>Add translations</h3>
<p>If you’re a Reg-expert then <a href="https://github.com/regexcavate/regexcavate/wiki">
hop on over to the wiki on Github</a> to check out all the stuff that makes this work
behind the scenes. If you’d like to add a 'translation' all you need to do
is fork the project, hammer out some regex and submit a pull request.</p>
<h3>Bugs</h3>
<p>Bugs are everywhere; we’ve tried to squash as many as possible but if
you find something broken, either tell us
<a href="http://twitter.com/regexcavate" rel="me">@regexcavate</a> or
<a href="https://help.github.com/articles/using-pull-requests">submit a fix</a> (or both).</p>
<h3>Improve the words</h3>
<p>We’re developers and not the greatest with words. If you can explain this
all a bit better or you’ve found a typo or non-existing word, you can fork
us and <a href="https://help.github.com/articles/using-pull-requests">submit a pull request</a>
for things like that too. Documentation is a huge deal so please feel free to
contribute to that too.</p>
<h3>Feature Requests</h3>
<p>If you have any other suggestions or requests, please let us know.</p>
</div>
</div>
</section>
<footer class="site-footer" id="who">
<div class="section-wrap section-wrap-footer">
<h2 class="section-title">Who?</h2>
<div class="section-content">
<p>Regexcavate is bought to you by<br>
<a href="http://www.twitter.com/remybach">@remybach</a>,
<a href="http://www.twitter.com/guyroutledge">@guyroutledge</a>
and
<a href="http://www.twitter.com/robmil">@robmil</a>
</p>
<p><a href="https://twitter.com/share" class="twitter-share-button" data-text="Dig into regular expressions with @regexcavate: http://www.regexcavate.com">Tweet</a></p>
<p class="foot-note">Hacked together in <a href="http://www.sublimetext.com" rel="friend">SublimeText</a>
and Vim with HTML5, SCSS/<a href="http://compass-style.org" rel="friend">Compass</a>,
<a href="http://www.jquery.com" rel="friend">jQuery</a> and <a href="http://gruntjs.com" rel="friend">GruntJS</a>.
Hosted by <a href="http://pages.github.com" rel="friend">Github Pages</a>.</p>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);
}
}(document,"script","twitter-wjs");
</script>
</div>
</div>
<div class="tunnel">
<div class="reggie-the-miner"></div>
</div>
</footer>
<script src="scripts/dist/locale/en_gb/main.js"></script>
<script type="text/javascript">
/*===== Google Analytics =====*/
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-38286038-1']); _gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
/*===== GoSquared =====*/
var GoSquared = {}; GoSquared.acct = "GSN-944650-H";
(function(w){
function gs(){
w._gstc_lt = +new Date;
var d = document, g = d.createElement("script");
g.type = "text/javascript"; g.src = "//d1l6p2sc9645hc.cloudfront.net/tracker.js";
var s = d.getElementsByTagName("script")[0];
s.parentNode.insertBefore(g, s);
}
w.addEventListener ? w.addEventListener("load", gs, false) : w.attachEvent("onload", gs);
})(window);
</script>
</body>
</html>