Creating alternate highlightSearch function

Signed-off-by: Ivan Boothe <git@rootwork.org>

2 files changed, 29 insertions, 7 deletions

diff --git a/assets/js/functions.js b/assets/js/functions.js
index 1ae7504..7271fae 100644
--- a/assets/js/functions.js
+++ b/assets/js/functions.js
@@ -183,17 +183,16 @@ function parseBoolean(string) {
   }
 };
 
-function wrapText(text, context, wrapper = 'mark', cssClass = '') {
+function forEach(node, callback) {
+  Array.prototype.forEach.call(node.childNodes, callback);
+}
+
+function wrapText(text, context, wrapper = 'mark') {
   let open = `<${wrapper}>`;
   let close = `</${wrapper}>`;
   let escapedOpen = `%3C${wrapper}%3E`;
   let escapedClose = `%3C/${wrapper}%3E`;
 
-  if(cssClass) {
-    open = `<${wrapper} class="${cssClass}">`;
-    escapedOpen = `%3C${wrapper} class%3D%22${cssClass}%22%3E`;
-  }
-
   function wrap(context) {
     let c = context.innerHTML;
     let pattern = new RegExp(text, "gi");
diff --git a/assets/js/search.js b/assets/js/search.js
index 17c9c8c..d3f7e2f 100644
--- a/assets/js/search.js
+++ b/assets/js/search.js
@@ -195,7 +195,7 @@ function initializeSearch(index) {
   searchPageElement ? false : liveSearch();
   passiveSearch();
 
-  wrapText(findQuery(), main, 'mark', 'search-term');
+  highlightSearch(findQuery(), main, 'mark', 'search-term');
 
   onEscape(clearSearchResults);
 
@@ -208,6 +208,29 @@ function initializeSearch(index) {
   });
 }
 
+function highlightSearch(search, container, wrapper = 'mark', cssClass = '') {
+  let reg = new RegExp("(" + search + ")", "gi");
+
+  function highlightSearchInNode(parentNode, search) {
+    forEach(parentNode, function (node) {
+      if (node.nodeType === 1) {
+        highlightSearchInNode(node, search);
+      } else if (
+        node.nodeType === 3 &&
+        reg.test(node.nodeValue)
+      ) {
+        let string = node.nodeValue.replace(reg, `<${wrapper} class="${cssClass}">$1</${wrapper}>`);
+        let span = document.createElement("span");
+        span.dataset.searched = "true";
+        span.innerHTML = string;
+        parentNode.replaceChild(span, node);
+      }
+    });
+  };
+
+  highlightSearchInNode(container, search);
+}
+
 window.addEventListener('load', function() {
   const pageLanguage = document.documentElement.lang;
   const searchIndex = `${ pageLanguage === 'en' ? '': pageLanguage}/index.json`;