entufa/parse.html at master · latsakap/entufa · GitHub

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
<!DOCTYPE html>
<html lang=en>
<head>
 <title>Entufa Parser</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="styles.css">
 <script src="nearley/lib/nearley.js"></script>
 <script src="src/parse.js"></script>
 <style>
 ul {
	list-style: none outside none;
	padding-left: 1em;
	margin-left: 0;
 }

 li {
	border-left-style: solid;
	border-left-width: 0.2em;
	padding-left: 0;
 }

 .tree {
 	border-left-style: solid;
 }

 .last {
 	border-left-style: none;
 }
 </style>
</head>
<body>
<textarea name="input" id="input" style="width:80%;resize:none;" rows="8">this is a test</textarea>
<button style="float:right;font-size:4.5vw;height:131px;width:18%;" onclick="process()">Parse</button>
<button onclick="pageLeft()">Prev.</button><button onclick="pageRight()">Next</button><button onclick="showTree()">Show Tree</button><h2>Parse <span id="pageNum">*</span>/<span id="parseNum">*</span></h2>
<p id="output" style="margin-left:10%;margin-right:10%;border:3px solid lightgray;">test</p>
<p><ul><li id="tree" class="last"></li></ul></p>

<script>
let input, results, output, raw, tree;
let page = 0;

function process() {
input = document.getElementById("input").value;
const parser = new nearley.Parser(nearley.Grammar.fromCompiled(grammar));
try {
parser.feed(input);
results = parser.results;
page = 0;
print()
} catch (error) {
document.getElementById("pageNum").innerHTML = "*";
document.getElementById("parseNum").innerHTML = "*";
document.getElementById("output").innerHTML = error;
}}

function print() {
document.getElementById("pageNum").innerHTML = page + 1;
document.getElementById("parseNum").innerHTML = results.length;
raw = results[page];
output =  JSON.stringify(results[page])
document.getElementById("output").innerHTML = output;
}

function pageLeft() {
if (page > 0) {
page--;
print()
}}

function pageRight() {
if (page + 1 < results.length) {
page++;
print()
}}

function showTree() {
tree = grow(raw);
document.getElementById("tree").innerHTML = tree;
}

function grow(node) {
let temp = "";
for (let x in node) {
if (x == 0) {
temp = temp + "<span>" + node[x] + ": </span>";
} else if (Array.isArray(node[x])) {
if  (x == node.length - 1) {
temp = temp + "<li class=\"last\"><ul>" + grow(node[x]) + "</ul></li>";
} else {
temp = temp + "<li><ul>" + grow(node[x]) + "</ul></li>";
}} else {
temp = temp + node[x];
}}
return(temp);
}
</script>
</body>
</html>