Adding warnings for non-standard escape sequence usage

src/js/parser/javascript.js

@@ -9,7 +9,8 @@ export default class Parser {
       groupCounter: 1,
       renderCounter: 0,
       maxCounter: 0,
-      cancelRender: false
+      cancelRender: false,
+      warnings: []
     };
   }
 
@@ -58,4 +59,8 @@ export default class Parser {
   cancel() {
     this.state.cancelRender = true;
   }
+
+  get warnings() {
+    return this.state.warnings;
+  }
 }

src/js/parser/javascript/charset.js

@@ -41,5 +41,9 @@ export default {
     this.elements = _.unique(this.properties.parts.elements, part => {
       return [part.type, part.textValue].join(':');
     });
+
+    if (this.textValue.match(/\\c[^a-zA-Z]/)) {
+      this.state.warnings.push(`The character set "${this.textValue}" contains the \\c escape followed by a character other than A-Z. This can lead to different behavior depending on browser. The representation here is the most common interpretation.`);
+    }
   }
-};
+}

src/js/regexper.js

@@ -1,6 +1,7 @@
 import util from './util.js';
 import Parser from './parser/javascript.js';
 import Q from 'q';
+import _ from 'lodash';
 
 export default class Regexper {
   constructor(root) {
@@ -8,6 +9,7 @@ export default class Regexper {
     this.form = root.querySelector('#regexp-form');
     this.field = root.querySelector('#regexp-input');
     this.error = root.querySelector('#error');
+    this.warnings = root.querySelector('#warnings');
     this.permalink = root.querySelector('a[data-glyph="link-intact"]');
     this.download = root.querySelector('a[data-glyph="data-transfer-download"]');
     this.percentage = root.querySelector('#progress div');
@@ -122,6 +124,12 @@ export default class Regexper {
     }
   }
 
+  displayWarnings(warnings) {
+    this.warnings.innerHTML = _.map(warnings, warning => {
+      return `<li class="oi with-text" data-glyph="warning">${warning}</li>`;
+    }).join('');
+  }
+
   renderRegexp(expression) {
     if (this.runningParser) {
       let deferred = Q.defer();
@@ -154,6 +162,7 @@ export default class Regexper {
       .then(() => {
         this.state = 'has-results';
         this.updateLinks();
+        this.displayWarnings(this.runningParser.warnings);
         this._trackEvent('visualization', 'complete');
       })
       .then(null, message => {