PEG.js

by cvrajeesh

HTML

<script src="https://github.com/pegjs/pegjs/releases/download/v0.9.0/peg-0.9.0.min.js"></script>
<h2>Grammar</h2>
<textarea id="grammar">    
Start
 = GroceryList

GroceryList
 = GroceryListItem *

GroceryListItem
 = n:Name _ q:Quantity nl*
 { return { name: n, quantity: q };}

Name
 = Word

Quantity
 = w:Weight u:Unit
 { if(u == "kg") return w * 1000; return w;} 

Weight
 = n:Number+
 { return parseInt(n.join(""));}

Unit
 = first:Letter second:Letter
 { return first + second; }

Word
 = l:Letter+
 { return l.join(""); }

Number
 = [0-9]

Letter
 = [a-zA-Z]

nl "New line"
 = "\n"

ws "Whitespace"
 = [ \t]

_ "One or more whitespaces"
 = ws+
</textarea>
<h2>Grocery List</h2>
<textarea id="grocerylist">
Onion 1kg
Tomatoes 500gm
Beans 1kg
</textarea>
<button id="parse">Parse</button>
<h2>Result</h2>
<div id="result">
 <div>

CSS

textarea {
    width: 100%;    
}

h2 {
 margin: 5px 0;
}

#grammar {
    height: 200px;
}

#grocerylist {
    height: 75px;
}

#result {
    white-space: pre;
    font-size: 0.75em;
        
}

JavaScript

(function(){
    
    parseText();
    document.getElementById("parse").addEventListener("click", parseText);
    
    
    function parseText() {
        try{
            var grammer = document.getElementById("grammar").value;
            var text = document.getElementById("grocerylist").value;
            var parser = PEG.buildParser(grammer);
            var result = parser.parse(text);
            document.getElementById("result").textContent = JSON.stringify(result, null, 2);
        }catch(err){
            document.getElementById("result").textContent = err.toString();
        }
    }
    
})();