index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ANTLR Grammar Example</title>
<script>
var antlr4;
var CalcLexer;
var CalcParser;

function print(message) {
  var output = document.getElementById('output');
  if (!output) return;
  var p = document.createElement('p');
  if (!p) return;
  p.innerHTML = message;
  output.appendChild(p);
}

function getInputLine() {
  var input = document.getElementById('input');
  return (input) ? input.value : null;
}

function parse() {
  if (!antlr4 || !CalcLexer || !CalcParser) return;
  var inputLine = getInputLine();
  if (!inputLine) return;
  var chars = new antlr4.InputStream(inputLine);
  var lexer = new MyGrammarLexer.MyGrammarLexer(chars);
  var tokens  = new antlr4.CommonTokenStream(lexer);
  var parser = new MyGrammarParser.MyGrammarParser(tokens);
  print('Result: ' + parser.eval().value);
}

function init() {
  document.body.style.backgroundColor = 'Silver';
  print('Import ANTLR...');
  antlr4 = require('antlr4/index');
  print('Import CalcLexer...');
  CalcLexer = require('./CalcLexer');
  print('Import CalcParser...');
  CalcParser = require('./CalcParser');
  print('OK');
}
</script>
</head>
<body onload="init()">
<div><input id="input" type="text" /></div>
<div><button onclick="parse()">Parse</button></div>
<div id="output"></div>
<script src="lib/require.js"></script>
</body>
</html>