Skip to content

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

License

Notifications You must be signed in to change notification settings

marmelab/highlight-search-term

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Highlight Search Term

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

Highlight Search Term

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •