Highlighting matched part in question search

src/components/Question.js

@@ -1,27 +1,41 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 
-class Question extends PureComponent {
-  render() {
-    const { question } = this.props
-
-    let qdata = question.data
-    if (typeof qdata === 'object' && qdata.type === 'simple') {
-      qdata = ''
-    }
-    if (qdata) {
-      try {
-        qdata = JSON.stringify(qdata)
-      } catch (e) {}
-    }
-
-    return (
-      <div className="questionContainer">
-        <div className="question">{question.Q}</div>
-        <div className="answer">{question.A}</div>
-        <div className="data">{qdata || null}</div>
-      </div>
-    )
-  }
+function highlightText(text, toHighlight) {
+  const re = new RegExp(toHighlight, 'gi')
+  return text.replace(re, `<mark>${toHighlight}</mark>`)
 }
 
-export default Question
+export default function Question({ question, searchTerm }) {
+  let qdata = question.data
+  if (typeof qdata === 'object' && qdata.type === 'simple') {
+    qdata = ''
+  }
+  if (qdata) {
+    try {
+      qdata = JSON.stringify(qdata)
+    } catch (e) {
+      //
+    }
+  }
+
+  const questionText = searchTerm
+    ? highlightText(question.Q, searchTerm)
+    : question.Q
+  const answerText = searchTerm
+    ? highlightText(question.A, searchTerm)
+    : question.A
+
+  return (
+    <div className="questionContainer">
+      <div
+        className="question"
+        dangerouslySetInnerHTML={{ __html: questionText }}
+      ></div>
+      <div
+        className="answer"
+        dangerouslySetInnerHTML={{ __html: answerText }}
+      ></div>
+      <div className="data">{qdata || null}</div>
+    </div>
+  )
+}

src/components/QuestionSearchResult.js

@@ -73,7 +73,7 @@ export default function QuestionSearchResult({ data, searchTerm }) {
       <div>
         <div>{renderCount()}</div>
         <div>
-          <Questions subjs={subjs} />
+          <Questions subjs={subjs} searchTerm={searchTerm} />
         </div>
       </div>
     )

src/components/Questions.js

@@ -6,7 +6,7 @@ import styles from './Questions.module.css'
 
 class Questions extends PureComponent {
   render() {
-    const { subjs } = this.props
+    const { subjs, searchTerm } = this.props
 
     return (
       <div>
@@ -16,7 +16,13 @@ class Questions extends PureComponent {
             <div className={styles.questionBg} key={i}>
               <div className={styles.subjName}>{subj.Name}</div>
               {subj.Questions.map((question, i) => {
-                return <Question key={i} question={question} />
+                return (
+                  <Question
+                    key={i}
+                    question={question}
+                    searchTerm={searchTerm}
+                  />
+                )
               })}
             </div>
           )

src/pages/allQuestions.js

@@ -89,6 +89,7 @@ export default function AllQuestions({ router }) {
     const querySearch = router.query.question
       ? decodeURIComponent(router.query.question)
       : ''
+
     console.log(querySearch)
 
     fetchDbs().then((res) => {