web-highlighter-plus

F1 序列化

Range → Source

将浏览器选中的 Range 对象转换为可 JSON 序列化的 Source 数据结构。

方法	说明
`fromRange(range)`	需要手动传入 Range 对象，不会自动清除选区
`fromSelection()`	自动从 `window.getSelection()` 获取并清除选区

这是第一段文字，包含加粗文本和斜体文本。你可以尝试选择跨标签的文本。

第二段文字，用于测试跨标签选区。选择下面这段话中的一部分。

选择上方文本后，点击按钮序列化...

Source → DOM

将 Source 对象渲染为多个 span 包装元素。支持跨多个 HTML 标签的选区。

第三段文字，包含加粗和斜体标签的混合内容。选择这段文字测试跨标签渲染。

选择上方文本后，点击按钮...

提示： 渲染后会生成多个 span 元素（每个跨标签位置一个），但都使用相同的 data-highlight-id。

CSS Class

为指定 ID 的高亮添加或移除 CSS 类。自动应用到所有匹配的包装元素。

第四段：链接标签也会被正确处理，不会破坏原有的 HTML 结构。

第五段包含一个 code 标签 用于测试代码块的排除。

先序列化渲染，再添加类...

Restore

使用 fromStore() 创建 Source，restore() 批量渲染。

第六段文字，用于测试批量回显功能。选择部分文本后可以存储起来。

第七段：加粗文本和斜体文本混合。

序列化文本后点击"序列化+存储"，然后可以恢复...

Remove

清除单个高亮或所有高亮。

第八段：这是用于测试清除功能的段落。选择文本并渲染后，可以单独移除或全部清除。

第九段：加粗和斜体标签内容。

先渲染高亮，再测试清除...

Utilities

获取高亮信息、DOM 元素等辅助方法。

工具方法测试区域。先在下方渲染一个高亮，然后使用工具方法查询信息。

第十段：加粗和斜体测试文本。

工具方法输出...