#303 - Improving Chinese result highlighting

src/tools/text-processing.ts

@@ -29,24 +29,46 @@ export function highlighterGroups(_substring: string, ...args: any[]) {
  * @returns The html string with the matches highlighted
  */
 export function highlightText(text: string, matches: SearchMatch[]): string {
+  if (!matches.length) {
+    return text
+  }
+  const chsSegmenter = getChsSegmenter()
   try {
-    return text.replace(
+    // Text to highlight
-      new RegExp(
+    const src = new RegExp(
-        matches
+      matches
-          .map(matchInfo => `\\b${escapeRegExp(matchInfo.match)}\\b`)
+        .map(
-          .join('|'),
+          // This regex will match the word (with \b word boundary)
-        'giu'
+          // and, if ChsSegmenter is active, the simple string (without word boundary)
-      ),
+          matchItem =>
-      match => {
+            `\\b${escapeRegExp(matchItem.match)}\\b${
-        const matchInfo = matches.find(info =>
+              chsSegmenter ? `|${escapeRegExp(matchItem.match)}` : ''
-          match.match(new RegExp(`\\b${escapeRegExp(info.match)}\\b`, 'giu'))
+            }`
         )
-        if (matchInfo) {
+        .join('|'),
-          return `<span class="${highlightClass}">${match}</span>`
+      'giu'
-        }
-        return match
-      }
     )
+
+    // Replacer function that will highlight the matches
+    const replacer = (match: string) => {
+      const matchInfo = matches.find(info =>
+        match.match(
+          new RegExp(
+            `\\b${escapeRegExp(info.match)}\\b${
+              chsSegmenter ? `|${escapeRegExp(info.match)}` : ''
+            }`,
+            'giu'
+          )
+        )
+      )
+      if (matchInfo) {
+        return `<span class="${highlightClass}">${match}</span>`
+      }
+      return match
+    }
+
+    // Effectively highlight the text
+    return text.replace(src, replacer)
   } catch (e) {
     console.error('Omnisearch - Error in highlightText()', e)
     return text