forked from LeaVerou/regexplained
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
96 lines (79 loc) · 3.13 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>RegExp playground</title>
<link rel="stylesheet" href="css/global.css" />
<link rel="stylesheet" href="css/standalone.css" />
<link rel="stylesheet" href="css/regex-test.css" />
<script src="../csss/prefixfree.min.js"></script>
<!--<script src="vunits.js"></script>-->
</head>
<body data-pattern="a(b)" data-test="aabb">
<a href="" class="tweet button" target="_blank">Tweet!</a>
<aside>
<section class="help" id="cheatsheet">
<h1>Cheat sheet</h1>
<dfn title="Dot: Matches everything, except line breaks">.</dfn>
<dfn title="n times">{n}</dfn>
<dfn title="At least n times" class="long">{n,}</dfn>
<dfn title="At least m times but no more than n times" class="long">{m,n}</dfn>
<dfn title="Same as {0,1}">?</dfn>
<dfn title="Same as {0,}">*</dfn>
<dfn title="Same as {1,}">+</dfn>
<dfn title="Character class">[…]</dfn>
<dfn title="Same as [a-zA-Z0-9_]">\w</dfn>
<dfn title="Same as [0-9]">\d</dfn>
<dfn title="About the same as [\t\r\n ]">\s</dfn>
<dfn title="Negated character class" class="long">[^…]</dfn>
<dfn title="Grouping and capturing">(…)</dfn>
<dfn title="Non-capturing group" class="long">(?:…)</dfn>
<dfn title="Beginning of string">^</dfn>
<dfn title="End of string">$</dfn>
<dfn title="Word boundary">\b</dfn>
<dfn title="Non-word boundary">\B</dfn>
<dfn title="Positive lookahead" class="long">(?=…)</dfn>
<dfn title="Negative lookahead" class="long">(?!…)</dfn>
<dfn title="Nth backreference">\N</dfn>
</section>
<section class="help" id="keyboard-shortcuts">
<h1>Keyboard shortcuts</h1>
<dfn title="Next match"><kbd data-keycode="40">↓</kbd></dfn>
<dfn title="Next subpattern"><kbd data-ctrlkey>⌃</kbd><kbd data-keycode="40">↓</kbd></dfn>
<dfn title="Previous subpattern"><kbd data-ctrlkey>⌃</kbd><kbd data-keycode="38">↑</kbd></dfn>
<!--<dfn title="Global flag"><kbd>⌃</kbd><kbd>G</kbd></dfn>-->
<br />
<dfn title="Previous match"><kbd data-keycode="38">↑</kbd></dfn>
<dfn title="Case insensitive flag"><kbd data-ctrlkey>⌃</kbd><kbd data-keycode="73">I</kbd></dfn>
<dfn title="Multiline flag"><kbd data-ctrlkey>⌃</kbd><kbd data-keycode="77">M</kbd></dfn>
</section>
</aside>
<footer></footer>
<script src="utopia.js"></script>
<script src="regex-test.js"></script>
<script>
window.regexptester = new RegExpTester(document.body);
var tweetButton = $('.tweet.button');
tweetButton.onclick = tweetButton.onmouseover = function() {
this.href = 'http://twitter.com/intent/tweet?hashtags=regexplained&text=%40regexplained%20' +
encodeURIComponent('/' + regexptester.input.value + '/' + regexptester.flags);
}
$$('#keyboard-shortcuts > dfn').forEach(function(dfn) {
var keys = $$('kbd[data-keycode], kbd[data-ctrlkey]', dfn);
dfn.setAttribute('tabindex', '0');
dfn.onclick = function() {
var e = {};
keys.forEach(function(kbd) {
if (kbd.hasAttribute('data-keycode')) {
e.keyCode = +kbd.getAttribute('data-keycode');
}
else if (kbd.hasAttribute('data-ctrlkey')) {
e.ctrlKey = true;
}
});
$u.event.fire(document.body, 'keydown', e);
};
});
</script>
</body>
</html>