Skip to content

Commit b070bea

Browse files
Merge pull request #99 from CoderDojoPotsdam/regex-in-languages
regex in programming languages
2 parents 941ede7 + 7179ca2 commit b070bea

File tree

5 files changed

+128
-0
lines changed

5 files changed

+128
-0
lines changed

_layouts/tutorial.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,14 @@
77
<script type="text/javascript" async="" src="../js/cookies.js"></script>
88
<script type="text/javascript" async="" src="../js/requirements.js"></script>
99
<script type="text/javascript" async="" src="../js/compatibility.js"></script>
10+
<script type="text/javascript" async="" src="../js/languages.js"></script>
1011
<link type="text/css" rel="stylesheet" href="../css/tutorial.css" media="screen"/>
1112
<link type="text/css" rel="stylesheet" href="../css/playfield.css" media="screen"/>
1213
<link type="text/css" rel="stylesheet" href="../css/quiz.css" media="screen"/>
1314
<link type="text/css" rel="stylesheet" href="../css/hint.css" media="screen"/>
1415
<link type="text/css" rel="stylesheet" href="../css/progress.css" media="screen"/>
1516
<link type="text/css" rel="stylesheet" href="../css/requirements.css" media="screen"/>
17+
<link type="text/css" rel="stylesheet" href="../css/languages.css" media="screen"/>
1618
<link type="text/css" rel="stylesheet" href="../css/Ubuntu.css" media="screen"/>
1719
<link rel="shortcut icon" href="../favicon.ico?v=2" type="image/x-icon">
1820
<meta charset="utf-8">

css/languages.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
---
3+
4+
/* ----- language ----- */
5+
.language {
6+
padding: 1em;
7+
border-radius: 1em;
8+
}
9+
.language .regex {
10+
width: 100%;
11+
}
12+
.language .text {
13+
width: 100%;
14+
}
15+
16+
/* ----- language.js ----- */
17+
18+
.language h2 {
19+
width: 100%;
20+
text-align: center;
21+
}
22+
23+
.language textarea {
24+
width: 100%;
25+
}

de/14-01.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: Programmierung
3+
---
4+
<p>
5+
Du kannst reguläre Ausdrücke in vielen Programmiersprachen verwenden.
6+
Schreibe deinen regulären Ausdruck und den Text, der durchsucht werden soll in die Felder unten.
7+
Dann siehst du, wie ein Programm, das den regulären Ausdruck im Text finden soll, in den gegebenen Sprachen aussieht.
8+
</p>
9+
<div class="language">
10+
<input type="text" value="regulärer Ausdruck" class="regex"/>
11+
<input type="text" value="Der reguläre Ausdruck durchsucht diesen Text." class="text"/>
12+
</div>

en/14-01.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: Programming
3+
---
4+
<p>
5+
You can use regular expressions in many programming languages.
6+
Type your regular expression and the text to search into the fields below.
7+
Then, you can see what a progam to find the expression in the text looks like in the given programming languages.
8+
</p>
9+
<div class="language">
10+
<input type="text" value="regular expression" class="regex"/>
11+
<input type="text" value="This text gets searched by the regular expression." class="text"/>
12+
</div>

js/languages.js

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
2+
var languagesLoaded = false;
3+
4+
function updateLanguagePython(regularExpression, text) {
5+
var regex = JSON.stringify(regularExpression);
6+
var text = JSON.stringify(text);
7+
return "import re\nregex = " + regex + "\ntext = " + text + "\nprint(re.findall(regex, text))";
8+
}
9+
10+
function updateLanguageJavaScript(regularExpression, text) {
11+
var regex = JSON.stringify(regularExpression);
12+
var text = JSON.stringify(text);
13+
return "var regex = " + regex + ";\nvar text = " + text + ";\nalert(RegExp(regex).exec(text))";
14+
}
15+
16+
function updateLanguageGrep(regularExpression, text) {
17+
var regex = regularExpression.replace(/'/g, '\'"\'"\'');
18+
var text = text.replace(/'/g, '\'"\'"\'');
19+
return "regex='" + regex + "'\ntext='" + text + "'\necho \"$text\" | grep -E \"$text\"";
20+
}
21+
22+
updateLanguages = [
23+
{"name": "Python", "update": updateLanguagePython},
24+
{"name": "JavaScript", "update": updateLanguageJavaScript},
25+
{"name": "Grep in Linux Shell", "update": updateLanguageGrep},
26+
]
27+
28+
function watchLanguageField(languageField, textElement, regex) {
29+
var textareas = [];
30+
for (var i = 0; i < updateLanguages.length; i++) {
31+
var lang = updateLanguages[i];
32+
var div = document.createElement("div");
33+
languageField.appendChild(div);
34+
div.classList.add("programming-language")
35+
var heading = document.createElement("h2");
36+
heading.innerText = lang.name;
37+
div.appendChild(heading);
38+
var textarea = document.createElement("textarea");
39+
div.appendChild(textarea);
40+
textareas.push(textarea);
41+
}
42+
function update() {
43+
for (var i = 0; i < updateLanguages.length; i++) {
44+
var textarea = textareas[i];
45+
var programUpdate = updateLanguages[i].update;
46+
var text = programUpdate(regex.value, textElement.value);
47+
textarea.value = text;
48+
var lines = (text.match(/\n/g) || []).length + 1;
49+
textarea.rows = lines;
50+
}
51+
}
52+
regex.onkeyup = update;
53+
textElement.onkeyup = update;
54+
update();
55+
}
56+
57+
function getLanguageElement(languageField, index, name) {
58+
return getPlayfieldElement(languageField, index, name);
59+
}
60+
61+
function loadLanguages(){
62+
if (languagesLoaded) {
63+
return;
64+
}
65+
var languageFields = document.getElementsByClassName("language");
66+
for (var i = 0; i < languageFields.length; i += 1) {
67+
var languageField = languageFields[i];
68+
var regex = getLanguageElement(languageField, i, "regex");
69+
var textElement = getPlayfieldElement(languageField, i, "text");
70+
watchLanguageField(languageField, textElement, regex);
71+
if (i == 0) {
72+
regex.focus();
73+
}
74+
}
75+
languagesLoaded = true;
76+
}
77+
window.addEventListener("load", loadLanguages);

0 commit comments

Comments
 (0)