added search term highlight

src/app/App.scss

@@ -27,3 +27,7 @@
     height: 3rem;
   }
 }
+
+.highlight {
+  background-color: rgb(255, 255, 195);
+}

src/services/useFetchJobsList.js

@@ -3,6 +3,7 @@ import { parseDateFromTimeHtml } from "helpers/date-helpers";
 import { stripHtml } from "helpers/helpers";
 import { useFetch } from "helpers/useFetch";
 import { locations, positionTypes } from "data/jobs-data.json";
+import { cloneDeep } from "lodash-es";
 
 /* Custom hook for jobs fetching and filtering. If jobLocation is not provided, assume all job locations */
 export function useFetchJobsList(filters, jobLocation) {
@@ -76,6 +77,9 @@ export function useFetchJobsList(filters, jobLocation) {
           newFilteredJobs = newFilteredJobs.filter((job) =>
             jobContainsSearchTerm(job, searchTerm.toLowerCase())
           );
+
+          newFilteredJobs = cloneDeep(newFilteredJobs);
+          newFilteredJobs = highlightTerm(newFilteredJobs, searchTerm);
         }
 
         if (selectedLocations.length) {
@@ -179,3 +183,23 @@ function jobContainsSearchTerm(job, searchTerm) {
     job.$lowercase_field_jobs_duty_station.includes(searchTerm)
   );
 }
+function highlightTerm(jobs, searchTerm) {
+  debugger;
+  const termRegEx = new RegExp(searchTerm, "ig");
+
+  jobs.forEach((job) => {
+    job.title = job.title.replaceAll(
+      termRegEx,
+      (instance) => `<span class='highlight'>${instance}</span>`
+    );
+    job.field_jobs_description = job.field_jobs_description.replaceAll(
+      termRegEx,
+      (instance) => `<span class='highlight'>${instance}</span>`
+    );
+    job.field_jobs_duty_station = job.field_jobs_duty_station.replaceAll(
+      termRegEx,
+      (instance) => `<span class='highlight'>${instance}</span>`
+    );
+  });
+  return jobs;
+}