summaryrefslogtreecommitdiff
path: root/regexvis.html
blob: c2c765c197eefd597363ba60fcbc0fc37e6bec92 (plain)
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
<!DOCTYPE html>
<html>
<head>
    <!-- 2010-05-07 -->
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <meta http-equiv='Content-Language' content='en_EN' />
    <meta name='author' content='Patrick Simianer' />       
    
    <title>Visualizing Regular Expressions (Patrick Simianer, 'Endliche Automaten', SS2010)</title>
    
    <link rel='stylesheet' type='text/css' href='stylesheets/styles.css' />
    
    <script type='text/javascript' src='javascripts/lib/raphael.js'></script>
    <script type='text/javascript' src='javascripts/lib/jquery.js'></script>
    <script type='text/javascript' src='javascripts/lib/jquery-ui.js'></script>

    <script type='text/javascript' src='javascripts/globals.js'></script>
    <script type='text/javascript' src='javascripts/NfaState.js'></script>
    <script type='text/javascript' src='javascripts/Nfa.js'></script>
    <script type='text/javascript' src='javascripts/RegexParser.js'></script>
    <script type='text/javascript' src='javascripts/Stack.js'></script>       
    <script type='text/javascript' src='javascripts/NfaSimulator.js'></script>
    <script type='text/javascript' src='javascripts/Nfa2Dfa.js'></script>
    <script type='text/javascript' src='javascripts/graph.js'></script>
	<script type="text/javascript" src='javascripts/uifunc.js'></script>
</head>

<body>

	<div id="wrapper">
		
		<p style="line-height:1.3em;text-align:justify;width:52%">
			<a class="message gray" href="#" onclick="$('#desc').toggle();">
				<strong>Description</strong></a>
			<span id="desc">&nbsp;Enter a regular expression (<span style="font-family:Courier">'*'</span>, <span style="font-family:Courier">'|'</span> and <span style="font-family:Courier">'()'</span> supported). The usable <strong>alphabet</strong> is shown above the input box. Tick <strong>'Make a Graph'</strong> to enable or disable graph generation. The generated graph is <strong>deterministic finite state automata</strong>. Once the (correct) expression is parsed, it is possible to simulate the automata by entering a accepted or non-accepted <strong>word</strong> in the lower input box.<br /></span>
		</p>
		
		<table>
			<tr style="width:100%">
				<td class="r"><strong class="grayc">Alphabet:</strong></td>
				<td style="width:400px"><strong class="grayc">
					<script type="text/javascript" charset="utf-8">
						document.write(ALPHABET.substr(0,ALPHABET.length-1));
					</script></strong>
				</td>	
			</tr>
			<tr>
				<td class="r"><strong>Regular Expression:</strong></td>
				<td><input type="text" name="regex" id="regex" value="" autocomplete="off"
						onchange='checkLength(this, "#parseButton");'
						onkeypress="return getKey(event, ALPHABETS);"
						onmouseout='checkLength(this, "#parseButton");' />
						<input type="button" name="parseButton" id="parseButton"
						value="Parse" disabled='disabled' autocomplete="off" onclick="uiParse();" />
				</td>
			</tr>
			<tr>
				<td class="r"><strong>Word:</strong></td>
				<td><input type="text" name="word" id="word" value="" disabled="disabled" autocomplete="off"
						onchange='checkLength(this, "#checkButton");'
						onkeypress="return graphMoveByInput(event, ALPHABET);"
						onmouseout='checkLength(this, "#checkButton");' />
					<input type="button" name="checkButton" id="checkButton"
						value="Check" disabled='disabled' autocomplete="off" onclick="uiSimulate();" />
					</td>
				</tr>
				<tr>
					<td class="r"><strong>Make a Graph:</strong></td>
					<td>
						<input type="checkbox" name="graphit" value="" id="graphit" autocomplete="off"
							checked="checked" onchange="graphit = this.checked;" />
					</td>
				</tr>
		</table>
			
		<p>
			<a class='message gray' href='#' onclick="window.location.reload();"/>Reload</a>
			<span id="parseMessage" class="message" style="display:none"></span>
			<span id="checkMessage" class="message" style="display:none"></span>
		</p>
		



		<div id="holder"></div>
		
	</div>

</body>
</html>