CSS カスタムハイライト API

const parentNode = document.getElementById("foo");
const range1 = new Range();
range1.setStart(parentNode, 10);
range1.setEnd(parentNode, 20);
const range2 = new Range();
range2.setStart(parentNode, 40);
range2.setEnd(parentNode, 60);

const highlight = new Highlight(range1, range2);

const user1Highlight = new Highlight(user1Range1, user1Range2);
const user2Highlight = new Highlight(user2Range1, user2Range2, user2Range3);

CSS.highlights.set("user-1-highlight", user1Highlight);
CSS.highlights.set("user-2-highlight", user2Highlight);

// レジストリーから単一のハイライトを除去
CSS.highlights.delete("user-1-highlight");
// レジストリーをクリア
CSS.highlights.clear();

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

<label>Search within text <input id="query" type="text" /></label>
<article>
 <p>
 Maxime debitis hic, delectus perspiciatis laborum molestiae labore,
 deleniti, quam consequatur iure veniam alias voluptas nisi quo. Dolorem
 eaque alias, quo vel quas repudiandae architecto deserunt quidem, sapiente
 laudantium nulla.
 </p>
 <p>
 Maiores odit molestias, necessitatibus doloremque dolor illum reprehenderit
 provident nostrum laboriosam iste, tempore perferendis! Ab porro neque esse
 voluptas libero necessitatibus fugiat, ex, minus atque deserunt veniam
 molestiae tempora? Vitae.
 </p>
 <p>
 Dolorum facilis voluptate eaque eius similique ducimus dignissimos assumenda
 quos architecto. Doloremque deleniti non exercitationem rerum quam alias
 harum, nisi obcaecati corporis temporibus vero sapiente voluptatum est
 quibusdam id ipsa.
 </p>
</article>

const query = document.getElementById("query");
const article = document.querySelector("article");
// 記事内のすべてのテキストノードを探す。これらのテキストノード内で
// 検索を実行
const treeWalker = document.createTreeWalker(article, NodeFilter.SHOW_TEXT);
const allTextNodes = [];
let currentNode = treeWalker.nextNode();
while (currentNode) {
 allTextNodes.push(currentNode);
 currentNode = treeWalker.nextNode();
}
// 入力イベントを待ち受けして、検索を実行
query.addEventListener("input", () => {
 // CSS カスタムハイライト API に対応していない場合は、メッセージを
 // 表示して処理を中止
 if (!CSS.highlights) {
 article.textContent = "CSS カスタムハイライト API に対応していません。";
 return;
 }
 // HighlightRegistry をクリアして、以前の検索結果をすべて除去
 CSS.highlights.clear();
 // 検索クエリーをクリーンアップし、空の場合は終了
 const str = query.value.trim().toLowerCase();
 if (!str) {
 return;
 }
 // すべてのテキストノードを反復処理し、一致するものを探す
 const ranges = allTextNodes
 .map((el) => {
 return { el, text: el.textContent.toLowerCase() };
 })
 .map(({ text, el }) => {
 const indices = [];
 let startPos = 0;
 while (startPos < text.length) {
 const index = text.indexOf(str, startPos);
 if (index === -1) break;
 indices.push(index);
 startPos = index + str.length;
 }
 // テキストノード内で見つかった str の各インスタンスに
 // 対して、範囲オブジェクトを作成します。
 return indices.map((index) => {
 const range = new Range();
 range.setStart(el, index);
 range.setEnd(el, index + str.length);
 return range;
 });
 });
 // 範囲の Highlight オブジェクトを作成
 const searchResultsHighlight = new Highlight(...ranges.flat());
 // Highlight オブジェクトをレジストリーに登録
 CSS.highlights.set("search-results", searchResultsHighlight);
});

::highlight(search-results) {
 background-color: #f06;
 color: white;
}

Help improve MDN

This page was last modified on ⁨2025年4月24日⁩ by MDN contributors.