fix: highlight em in search results (#653)

AdvisorySG · Nov 15, 2023 · 4571e05 · 4571e05
1 parent 0bd9cac
commit 4571e05
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 7 deletions.
diff --git a/components/ResultView.tsx b/components/ResultView.tsx
@@ -62,7 +62,11 @@ const fillHighlights = (snippet: string | null, full: string): string => {
   }
 
   const snippetRaw = htmlToText(snippet, { wordwrap: false });
-  return full.replace(snippetRaw, snippet);
+  const styledSnippet = snippet.replace(
+    /<em>/g,
+    '<em style= "font-weight: bold; color: #375ae6; font-style: normal; background-color: #edf6fe; ">'
+  );
+  return full.replace(snippetRaw, styledSnippet);
 };
 
 const COLORS = [

diff --git a/components/ResultViewList.tsx b/components/ResultViewList.tsx
@@ -31,7 +31,12 @@ const ResultViewList = ({
           {displayName && (
             <span
               className="sui-result__title"
-              dangerouslySetInnerHTML={{ __html: displayName }}
+              dangerouslySetInnerHTML={{
+                __html: displayName.replace(
+                  /<em[^>]*>/g,
+                  '<em style="background-color: transparent;">'
+                ),
+              }}
             />
           )}
         </div>
@@ -56,7 +61,12 @@ const ResultViewList = ({
                 <span
                   className="sui-result__value"
                   style={{ fontSize: 16, fontWeight: 600 }}
-                  dangerouslySetInnerHTML={{ __html: displayRole }}
+                  dangerouslySetInnerHTML={{
+                    __html: displayRole.replace(
+                      /<em[^>]*>/g,
+                      '<em style="background-color: transparent;">'
+                    ),
+                  }}
                 />
               )}
               {displayRole && displayOrganisation && (
@@ -69,7 +79,12 @@ const ResultViewList = ({
                 <span
                   className="sui-result__value"
                   style={{ fontSize: 16, fontWeight: 600 }}
-                  dangerouslySetInnerHTML={{ __html: displayOrganisation }}
+                  dangerouslySetInnerHTML={{
+                    __html: displayOrganisation.replace(
+                      /<em[^>]*>/g,
+                      '<em style="background-color: transparent;">'
+                    ),
+                  }}
                 />
               )}
             </li>
@@ -80,7 +95,12 @@ const ResultViewList = ({
               <span
                 className="sui-result__value"
                 style={{ fontSize: 16, fontWeight: 600 }}
-                dangerouslySetInnerHTML={{ __html: displayCourseOfStudy }}
+                dangerouslySetInnerHTML={{
+                  __html: displayCourseOfStudy.replace(
+                    /<em[^>]*>/g,
+                    '<em style="background-color: transparent;">'
+                  ),
+                }}
               />
             </li>
           )}
@@ -90,7 +110,12 @@ const ResultViewList = ({
               <span
                 className="sui-result__value"
                 style={{ fontSize: 16, fontWeight: 600 }}
-                dangerouslySetInnerHTML={{ __html: displaySchool }}
+                dangerouslySetInnerHTML={{
+                  __html: displaySchool.replace(
+                    /<em[^>]*>/g,
+                    '<em style="background-color: transparent;">'
+                  ),
+                }}
               />
             </li>
           )}
@@ -100,7 +125,12 @@ const ResultViewList = ({
               <span
                 className="sui-result__biography"
                 style={{ fontSize: 14 }}
-                dangerouslySetInnerHTML={{ __html: displayFullBio }}
+                dangerouslySetInnerHTML={{
+                  __html: displayFullBio.replace(
+                    /<em[^>]*>/g,
+                    '<em style="background-color: transparent;">'
+                  ),
+                }}
               />
             </li>
           )}