diff options
author | Ivan Boothe <git@rootwork.org> | 2022-06-16 03:29:14 +0300 |
---|---|---|
committer | Ivan Boothe <git@rootwork.org> | 2022-06-16 03:29:14 +0300 |
commit | ada00f3a5f861dd09449d014f0b0d24a814c1c28 (patch) | |
tree | 6ead2da54e0cfc959cb164569b760e6b314be0de | |
parent | cccbefc3b525384586f9f462a552b622f8ee95da (diff) |
Creating alternate highlightSearch function
Signed-off-by: Ivan Boothe <git@rootwork.org>
-rw-r--r-- | assets/js/functions.js | 11 | ||||
-rw-r--r-- | assets/js/search.js | 25 |
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`; |