fix: support overlapping highlights in HighlightUtils.ts (#1974)

https://coveord.atlassian.net/browse/JSUI-3514 Co-authored-by: Louis Bompart <[email protected]>
coveo · May 10, 2024 · 7876f7f · 7876f7f
1 parent c769a3b
commit 7876f7f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 11 deletions.
diff --git a/src/utils/HighlightUtils.ts b/src/utils/HighlightUtils.ts
@@ -259,18 +259,19 @@ export class HighlightUtils {
         break;
       }
 
-      highlighted += _.escape(content.slice(last, start));
-      highlighted += `<span class="${cssClass}"`;
-      if (highlight.dataHighlightGroup) {
-        highlighted += ` data-highlight-group="${highlight.dataHighlightGroup.toString()}"`;
-      }
-      if (highlight.dataHighlightGroupTerm) {
-        highlighted += ` data-highlight-group-term="${highlight.dataHighlightGroupTerm}"`;
+      if (last <= start) {
+        highlighted += _.escape(content.slice(last, start));
+        highlighted += `<span class="${cssClass}"`;
+        if (highlight.dataHighlightGroup) {
+          highlighted += ` data-highlight-group="${highlight.dataHighlightGroup.toString()}"`;
+        }
+        if (highlight.dataHighlightGroupTerm) {
+          highlighted += ` data-highlight-group-term="${highlight.dataHighlightGroupTerm}"`;
+        }
+        highlighted += '>';
+        highlighted += _.escape(content.slice(start, end));
+        highlighted += '</span>';
       }
-      highlighted += '>';
-      highlighted += _.escape(content.slice(start, end));
-      highlighted += '</span>';
-
       last = end;
     }
     if (last != maxIndex) {

diff --git a/unitTests/utils/HighlightUtilsTest.ts b/unitTests/utils/HighlightUtilsTest.ts
@@ -10,6 +10,17 @@ export function HighlightUtilsTest() {
     const localPath = 'C:\\Programmes\\Ces\\config\\sources\\salesforce';
 
     describe('highlightString', function () {
+      it('should handle highlights that overlap', function () {
+        let highlights: IHighlight[] = [
+          { offset: 9, length: 19 },
+          { offset: 16, length: 12 },
+          { offset: 18, length: 15 }
+        ];
+        let expectedHighlight =
+          'Lorem ips<span class="coveo-highlight">um dolor sit amet, </span>ctetur adipisicing elit, sed do eiusmod tempor incididunt ut';
+        expect(HighlightUtils.highlightString(lorem, highlights, null, 'coveo-highlight')).toBe(expectedHighlight);
+      });
+
       it('should wrap the passed highlights with tags using the specified class name', function () {
         let highlights: IHighlight[] = [
           { offset: 3, length: 5 },