8000 Wire up form controls and events · wimpyprogrammer/strings-to-regex@7d399b7 · GitHub
[go: up one dir, main page]
Skip to content

Commit 7d399b7

Browse files
wimpyprogrammerwimpyprogrammer
committed
Wire up form controls and events
1 parent 04cc247 commit 7d399b7

File tree

3 files changed

+49
-6
lines changed

3 files changed

+49
-6
lines changed

‎demo/index.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,15 @@
4848
<label for="words">
4949
Words or phrases the Regular Expression should match:
5050
</label>
51-
<textarea id="words" class="form-control"></textarea>
51+
<textarea id="words" class="form-control js-words"></textarea>
5252
</div>
5353

5454
<div class="form-inline">
5555
<div class="form-group">
5656
<label for="delimiter">
5757
Words/phrases are separated by:
5858
</label>
59-
<select id="delimiter" class="form-control">
59+
<select id="delimiter" class="form-control js-delimiter">
6060
<option value="," selected="selected">Comma</option>
6161
<option value=" ">Space</option>
6262
<option value="\n">Newline</option>
@@ -65,14 +65,14 @@
6565

6666
<div class="checkbox">
6767
<label>
68-
<input type="checkbox" checked="checked" class="form-check-input">
68+
<input type="checkbox" checked="checked" class="form-check-input js-trim">
6969
Trim whitespace surrounding each word/phrase
7070
</label>
7171
</div>
7272
</div>
7373

7474
<div class="form-group submit-form-group">
75-
<button type="button" class="btn btn-lg btn-primary">
75+
<button type="button" class="btn btn-lg btn-primary js-generate">
7676
Generate Regular Expression
7777
</button>
7878
</div>
@@ -85,7 +85,7 @@
8585
<label for="output">
8686
Matching Regular Expression:
8787
</label>
88-
<textarea readonly="readonly" id="output" class="form-control"></textarea>
88+
<textarea readonly="readonly" id="output" class="form-control js-output"></textarea>
8989
</div>
9090
</section>
9191

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
"jest": {
2121
"collectCoverageFrom": [
2222
"**/src/**/?*.(js|ts)",
23-
"!**/src/**/?*.d.ts"
23+
"!**/src/**/?*.d.ts",
24+
"!**/src/demo.ts"
2425
],
2526
"transform": {
2627
"^.+\\.ts$": "ts-jest"

‎src/demo.ts

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { build as buildPattern } from './utils/pattern';
2+
import { build as buildTrie } from './utils/trie';
3+
import { parseString, WhitespaceHandling } from './utils/wordList';
4+
5+
const { Preserve, TrimLeadingAndTrailing } = WhitespaceHandling;
6+
7+
const $input = document.querySelector<HTMLTextAreaElement>('.js-words');
8+
const $delimiter = document.querySelector<HTMLSelectElement>('.js-delimiter');
9+
const $trim = document.querySelector<HTMLInputElement>('.js-trim');
10+
const $output = document.querySelector<HTMLTextAreaElement>('.js-output');
11+
12+
function generatePattern(
13+
words: string,
14+
delimiter: string,
15+
whitespace: WhitespaceHandling
16+
): string {
17+
const wordList = parseString(words, delimiter, whitespace);
18+
const wordTrie = buildTrie(wordList);
19+
const pattern = buildPattern(wordTrie);
20+
21+
return pattern;
22+
}
23+
24+
function displayPattern(pattern: string) {
25+
$output.value = pattern;
26+
}
27+
28+
function onClickGenerate() {
29+
const words = $input.value;
30+
const delimiter = $delimiter.selectedOptions[0].value;
31+
const isWhitespaceTrimmed = $trim.checked;
32+
33+
const whitespace = isWhitespaceTrimmed ? TrimLeadingAndTrailing : Preserve;
34+
35+
const pattern = generatePattern(words, delimiter, whitespace);
36+
37+
displayPattern(pattern);
38+
}
39+
40+
document
41+
.querySelector('.js-generate')
42+
.addEventListener('click', onClickGenerate);

0 commit comments

Comments
 (0)
0