Merge pull request #187 from kaogeek/186-search-highlight-for-multipl…

…e-search-terms #186 Search highlight for multiple search terms
kaogeek · Sep 1, 2024 · b53a7b2 · b53a7b2
2 parents c6b9358 + 89a0b6d
commit b53a7b2
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 5 deletions.
diff --git a/src/components/Constitution.jsx b/src/components/Constitution.jsx
@@ -1,4 +1,5 @@
 import accordionToggle from "../utils/accordion.js";
+import highlight from '../utils/highlight.js';
 import "../styles/Normal.css";
 
 export default function Constitution({constitution, search = null}) {
@@ -23,7 +24,7 @@ export default function Constitution({constitution, search = null}) {
       <div className="accordion-collapsable">
         <div className="w-full p-5 sm:rounded-b-xl bg-[#eee]">
           <div className="provision md:pt-3 md:px-5 text-[#222] text-bold text-sm text-left"
-            dangerouslySetInnerHTML={{__html: constitution.replace(new RegExp(search, 'gi'), `<span class="highlight">${search}</span>`)}}
+            dangerouslySetInnerHTML={{__html: highlight(constitution, search) }}
           ></div>
         </div>
       </div>

diff --git a/src/components/Sections.jsx b/src/components/Sections.jsx
@@ -1,5 +1,6 @@
-import accordionToggle from "../utils/accordion.js";
 import React, { useState, useEffect } from 'react';
+import accordionToggle from '../utils/accordion.js';
+import highlight from '../utils/highlight.js';
 import "../styles/Section.css";
 import pdf from "../images/PDF_file_icon.svg";
 import "../styles/Normal.css";
@@ -100,7 +101,7 @@ export default function Sections({ sections, search = null }) {
               </div>
               <div className="w-full p-5 sm:rounded-b-xl bg-[#eee]">
                 <div className="provision md:pt-3 md:px-5 text-[#222] text-bold text-sm text-left"
-                  dangerouslySetInnerHTML={{ __html: section.ร่างบทบัญญัติ.replace(new RegExp(search, 'gi'), `<span class="highlight">${search}</span>`) }}
+                  dangerouslySetInnerHTML={{ __html: highlight(section.ร่างบทบัญญัติ, search) }}
                 ></div>
               </div>
             </>
@@ -114,7 +115,7 @@ export default function Sections({ sections, search = null }) {
                 <div className="provision md:pt-3 md:px-5 text-[#222] text-bold text-sm text-left">
                   <div className={`${isTopicExpanded ? 'expanded' : 'truncate-500'}`}>
                     <div
-                      dangerouslySetInnerHTML={{ __html: section.ประเด็นการพิจารณา.replace(new RegExp(search, 'gi'), `<span class="highlight">${search}</span>`) }}
+                      dangerouslySetInnerHTML={{ __html: highlight(section.ประเด็นการพิจารณา, search) }}
                     />
                   </div>
                   {isShown &&

diff --git a/src/pages/Search.jsx b/src/pages/Search.jsx
@@ -101,7 +101,7 @@ export default function Search({ searchInputValue, setSearchInputValue }) {
             const [section, chapter] = item[1].split('|');
             return (
                 <Link
-                    to={"/section/" + item[0] + `/${searchInputValue}`}
+                    to={"/section/" + item[0] + `/${searchInputValue.trim().replace(/\s/g, '+')}`}
                     onClick={() => saveHistory(searchInputValue)}
                     key={index}
                     state={{ backable: true }}

diff --git a/src/utils/highlight.js b/src/utils/highlight.js
@@ -0,0 +1,12 @@
+export default function highlight(content, words='') {
+  return words
+    .trim()
+    .split('+')
+    .reduce(
+      (hc, word) => hc.replace(
+        new RegExp(word, 'gi'),
+        `<span class="highlight">${word}</span>`
+      )
+    , content)
+}
+