100%

Lexing and Parsing in JavaScript

✓ Published0🌍 Public

Last edited Oct 14, 2012

Created on Sep 23, 2012

This example demonstrates a live lexer and recursive descent parser for a custom wiki-like markup language, converting user input from a textarea into HTML output. The code uses d3.v2 to manage DOM selection and event handling, registering callbacks that recompile the input on changes. It showcases the parsing pipeline by processing the typed text in real time, with a table tracking events fired on the html, body, and textarea elements. The parser applies grammar rules in precedence order, prioritizing robustness over performance by assuming limited input size.

AI-generated description

Basic Compiler Technology

Lexers, Parsers, Code Generators are of all ages (old skool: lex/flex, yacc/bison (modern-ish: PCCTS/ANTLR), burg/lburg/...)

Here's an example of a JavaScript based domain-specific language being parsed and converted into HTML. It is very similar to wiki and MarkDown formats; the only purpose of this code is to showcase the parsing technology, so a minimum number of 'shortcuts' and other production code 'smartness' is applied.

The recursive descent parser works by evaluating the grammar rules in order of precedence, where each function call is a grammar rule match attempt and the first one returning success is a 'grammar rule match' which will allow the parser to continue parsing the input.

Also, the input is assumed to be size limited, i.e. a infinite lookahead grammar is fine with us. (This doesn't work in situations where you need to parse a stream, but that is a problem area that few of us have to deal with in actual reality. Mostly we like limited lookahead grammars because those will guarantee a good parsing performance; infinite look-ahead can produce a quadratic or even exponential run time.)

Similar vizzes

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that combines CSS and JavaScript within a single file. It showcases a custom parser function that scans a text block for occurrences of the `::div` pattern, then logs each match to the browser console. The parser uses a regular expression to capture syntax elements like IDs, classes, colors, and fonts, testing how structured text annotations can be extracted. The page’s body simply displays the text “Hello HTML,” while the parser operates on a multiline string defined in a namespace object.

PPotOfCoffee2Go

63% match

Loading thumbnail…

JS in HTML

A minimal HTML page demonstrates dynamic text styling with CSS and JavaScript, rendering a large centered message. The page loads D3 v7 from a CDN and imports modular JavaScript files, including `something.js` and `thing.js`, which export string values logged to the console. D3's `select` function is imported but not used in the visible code, while the CSS `.message` class controls font size and alignment. The example highlights basic integration of HTML, CSS, and ES modules in a bare-bones setup.

Mmax-31

61% match

Loading thumbnail…

Untitled

A live graph renderer displays a DOT language diagram that updates in real time as users type. The example uses d3-graphviz and the @hpcc-js/wasm library to parse and render Graphviz syntax, with d3.transition providing smooth animated updates. A textarea on the left captures input, and every keystroke triggers the graph to re-render via the `renderDot` method, fitting the diagram to the window size.

WWRCIECH

61% match

Loading thumbnail…

lear_d3JS

This example demonstrates a minimal HTML page that uses CSS for styling and JavaScript for dynamic behavior, displaying a large centered message reading “Hello HTML!”. The code relies on plain HTML structure, a CSS class for font sizing and alignment, and does not yet incorporate D3.js or React functionality despite the project name and framework metadata. It serves as a bare-bones starting point, with the README referencing a React Starter as an alternative. The rendering approach is static DOM content without any data binding or visualization logic.

CCécile Hirschauer

61% match

Loading thumbnail…

JS in HTML

This example reproduces a Sol LeWitt art piece using D3 v7. The code imports D3’s `select` function and logs it, along with strings built from custom modules `something.js` and `thing.js` that export default and named values. The HTML page sets a large font size and centers the body, though no DOM elements are appended or manipulated, so the visualization is limited to the console output demonstrating module imports and D3’s availability.

Ccssergio

60% match

Loading thumbnail…

JS in HTML

This example demonstrates how JavaScript modules can be seamlessly integrated into an HTML page using D3 v6. The page displays the text "Hello HTML" in large type, while the accompanying JavaScript logs greetings and exports to the browser console. It uses D3’s `select` import and modular exports from custom `something.js` and `thing.js` files, showcasing ES module syntax and dependency chaining. The rendering approach is simple static HTML with a CDN-hosted D3 script.

CCurran Kelleher

60% match

Loading thumbnail…

parsing csv data with d3

This example demonstrates a minimal HTML page that logs a JavaScript message to the browser console, serving as a basic introduction to combining CSS and JavaScript in a web page. The page uses no external libraries or data sources; instead, it relies on plain HTML, inline CSS for centered text styling, and a simple `console.log` call to output “Hello JavaScript!”. The code is a bare-bones starting point for learning how to structure a webpage and execute client-side scripts, with no interactive or visual data outputs beyond the static “Hello HTML” text displayed on screen.

MMarco Malvicini

60% match

Loading thumbnail…

JS in HTML

This example demonstrates how D3 v7 can be embedded directly within an HTML page alongside modular JavaScript imports to create a simple text-based visualization. The page displays the static string “Hello HTML!” centered on a blank canvas, while the accompanying script logs output to the browser console using `console.log`. The code imports D3’s `select` function, along with custom modules, illustrating a modular structure where constants like `thing` and `something` are composed across files. The visualization itself is minimal, focusing on the integration of D3’s selection API within a standard HTML document.

Rroyable88

60% match