-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlesson10.html
108 lines (107 loc) · 5.07 KB
/
lesson10.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
<html>
<head>
<meta charset="utf-8">
<meta name="application-name" content="KITAB regex tutorial">
<meta name="created" content="2021-05-05">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>KITAB regex tutorial - lesson 10: Matching a range of characters</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<!--<script src="https://unpkg.com/xregexp/xregexp-all.js"></script>--> <!--regular expressions library with support for unicode code blocks-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xregexp/3.2.0/xregexp-all.min.js"></script>
</head>
<body>
<h1>Regex tutorial for humanists</h1>
<div id="tutorial">
<h2>10. Matching a range of characters</h2>
<p>
The square brackets can also be used to specify a range of characters.
For example, <span class="regex">[0-9]</span> will match any
(Latin-script) digit, <span class="regex">[a-z]</span> will match any
lower-case letter between a and z, and <span class="regex">[A-Z]</span>
will match any upper-case letter between A and Z.
</p>
<p>
Regular expressions engines that are Unicode-compliant
use the Unicode order of characters to determine which characters
are included in a range; you can take a look
at a <a href="https://unicode-table.com/en/blocks/" target="_blank">Unicode chart</a>
to find the first and last character of your range.
For example, the range <span class="regex">[😀-🙏]</span>
will match any emoticon in the Unicode standard
(see <a href="https://unicode-table.com/en/blocks/emoticons/" target="_blank">unicode-table.com/en/blocks/emoticons/</a>).
</p>
<p>
These ranges can be combined with other characters or ranges:
for example, the regex <span class="regex">[a-fA-F.,]</span>
will match any letter from a to f (both lower- and upper-case),
and any full stop or comma.
</p>
<p>
The caret "^" character can be used here as well to invert the options:
<span class="regex">[^a-z]</span> will match any character that is not
a lower-case letter from a to z.
</p>
</div>
<div id="exercise" type="full_match"> <!-- possible types: full_match, partial_match -->
<div id="exercise_title">
Exercise 10: Match all strings containing only Arabic letters, Arabic interpunction
and spaces.
</div>
<div id="samples">
<table>
<thead>
<tr>
<th>Task</th>
<th>Text</th>
<th> </th>
</tr>
<!-- line below the table heading: -->
<tr><td style="border-top:1px solid black;" colspan="3"></td></tr>
</thead>
<tbody>
<tr>
<td class="instruction">Match this string entirely</td>
<td class="sample" match="يكتب">يكتب</td>
<td class="correctOrNot"></td>
</tr>
<tr>
<td class="instruction">Don't match this string</td>
<td class="sample" match="Did he write?">Did he write?</td>
<td class="correctOrNot"></td>
</tr>
<tr>
<td class="instruction">Match this string entirely</td>
<td class="sample" match="كتب؟">كتب؟</td>
<td class="correctOrNot"></td>
</tr>
<tr>
<td class="instruction">Match this string entirely</td>
<td class="sample" match="نعم، كتب كتابا طوييييلا">نعم، كتب كتابا طوييييلا</td>
<td class="correctOrNot"></td>
</tr>
</tbody>
</table>
</div>
<div id="input">
<input id="solution_input" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" placeholder="Type your regex pattern" solution="[،-ي ]+"></input>
<input id="next_button" type="button" onclick="location.href='the-end.html';" value="Next lesson" disabled title="Get the solution first!"/>
</div>
<div id="hintOrSolution">
<input id="hint_button" type="button" onclick="showHint()" value="Hint" title="Get a hint"/>
<input id="solution_button" type="button" onclick="showSolution()" value="Solution" title="Take the hint before you get the solution!" disabled/>
</div>
<div id="hint" style="display:none;">
In the <a href="https://symbl.cc/en/unicode/blocks/arabic/#table" target="_blank">Unicode Arabic code block</a>,
the first Arabic letter is the "Arabic letter Hamza" ("ء"), and the last the "Arabic letter Yeh" ("ي").
You can copy and paste the relevant characters into the brackets.
If you want to include Arabic punctuation, start from the Arabic comma ("،") instead of hamza.
You can copy and paste the relevant characters into the brackets.
</div>
<div id="solution" style="display:none;">
'Any sequence of unicode characters between Arabic comma and yāʾ, or a space.'
</div>
</div>
<input id="back_button" type="button" onclick="location.href='lesson9.html';" value="Back"/>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>