Language Parsing with PEG.js

Based on the tutorial on Nathan's University

http://pegjs.majda.cz

Turning raw text into structured data

Example

Creating a parser

Options for parsing a language

Write your own function
Specify the grammar of your language and hand it over to a parser generator

PEG Langugae Parser

PEG - Simple example

</div>

var containerNode = document.getElementById('target');
    var messageNode = document.getElementById('messages');

var textNode = document.createElement('textarea');
    textNode.style.width = '98%';
    textNode.style.height = '200px';
    containerNode.appendChild(textNode);

var textNode2 = document.createElement('textarea');
    textNode2.style.width = '98%';
    textNode2.style.height = '100px';
    containerNode.appendChild(textNode2);

textNode.value = 'start = [a-z]+';

document.getElementById('runner').onclick = handler;
    textNode2.onkeyup = handler;

</script>

PEG.js Sequances

</div>

var containerNode = document.getElementById('target');
    var messageNode = document.getElementById('messages');

var textNode = document.createElement('textarea');
    textNode.style.width = '98%';
    textNode.style.height = '200px';
    containerNode.appendChild(textNode);

var textNode2 = document.createElement('textarea');
    textNode2.style.width = '98%';
    textNode2.style.height = '100px';
    containerNode.appendChild(textNode2);

textNode.value = 'start = [1-3] [a-z] [A-Z]';

document.getElementById('runner').onclick = handler;
    textNode2.onkeyup = handler;

</script>

PEG.js Parser Actions

</div>

var containerNode = document.getElementById('target');
    var messageNode = document.getElementById('messages');

var textNode = document.createElement('textarea');
    textNode.style.width = '98%';
    textNode.style.height = '200px';
    containerNode.appendChild(textNode);

var textNode2 = document.createElement('textarea');
    textNode2.style.width = '98%';
    textNode2.style.height = '100px';
    containerNode.appendChild(textNode2);

textNode.value = 'start = exp\n\n'+
    'number = [0-9]\n\n'+
    'character = [a-zA-Z]\n\n'+
    'exp = first:number  second:character  third:character { return  { code: first, name: second + third }; }';

// can also use 'rest' for the last part of the expression

document.getElementById('runner').onclick = handler;
    textNode2.onkeyup = handler;

</script>

PEG.js More complex example

Example taken from Nathan's University

</div>

var containerNode = document.getElementById('target');
    var messageNode = document.getElementById('messages');

var textNode = document.createElement('textarea');
    textNode.style.width = '98%';
    textNode.style.height = '200px';
    containerNode.appendChild(textNode);

var textNode2 = document.createElement('textarea');
    textNode2.style.width = '98%';
    textNode2.style.height = '100px';
    containerNode.appendChild(textNode2);

textNode.value = ''+
        '    start = \n ' +
        '        additive \n ' +
        ' \n ' +
        '    additive = \n ' +
        '        left:multiplicative \'+\' right:additive { return {tag: \'+\', left:left, right:right}; } \n ' +
        '        / multiplicative \n ' +
        ' \n ' +
        '    multiplicative = \n ' +
        '        left:primary \'*\' right:multiplicative  { return {tag: \'*\', left:left, right:right}; } \n ' +
        '        / primary \n ' +
        ' \n ' +
        '    primary = \n ' +
        '        integer \n ' +
        '        / \'(\' additive:additive \')\'  { return additive; } \n ' +
        ' \n ' +
        '    integer = \n ' +
        '        digits:[0-9]+ { return parseInt(digits.join(\'\'), 10); } \n ';

textNode2.value = '4+5*6';
    // can also use 'rest' for the last part of the expression

document.getElementById('runner').onclick = handler;
    textNode2.onkeyup = handler;
    handler();

</script>

Language Parsing with PEG.js

Based on the tutorial on Nathan's University

http://pegjs.majda.cz

Turning raw text into structured data

Creating a parser

Options for parsing a language

PEG Langugae Parser

PEG - Simple example

PEG.js Sequances

PEG.js Parser Actions

PEG.js More complex example

Rouben Meschian

rmeschian@gmail.com