fix(autocomplete): Correctly highlight HTML entities

Fix the highlight algorithm in order to take into account HTML entities
and correctly highlight them.

Closes #200

.jshintrc

@@ -34,7 +34,7 @@
         "findInObjectArray": true,
         "safeToString": true,
         "encodeHTML": true,
-        "replaceAll" : true,
+        "safeHighlight" : true,
         "generateArray": true,
         "changeElementValue": true,
         "customMatchers": true,

src/auto-complete.js

@@ -169,7 +169,7 @@ tagsInput.directive('autoComplete', function($document, $timeout, $sce, $q, tags
                 var text = getDisplayText(item);
                 text = encodeHTML(text);
                 if (options.highlightMatchedText) {
-                    text = replaceAll(text, encodeHTML(suggestionList.query), '<em>$&</em>');
+                    text = safeHighlight(text, encodeHTML(suggestionList.query));
                 }
                 return $sce.trustAsHtml(text);
             };

src/util.js

@@ -47,13 +47,19 @@ function findInObjectArray(array, obj, key) {
     return item;
 }
 
-function replaceAll(str, substr, newSubstr) {
-    if (!substr) {
+function safeHighlight(str, value) {
+    if (!value) {
         return str;
     }
 
-    var expression = substr.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1');
-    return str.replace(new RegExp(expression, 'gi'), newSubstr);
+    function escapeRegexChars(str) {
+        return str.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1');
+    }
+
+    var expression = new RegExp('&[^;]+;|' + escapeRegexChars(value), 'gi');
+    return str.replace(expression, function(match) {
+        return match === value ? '<em>' + value + '</em>' : match;
+    });
 }
 
 function safeToString(value) {

test/auto-complete.spec.js

@@ -1002,6 +1002,23 @@ describe('autoComplete directive', function() {
             expect(getSuggestionText(1)).toBe('Item &lt;2<em>&gt;</em>');
             expect(getSuggestionText(2)).toBe('Item &amp;3');
         });
+
+        it('doesn\'t highlight HTML entities in suggestions list', function() {
+            // Arrange
+            compile('highlight-matched-text="true"', 'min-length="1"');
+
+            // Act
+            loadSuggestions([
+                { text: 'a&a' },
+                { text: '&a' },
+                { text: 'a&' }
+            ], 'a');
+
+            // Assert
+            expect(getSuggestionText(0)).toBe('<em>a</em>&amp;<em>a</em>');
+            expect(getSuggestionText(1)).toBe('&amp;<em>a</em>');
+            expect(getSuggestionText(2)).toBe('<em>a</em>&amp;');
+        });
     });
 
     describe('max-results-to-show option', function() {