Adding warnings for non-standard escape sequence usage

spec/parser/javascript/charset_spec.js

@@ -1,4 +1,5 @@
 import javascript from 'src/js/parser/javascript/parser.js';
+import Node from 'src/js/parser/javascript/node.js';
 import util from 'src/js/util.js';
 import _ from 'lodash';
 import Snap from 'snapsvg';
@@ -49,6 +50,14 @@ describe('parser/javascript/charset.js', function() {
     });
   });
 
+  it('adds a warning for character sets the contain non-standard escapes', function() {
+    var node;
+
+    Node.state = { warnings: [] };
+    node = new javascript.Parser('[\\c]').__consume__charset();
+    expect(node.state.warnings).toEqual(['The character set "[\\c]" 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.']);
+  });
+
   describe('_anchor property', function() {
 
     it('calculates the anchor based on the partContainer', function() {

spec/parser/javascript_spec.js

@@ -119,4 +119,13 @@ describe('parser/javascript.js', function() {
 
   });
 
+  describe('warnings property', function() {
+
+    it('returns the content of the warnings state variable', function() {
+      this.parser.state.warnings.push('example');
+      expect(this.parser.warnings).toEqual(['example']);
+    });
+
+  });
+
 });

spec/regexper_spec.js

@@ -11,6 +11,7 @@ describe('regexper.js', function() {
     this.root.innerHTML = [
       '<form id="regexp-form" action="/"><input type="text" id="regexp-input" /></form>',
       '<div id="error"></div>',
+      '<ul id="warnings"></ul>',
       '<div><a href="#" data-glyph="link-intact"></a></div>',
       '<div><a href="#" data-glyph="data-transfer-download"></a></div>',
       '<div id="progress"><div></div></div>',
@@ -355,6 +356,15 @@ describe('regexper.js', function() {
 
   });
 
+  describe('#displayWarnings', function() {
+
+    it('adds a list item for each warning', function() {
+      this.regexper.displayWarnings(['warning 1', 'warning 2']);
+      expect(this.regexper.warnings.innerHTML).toEqual('<li class="oi with-text" data-glyph="warning">warning 1</li><li class="oi with-text" data-glyph="warning">warning 2</li>');
+    });
+
+  });
+
   describe('#renderRegexp', function() {
 
     beforeEach(function() {
@@ -366,6 +376,7 @@ describe('regexper.js', function() {
 
       spyOn(this.regexper, '_trackEvent');
       spyOn(this.regexper, 'updateLinks');
+      spyOn(this.regexper, 'displayWarnings');
 
       this.regexper.renderRegexp('example expression');
     });
@@ -440,6 +451,10 @@ describe('regexper.js', function() {
         expect(this.regexper.updateLinks).toHaveBeenCalled();
       });
 
+      it('displays the warnings', function() {
+        expect(this.regexper.displayWarnings).toHaveBeenCalled();
+      });
+
       it('tracks the complete render', function() {
         expect(this.regexper._trackEvent).toHaveBeenCalledWith('visualization', 'complete');
       });

src/index.html

@@ -24,6 +24,8 @@
 
   <div id="error"></div>
 
+  <ul id="warnings"></ul>
+
   <!-- NOTE: Do not put anything in #regexp-render other than the <svg> element -->
   <div id="regexp-render">
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>

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 => {

src/sass/_base.scss

@@ -6,6 +6,7 @@ $light-gray: tint($gray, 25%);
 $tan: #cbcbba;
 $red: #b3151a;
 $blue: #dae9e5;
+$yellow: #f8ca00;
 $black: #000;
 $white: #fff;
 

src/sass/main.scss

@@ -383,6 +383,21 @@ header {
   }
 }
 
+#warnings {
+  @include adjust-font-size-to($base-font-size, 1);
+  font-weight: bold;
+  background-color: $yellow;
+  display: none;
+
+  li {
+    margin: rhythm(1/4);
+  }
+
+  body.has-results & {
+    display: block;
+  }
+}
+
 #regexp-render {
   background: $white;
   width: 100%;