Adding first cut of code to render alternations

Still need to implement lines to the individual parts

src/js/parser/javascript/grammar.peg

@@ -1,7 +1,7 @@
 grammar JavascriptRegexp
   root <- ( ( "/" regexp "/" fl:[igm]* ) / regexp ""? ) <Root>
-  regexp <- match ( "|" match )* <Regexp>
-  match <- anchor_start? ( ( subexp / charset / terminal ) repeat? )* anchor_end?
+  regexp <- match alternates:( "|" match )* <Regexp>
+  match <- anchor_start? ( ( subexp / charset / terminal ) repeat? )* anchor_end? <Match>
   anchor_start <- "^"
   anchor_end <- "$"
   repeat <- ( repeat_any / repeat_required / repeat_optional / repeat_spec ) repeat_greedy?

src/js/parser/javascript/match.js

@@ -0,0 +1,5 @@
+import _ from 'lodash';
+import Base from './base.js';
+
+export default _.extend({}, Base, {
+});

src/js/parser/javascript/regexp.js

@@ -2,11 +2,37 @@ import _ from 'lodash';
 import Base from './base.js';
 
 export default _.extend({}, Base, {
+  render(container) {
+    this.contents = _.map(this.matches(), match => {
+      var content = container.group();
+      match.render(content);
+      return content;
+    });
+  },
+
+  position() {
+    var center,
+        positions;
+
+    _.invoke(this.matches(), 'position');
+
+    positions = _.chain(this.contents)
+      .map(content => {
+        return { box: content.getBBox(), content };
+      });
+    center = positions.reduce((center, pos) => {
+      return Math.max(center, pos.box.cx);
+    }, 0).value();
+
+    positions.reduce((offset, pos) => {
+      pos.content.transform(Snap.matrix()
+        .translate(center - pos.box.cx, offset));
+
+      return offset + pos.box.height + 5;
+    }, 0);
+  },
+
   matches() {
-    if (this.elements[1].regexp) {
-      return [this.match].concat(this.elements[1].regexp.matches());
-    } else {
-      return [this.match];
-    }
+    return [this.match].concat(_.map(this.alternates.elements, _.property('match')));
   }
 });