Merge pull request #77 from jharding/76-escape-regex-characters

Escape regex characters when updating hint
twitter · Mar 3, 2013 · ff9d74e · ff9d74e
2 parents b904ff8 + 720f94c
commit ff9d74e
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 2 deletions.
diff --git a/src/js/typeahead_view.js b/src/js/typeahead_view.js
@@ -95,6 +95,7 @@ var TypeaheadView = (function() {
           hint = dataForFirstSuggestion ? dataForFirstSuggestion.value : null,
           inputValue,
           query,
+          escapedQuery,
           beginsWithQuery,
           match;
 
@@ -103,8 +104,9 @@ var TypeaheadView = (function() {
         query = inputValue
         .replace(/\s{2,}/g, ' ') // condense whitespace
         .replace(/^\s+/g, ''); // strip leading whitespace
+        escapedQuery = utils.escapeRegExChars(query);
 
-        beginsWithQuery = new RegExp('^(?:' + query + ')(.*$)', 'i');
+        beginsWithQuery = new RegExp('^(?:' + escapedQuery + ')(.*$)', 'i');
         match = beginsWithQuery.exec(hint);
 
         this.inputView.setHintValue(inputValue + (match ? match[1] : ''));

diff --git a/src/js/utils.js b/src/js/utils.js
@@ -11,6 +11,11 @@ var utils = {
 
   isBlankString: function(str) { return !str || /^\s*$/.test(str); },
 
+  // http://stackoverflow.com/a/6969486
+  escapeRegExChars: function(str) {
+    return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
+  },
+
   isString: function(obj) { return typeof obj === 'string'; },
 
   isNumber: function(obj) { return typeof obj === 'number'; },

diff --git a/test/playground.html b/test/playground.html
@@ -28,6 +28,9 @@
       <br>
       <br>
       <input class="bad-tokens" type="text" placeholder="bad tokens">
+      <br>
+      <br>
+      <input class="regex-symbols" type="text" placeholder="regex symbols">
     </div>
 
     <script>
@@ -110,6 +113,17 @@
           }
         ]
       });
+
+      $('.regex-symbols').typeahead({
+        local: [
+          '*.js',
+          '[Tt]ypeahead.js',
+          '^typeahead.js$',
+          'typeahead.js(0.8.2)',
+          'typeahead.js(@\\d.\\d.\\d)',
+          '[email protected]'
+        ]
+      });
     </script>
   </body>
 </html>
diff --git a/test/typeahead_view_spec.js b/test/typeahead_view_spec.js
@@ -523,8 +523,11 @@ describe('TypeaheadView', function() {
     });
 
     describe('if top suggestion\'s value begins with query', function() {
-      it('should show hint', function() {
+      beforeEach(function() {
         this.dropdownView.isOpen.andReturn(true);
+      });
+
+      it('should show hint', function() {
         this.inputView.getInputValue.andReturn('san   ');
         this.dropdownView.getFirstSuggestion
         .andReturn({ value: 'san francisco' });
@@ -534,6 +537,17 @@ describe('TypeaheadView', function() {
         expect(this.inputView.setHintValue)
         .toHaveBeenCalledWith('san   francisco');
       });
+
+      it('should escape regex characters', function() {
+        this.inputView.getInputValue.andReturn('*.js(v');
+        this.dropdownView.getFirstSuggestion
+        .andReturn({ value: '*.js(v\\d.\\d.\\d)' });
+
+        this[view].trigger(eventType);
+
+        expect(this.inputView.setHintValue)
+        .toHaveBeenCalledWith('*.js(v\\d.\\d.\\d)');
+      });
     });
 
     describe('if top suggestion\'s value does not begin with query',