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

Fix Highlight Phrases function

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;
+}