diff --git a/src/index.html b/src/index.html
index 910ea02..f21654c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -48,11 +48,11 @@
           fill: #6b6659;
         }
 
-        .escape text, .literal text {
+        .escape text, .charset-escape text, .literal text {
           fill: #000;
         }
 
-        .escape rect {
+        .escape rect, .charset-escape rect {
           fill: #bada55;
         }
 
diff --git a/src/js/parser/javascript/any_character.js b/src/js/parser/javascript/any_character.js
index b1275e2..e3710da 100644
--- a/src/js/parser/javascript/any_character.js
+++ b/src/js/parser/javascript/any_character.js
@@ -2,11 +2,9 @@ import _ from 'lodash';
 import Base from './base.js';
 
 export default _.extend({}, Base, {
-  type: 'any_character',
+  type: 'any-character',
 
   render() {
-    this.container.addClass('any-character');
-
     this.label = this.renderLabel(this.container, 'any character');
   }
 });
diff --git a/src/js/parser/javascript/base.js b/src/js/parser/javascript/base.js
index 88c2809..5b25b8e 100644
--- a/src/js/parser/javascript/base.js
+++ b/src/js/parser/javascript/base.js
@@ -1,6 +1,11 @@
 import _ from 'lodash';
 
 export default {
+  setContainer(container) {
+    this.container = container;
+    this.container.addClass(this.type);
+  },
+
   getBBox() {
     return this.container.getBBox();
   },
diff --git a/src/js/parser/javascript/charset.js b/src/js/parser/javascript/charset.js
index 0efb649..a88bf91 100644
--- a/src/js/parser/javascript/charset.js
+++ b/src/js/parser/javascript/charset.js
@@ -5,8 +5,6 @@ export default _.extend({}, Base, {
   type: 'charset',
 
   render() {
-    this.container.addClass('charset');
-
     this.label = this.container.text()
       .addClass('charset-label')
       .attr({
@@ -23,7 +21,7 @@ export default _.extend({}, Base, {
     this.partContainer = this.container.group();
 
     _.each(this.parts.elements, (part => {
-      part.container = this.partContainer.group();
+      part.setContainer(this.partContainer.group());
       part.render();
     }).bind(this));
   },
diff --git a/src/js/parser/javascript/charset_escape.js b/src/js/parser/javascript/charset_escape.js
index f5bec9b..576f8c3 100644
--- a/src/js/parser/javascript/charset_escape.js
+++ b/src/js/parser/javascript/charset_escape.js
@@ -2,7 +2,7 @@ import _ from 'lodash';
 import Escape from './escape.js';
 
 export default _.extend({}, Escape, {
-  type: 'charset_escape',
+  type: 'charset-escape',
 
   b: 'backspace'
 });
diff --git a/src/js/parser/javascript/charset_range.js b/src/js/parser/javascript/charset_range.js
index 4849ed4..14366a9 100644
--- a/src/js/parser/javascript/charset_range.js
+++ b/src/js/parser/javascript/charset_range.js
@@ -2,13 +2,13 @@ import _ from 'lodash';
 import Base from './base.js';
 
 export default _.extend({}, Base, {
-  type: 'charset_range',
+  type: 'charset-range',
 
   render() {
-    this.first.container = this.container.group();
+    this.first.setContainer(this.container.group());
     this.first.render();
 
-    this.last.container = this.container.group();
+    this.last.setContainer(this.container.group());
     this.last.render();
 
     this.hyphen = this.container.text()
diff --git a/src/js/parser/javascript/escape.js b/src/js/parser/javascript/escape.js
index 74b5f38..03d8455 100644
--- a/src/js/parser/javascript/escape.js
+++ b/src/js/parser/javascript/escape.js
@@ -13,8 +13,6 @@ export default _.extend({}, Base, {
   },
 
   render() {
-    this.container.addClass('escape');
-
     this.label = this.renderLabel(this.container, _.result(this, this.code()));
 
     this.label.select('rect').attr({
diff --git a/src/js/parser/javascript/literal.js b/src/js/parser/javascript/literal.js
index 4c01a1f..6c7e447 100644
--- a/src/js/parser/javascript/literal.js
+++ b/src/js/parser/javascript/literal.js
@@ -5,8 +5,6 @@ export default _.extend({}, Base, {
   type: 'literal',
 
   render() {
-    this.container.addClass('literal');
-
     this.label = this.renderLabel(this.container, '"' + this.literal.textValue + '"');
 
     this.label.select('rect').attr({
diff --git a/src/js/parser/javascript/match.js b/src/js/parser/javascript/match.js
index dfdffa1..651e4d5 100644
--- a/src/js/parser/javascript/match.js
+++ b/src/js/parser/javascript/match.js
@@ -15,7 +15,7 @@ export default _.extend({}, Base, {
     }
 
     this.contents.parts = _.map(this.parts(), function(part) {
-      part.container = self.container.group();
+      part.setContainer(self.container.group());
       part.render();
       return part;
     });
diff --git a/src/js/parser/javascript/match_fragment.js b/src/js/parser/javascript/match_fragment.js
index a99f8d8..8a032c2 100644
--- a/src/js/parser/javascript/match_fragment.js
+++ b/src/js/parser/javascript/match_fragment.js
@@ -2,10 +2,10 @@ import _ from 'lodash';
 import Base from './base.js';
 
 export default _.extend({}, Base, {
-  type: 'match_fragment',
+  type: 'match-fragment',
 
   render() {
-    this._content.container = this.container.group();
+    this._content.setContainer(this.container.group());
     this._content.render();
   },
 
diff --git a/src/js/parser/javascript/regexp.js b/src/js/parser/javascript/regexp.js
index c2eda4a..c506e21 100644
--- a/src/js/parser/javascript/regexp.js
+++ b/src/js/parser/javascript/regexp.js
@@ -10,7 +10,7 @@ export default _.extend({}, Base, {
     this.matchContainer = this.container.group();
 
     _.each(this.matches(), match => {
-      match.container = self.matchContainer.group();
+      match.setContainer(self.matchContainer.group());
       match.render();
       return match.container;
     });
diff --git a/src/js/parser/javascript/root.js b/src/js/parser/javascript/root.js
index c9b7ba3..2daed9b 100644
--- a/src/js/parser/javascript/root.js
+++ b/src/js/parser/javascript/root.js
@@ -5,8 +5,8 @@ export default _.extend({}, Base, {
   type: 'root',
 
   render() {
-    this.regexp.container = this.container.group().transform(Snap.matrix()
-      .translate(10, 0));
+    this.regexp.setContainer(this.container.group().transform(Snap.matrix()
+      .translate(10, 0)));
     this.regexp.render();
 
     this.start = this.container.circle()
diff --git a/src/js/parser/javascript/subexp.js b/src/js/parser/javascript/subexp.js
index 607b281..afd57c4 100644
--- a/src/js/parser/javascript/subexp.js
+++ b/src/js/parser/javascript/subexp.js
@@ -16,8 +16,6 @@ export default _.extend({}, Base, {
     var label = this.groupLabel();
 
     if (label) {
-      this.container.addClass('subexp');
-
       this.label = this.container.text()
         .addClass('subexp-label')
         .attr({
@@ -31,10 +29,10 @@ export default _.extend({}, Base, {
           ry: 3
         });
 
-      this.regexp.container = this.container.group();
+      this.regexp.setContainer(this.container.group());
       this.regexp.render();
     } else {
-      this.regexp.container = this.container;
+      this.regexp.setContainer(this.container);
       this.regexp.render();
     }
   },
diff --git a/src/js/regexper.js b/src/js/regexper.js
index 3134fcf..a780c51 100644
--- a/src/js/regexper.js
+++ b/src/js/regexper.js
@@ -91,7 +91,7 @@ export default class Regexper {
 
     return Q.fcall(parser.parse.bind(parser), expression)
       .then((result) => {
-        result.container = snap.group();
+        result.setContainer(snap.group());
         result.render();
         return result;
       }, this.showError.bind(this))