34 lines
829 B
TypeScript
34 lines
829 B
TypeScript
import { useEffect } from "react"
|
|
|
|
export const useHighlightSearch = (name: string, query: string) => {
|
|
function getHighlightedSearch(text: string) {
|
|
const parts = text.split(new RegExp(`(${query})`, "gi"))
|
|
|
|
const str: string[] = []
|
|
|
|
for (const part of parts) {
|
|
if (part.toLowerCase() === query.toLowerCase()) {
|
|
str.push(`<mark class="bg-orange-10">${part}</mark>`)
|
|
} else {
|
|
str.push(part)
|
|
}
|
|
}
|
|
|
|
return str.join("")
|
|
}
|
|
|
|
useEffect(() => {
|
|
const children = document.getElementsByName(name)
|
|
|
|
if (children) {
|
|
const childArray = Array.from(children)
|
|
for (const child of childArray) {
|
|
child.innerHTML = child.innerHTML.replace(
|
|
child.innerHTML,
|
|
getHighlightedSearch(child.innerText)
|
|
)
|
|
}
|
|
}
|
|
}, [query, name])
|
|
}
|