Merge pull request #158 from bindable-ui/ddavis/fix-search-highlights

Fix Highlight Phrases function

Author: djedi

dev-app/app.html

@@ -52,7 +52,7 @@
                     <c-nav-horizontal-item
                         position="right"
                         href="https://github.com/bindable-ui/bindable"
-                        title="v1.12.0"
+                        title="v1.12.1"
                     ></c-nav-horizontal-item>
                 </c-nav-horizontal>
             </l-box>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bindable-ui/bindable",
   "description": "An Aurelia component library",
-  "version": "1.12.0",
+  "version": "1.12.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/bindable-ui/bindable"

src/helpers/highlight-phrases.test.ts

@@ -13,4 +13,26 @@ describe('Highlight Search Phrases Helper', () => {
         const empty = highlightSearchPhrases(searchPhrases);
         expect(empty).toEqual('');
     });
+
+    it('should should not highlight span tags', () => {
+        const searchPhrases = ['pan', 'span', 'color'];
+        const desc = 'Peter Pan';
+        const highlighted = highlightSearchPhrases(searchPhrases, desc);
+        expect(highlighted).toEqual('Peter <span style="background-color: #226684;">Pan</span>');
+        const empty = highlightSearchPhrases(searchPhrases);
+        expect(empty).toEqual('');
+    });
+
+    it('should escape html characters', () => {
+        const searchPhrases = ['dumb', 'and'];
+        const desc = 'Dumb & Dumber <HD>';
+        const highlighted = highlightSearchPhrases(searchPhrases, desc);
+        expect(highlighted).toEqual(
+            '<span style="background-color: #226684;">Dumb</span> ' +
+                '&amp; ' +
+                '<span style="background-color: #226684;">Dumb</span>er &lt;HD&gt;',
+        );
+        const empty = highlightSearchPhrases(searchPhrases);
+        expect(empty).toEqual('');
+    });
 });

src/helpers/highlight-phrases.ts

@@ -1,14 +1,17 @@
-export const highlightSearchPhrases = (searchPhrases: string[], matchAgainst?: string): string => {
-    let title = matchAgainst || '';
-    title = title
-        .replace('&', '&')
-        .replace('<', '&lt;')
-        .replace('>', '&gt;');
-    if (searchPhrases && searchPhrases.length > 0) {
-        searchPhrases.forEach(sp => {
-            const regEx = new RegExp(sp, 'gi');
-            title = title.replace(regEx, '<span style="background-color: #226684;">$&</span>');
-        });
+export function highlightSearchPhrases(searchPhrases: string[], desc: string = ''): string {
+    if (desc === '') {
+        return '';
     }
-    return title;
-};
+
+    const openTag = '<span style="background-color: #226684;">';
+    const closeTag = '</span>';
+
+    let highlightedDesc = _.escape(desc);
+
+    searchPhrases.forEach(phrase => {
+        const regex = new RegExp(`(${phrase})(?![^<]*>|[^<>]*<\/)`, 'gi');
+        highlightedDesc = highlightedDesc.replace(regex, `${openTag}$1${closeTag}`);
+    });
+
+    return highlightedDesc;
+}