HighlightRegistry

HighlightRegistry 接口不继承任何属性。

HighlightRegistry.size 只读

返回当前已注册的 Highlight 对象的数量。

HighlightRegistry 接口不继承任何方法。

HighlightRegistry.clear()

从注册表中移除所有 Highlight 对象。

HighlightRegistry.delete()

从注册表中删除具有指定名称的 Highlight 对象。

HighlightRegistry.entries()

返回一个新的迭代器对象，该对象包含了注册表中的所有 Highlight 对象，按插入顺序排列。

HighlightRegistry.forEach()

按插入顺序为注册表中的每个 Highlight 对象执行一次提供的函数。

HighlightRegistry.get()

从注册表中获取指定的 Highlight 对象。

HighlightRegistry.has()

返回一个指示对应的 Highlight 对象是否存在于该注册表中的布尔值。

HighlightRegistry.keys()

HighlightRegistry.values() 方法的别名。

HighlightRegistry.set()

添加给定名称的 Highlight 对象到注册表，如果该名称的对象已存在则覆盖原值。

HighlightRegistry.values()

返回一个新的迭代器对象，该对象包含此注册表中每个 Highlight 对象，按插入顺序排列。

以下示例演示了如何创建多个文本范围，然后为它们创建 Highlight 对象，并在 HighlightRegistry 中注册该高亮显示：

HTML

<p id="foo">CSS 自定义高亮 API</p>

CSS

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

JavaScript

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

if (!CSS.highlights) {
  text.textContent = "此浏览器不支持 CSS 自定义高亮 API！";
}

// 创建多个文本范围。
const range1 = new Range();
range1.setStart(text, 0);
range1.setEnd(text, 3);

const range2 = new Range();
range2.setStart(text, 10);
range2.setEnd(text, 13);

// 为文本范围创建自定义高亮。
const highlight = new Highlight(range1, range2);

// 在 HighlightRegistry 中注册文本范围。
CSS.highlights.set("my-custom-highlight", highlight);

结果

• CSS 自定义高亮 API
• CSS 自定义高亮 API：网页文本范围高亮的未来