Merge pull request #329 from chipzoller/mark-mark-mark

2 files changed, 29 insertions, 1 deletions

diff --git a/assets/js/functions.js b/assets/js/functions.js
index e40076f..44908d4 100644
--- a/assets/js/functions.js
+++ b/assets/js/functions.js
@@ -182,6 +182,10 @@ function parseBoolean(string) {
   }
 };
 
+function forEach(node, callback) {
+  Array.prototype.forEach.call(node.childNodes, callback);
+}
+
 function wrapText(text, context, wrapper = 'mark') {
   let open = `<${wrapper}>`;
   let close = `</${wrapper}>`;
diff --git a/assets/js/search.js b/assets/js/search.js
index 577e270..7f0b186 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);
+  highlightSearchTerms(findQuery(), '.post_body', 'mark', 'search-term');
 
   onEscape(clearSearchResults);
 
@@ -208,6 +208,30 @@ function initializeSearch(index) {
   });
 }
 
+function highlightSearchTerms(search, context, wrapper = 'mark', cssClass = '') {
+  let container = elem(context);
+  let reg = new RegExp("(" + search + ")", "gi");
+
+  function searchInNode(parentNode, search) {
+    forEach(parentNode, function (node) {
+      if (node.nodeType === 1) {
+        searchInNode(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);
+      }
+    });
+  };
+
+  searchInNode(container, search);
+}
+
 window.addEventListener('load', function() {
   const pageLanguage = document.documentElement.lang;
   const searchIndex = `${ pageLanguage === 'en' ? '': pageLanguage}/index.json`;