Highlight Search Term

Highlight search term in a page. Vanilla JS, compatible with frontend frameworks (React, Vite, Angular, etc).

This library does not modify the DOM. It relies on the browser's CSS Custom Highlight API (not supported by Firefox yet). See the motivation and implementation challenges in the blog post "Highlight Search Terms In Page Content".

Note: This is not a syntax highlighter library. It highlights text in a page based on a search term.

Installation

npm install highlight-search-term

Usage

The library exports a single function that expects a search term and a CSS selector of the element to search in.

highlightSearchTerm({ search: search.value, selector: ".content" });

This creates a highlight range named "search" that you can highlight with CSS, e.g.:

::highlight(search) {
    background-color: yellow;
    color: black;
}

You can use it directly in your HTML:

<script type="module">
import { highlightSearchTerm } from "https://cdn.jsdelivr.net/npm/[email protected]/src/index.js";
const search = document.getElementById("search");
search.addEventListener("input", () => {
    highlightSearchTerm({
        search: search.value,
        selector: ".content",
    });
});
</script>

Or, if you use a bundler like Vite, you can import it in your JavaScript:

import { highlightSearchTerm } from "highlight-search-term";
const search = document.getElementById("search");
search.addEventListener("input", () => {
    highlightSearchTerm({
        search: search.value,
        selector: ".content",
    });
});

If you use a frontend framework like React, you can use it in a useEffect hook:

import { useEffect, useState } from "react";
import { highlightSearchTerm } from "highlight-search-term";

export default function App() {
  const [search, setSearch] = useState("");
  useEffect(() => {
    highlightSearchTerm({ search, selector: ".content" });
  }, [search]);
  return (
    <div>
      <input
        type="text"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />
      <div className="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </div>
  );
}

License

MIT, courtesy of Marmelab