HighlightRegistry

HighlightRegistry インターフェイスには継承したプロパティはありません。

HighlightRegistry.size 読取専用

現在登録されている Highlight オブジェクトの数を返します。

HighlightRegistry インターフェイスには継承したメソッドはありません。

HighlightRegistry.clear()

レジストリーからすべての Highlight オブジェクトを除去します。

HighlightRegistry.delete()

レジストリーから名前付き Highlight オブジェクトを除去します。

HighlightRegistry.entries()

レジストリー内のすべての Highlight オブジェクトを挿入順に反復処理する新しいイテレーターオブジェクトを返します。

HighlightRegistry.forEach()

レジストリー内のすべての Highlight オブジェクトに対して、指定されたコールバックを挿入順に 1 回ずつ呼び出します。

HighlightRegistry.get()

レジストリーから名前付き Highlight オブジェクトを取得します。

HighlightRegistry.has()

Highlight オブジェクトがレジストリーに存在するか否かを論理値で返します。

HighlightRegistry.keys()

HighlightRegistry.values() の別名です。

HighlightRegistry.set()

指定された Highlight オブジェクトを、指定された名前でレジストリーに追加します。レジストリーにすでに同じ名前のオブジェクトが存在する場合、そのオブジェクトを更新します。

HighlightRegistry.values()

レジストリー内の Highlight オブジェクトを挿入順に返す、新しいイテレーターオブジェクトを返します。

次の例は、範囲を作成し、その範囲に対して新しい Highlight オブジェクトを実体化し、 HighlightRegistry を使用してハイライトを登録し、ページ上でスタイルを設定する方法を示しています。

HTML

<p id="foo">CSS Custom Highlight API</p>

CSS

::highlight(my-custom-highlight) {
  background-color: peachpuff;
}

JavaScript

const text = document.getElementById("foo").firstChild;

if (!CSS.highlights) {
  text.textContent =
    "The CSS Custom Highlight API is not supported in this browser!";
}

// 2 つの範囲を作成する。
const range1 = new Range();
range1.setStart(text, 0);
range1.setEnd(text, 3);

const range2 = new Range();
range2.setStart(text, 21);
range2.setEnd(text, 24);

// これらの範囲に独自のハイライトを作成する。
const highlight = new Highlight(range1, range2);

// 範囲を HighlightRegistry に登録する。
CSS.highlights.set("my-custom-highlight", highlight);

結果

• CSS カスタムハイライト API
• CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web