index.html

﻿<!DOCTYPE html>
<html>
<head>
  <title>Expression - JavaScript Recursive Descent Parser</title>
  <meta charset="UTF-8">
  <script src="lib/jquery-2.1.4.min.js"></script>
  <script src="src/expression.js"></script>
  <style>
  textarea { font-family: monospace; width: 50em; height: 5em; }
  </style>
</head>
<body>
  <h2>Expression</h2>
  <h3>JavaScript Recursive Descent Parser</h3>
  <p>Source: <a href="https://github.com/ericbn/js-abstract-descent-parser">https://github.com/ericbn/js-abstract-descent-parser</a></p>
  <h3>Grammar</h3>
  <pre>  expr : term (('+' | '-') term)*
  term : factor (('*' | '/') factor)*
factor : number | '(' expr ')'
number : /\d+(?:\.\d+)?/</pre>
  <div id="json-section">
    <h3>Input Object</h3>
    <textarea id="json">{ "x": 2 }</textarea>
  </div>
  <h3>Input Expression</h3>
  <textarea id="expr">2+2</textarea>
  <div id="match-section">
    <h3>Matched</h3>
    <pre id="match"></pre>
  </div>
  <div id="result-section">
    <h3>Result</h3>
    <pre id="result"></pre>
  </div>
<script>
var onExpr = function() {
  var input = $('#expr').val();
  if (Expression.compile) {
    var obj = JSON.parse( $('#json').val());
    var ast = Expression.compile(input);
    $('#result').html(ast ? ast.match + ' = ' + ast.result(obj) : '');
  } else if (Expression.parse) {
    var parsed = Expression.parse(input);
    $('#result').html(parsed ? parsed.match + ' = ' + parsed.result : '');
  } else {
    var match = Expression.match ? Expression.match(input) : null;
    $('#match').html(match || '');
  }
};
if (Expression.compile) {
  $('#json').on('input', onExpr);
} else {
  $('#json-section').hide();
}
if (Expression.parse) {
  $('#match-section').hide();
} else {
  $('#result-section').hide();
}
$('#expr').on('input', onExpr);
onExpr();
</script>

</body>
</html>