yzhanjsinterpreter
Version:
A JavaScript Interpreter Using JS itself. JavaScript 解释器，包含词法分析、语法解析和执行
104 lines (96 loc) • 2.5 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YZhan JavaScript Interpreter</title>
<link rel="stylesheet" href="./static/prism.css" />
<style>
body {
margin: 0;
}
.main {
display: flex;
height: 100vh;
justify-content: space-between;
gap: 1em;
background-color: #f7f7f7;
}
.main>div {
flex: 1;
background-color: #fff;
}
.main>div>div {
height: 98.5vh;
overflow: auto;
}
.main h2 {
margin: 0;
height: 1.5vh;
font-size: 16px;
text-align: center;
}
.main code {
display: block;
}
</style>
</head>
<body>
<div class="main">
<div>
<h2>Input JavaScript Code</h2>
<div id="js-code-input">
<pre><code class="language-javascript" contenteditable="true" data-manual>let a = 1;
let b = 1;
a <<= b++;
for (let i = 0; i < 10; i++) {
if (i % 2 === 0) continue;
if ((i | 2) == '11') break;
a++;
}
undefined && 1 ?? (0 || a + b);</code></pre>
</div>
</div>
<div>
<h2>Lexical Analyzer</h2>
<div id="lexical-analyzer"></div>
</div>
<div>
<h2>Syntax Parser</h2>
<div id="syntax-parser"></div>
</div>
<div>
<h2>Executor</h2>
<div id="executor"></div>
</div>
</div>
<script src="./yzhanjsinterpreter.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@textea/json-viewer@3"></script>
<script src="./static/prism.js"></script>
<script src="./static/function.js"></script>
<script>
function render(target) {
var range = saveSelection(target)
target.innerHTML = Prism.highlight(target.innerText, Prism.languages.javascript, 'javascript')
restoreSelection(target, range)
var code = target.innerText
var expression = yzhanJSInterpreter.lex(code)
var ast = yzhanJSInterpreter.parse(expression)
new JsonViewer({
value: expression
}).render('#lexical-analyzer')
new JsonViewer({
value: ast
}).render('#syntax-parser')
new JsonViewer({
value: yzhanJSInterpreter.execute(ast[0])
}).render('#executor')
}
var jsCodeInput = document.getElementById('js-code-input')
jsCodeInput.addEventListener('input', debounce(function (e) {
render(e.target)
}, 2000))
render(jsCodeInput.getElementsByTagName('code')[0])
</script>
</body>
</html>