111 lines
4.1 KiB
JavaScript
111 lines
4.1 KiB
JavaScript
/**
|
|
* This file is a modified version of:
|
|
* https://github.com/marmelab/highlight-search-term/blob/main/src/index.js
|
|
* - We return the `nonMatchingElements`
|
|
* - We fixed a bug: `getRangesForSearchTermInElement` got the `node.parentElement`, which is not working if there are multiple text nodes in one element.
|
|
*
|
|
* highlight-search-term is published under MIT License.
|
|
*
|
|
* MIT License
|
|
*
|
|
* Copyright (c) 2024 marmelab
|
|
*
|
|
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
* of this software and associated documentation files (the "Software"), to deal
|
|
* in the Software without restriction, including without limitation the rights
|
|
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
* copies of the Software, and to permit persons to whom the Software is
|
|
* furnished to do so, subject to the following conditions:
|
|
*
|
|
* The above copyright notice and this permission notice shall be included in all
|
|
* copies or substantial portions of the Software.
|
|
*
|
|
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
* SOFTWARE.
|
|
*/
|
|
|
|
/**
|
|
* Highlight search term in the selected elements
|
|
*
|
|
* @example
|
|
* import { highlightSearchTerm } from "highlight-search-term";
|
|
* const search = document.getElementById("search");
|
|
* search.addEventListener("input", () => {
|
|
* highlightSearchTerm({ search: search.value, selector: ".content" });
|
|
* });
|
|
*/
|
|
const highlightSearchTerm = ({ search, selector, customHighlightName = "search" }) => {
|
|
if (!selector) {
|
|
throw new Error("The selector argument is required");
|
|
}
|
|
|
|
if (!CSS.highlights) return; // disable feature on Firefox as it does not support CSS Custom Highlight API
|
|
|
|
// remove previous highlight
|
|
CSS.highlights.delete(customHighlightName);
|
|
if (!search) {
|
|
// nothing to highlight
|
|
return;
|
|
}
|
|
// find all text nodes containing the search term
|
|
const ranges = [];
|
|
const nonMatchingElements = [];
|
|
const elements = document.querySelectorAll(selector);
|
|
Array.from(elements).map((element) => {
|
|
let match = false;
|
|
getTextNodesInElementContainingText(element, search).forEach((node) => {
|
|
// Modified variant of highlight-search-term
|
|
// We return the non-matching elements in addition.
|
|
const rangesForSearch = getRangesForSearchTermInNode(node, search);
|
|
ranges.push(...rangesForSearch);
|
|
if (rangesForSearch.length > 0) {
|
|
match = true;
|
|
}
|
|
});
|
|
if (!match) {
|
|
nonMatchingElements.push(element);
|
|
}
|
|
});
|
|
if (ranges.length === 0) return nonMatchingElements; // modified: return `nonMatchingElements`
|
|
// create a CSS highlight that can be styled with the ::highlight(search) pseudo-element
|
|
const highlight = new Highlight(...ranges);
|
|
CSS.highlights.set(customHighlightName, highlight);
|
|
return nonMatchingElements; // modified: return `nonMatchingElements`
|
|
};
|
|
|
|
const getTextNodesInElementContainingText = (element, text) => {
|
|
const nodes = [];
|
|
const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
|
|
let node;
|
|
while ((node = walker.nextNode())) {
|
|
if (node.textContent && node.textContent.toLowerCase().includes(text)) {
|
|
nodes.push(node);
|
|
}
|
|
}
|
|
return nodes;
|
|
};
|
|
|
|
// Fix: We changed this function to work on the node directly, rather than on its parent element.
|
|
const getRangesForSearchTermInNode = (node, search) => {
|
|
const ranges = [];
|
|
const text = (node.textContent ? node.textContent.toLowerCase() : "") || "";
|
|
|
|
let start = 0;
|
|
let index;
|
|
while ((index = text.indexOf(search, start)) >= 0) {
|
|
const range = new Range();
|
|
range.setStart(node, index);
|
|
range.setEnd(node, index + search.length);
|
|
ranges.push(range);
|
|
start = index + search.length;
|
|
}
|
|
return ranges;
|
|
};
|
|
|
|
export { highlightSearchTerm };
|