Highlight 文本高亮

文本命中高亮组件：text（原文）+ highlight（关键词，空格多词或 JSON 数组）计算命中片段，命中部分渲染为 <mark>（配色走主题 token，dark 自动适配）。支持大小写敏感、整词匹配、重音敏感三个开关（缺省均不敏感，重音折叠走 String.normalize('NFD') 去组合附加符）。内容重算后派发 oas-count（detail { count, matches }）。

基础用法

单关键词高亮

示例代码

多关键词

空格分隔多个关键词；或传 JSON 数组（如 '["fox","dog"]'）。命中区间重叠时自动合并，不产生嵌套 <mark>。

空格分隔多词

示例代码

JSON 数组

示例代码

大小写 / 整词 / 重音

三个开关缺省均关闭（不敏感）；布尔属性在场即生效。

case-sensitive：大小写敏感

示例代码

whole-word：整词匹配

示例代码

accent-sensitive：重音敏感（缺省折叠 é ↔ e）

示例代码

whole-word 的词边界按 Unicode 字母/数字/下划线（含汉字）判定：相邻字符是词字符则不算整词，因此中文关键词被汉字包围时不命中（中文没有空格词边界，属保守正确行为）。

命中计数（oas-count）

属性变化触发内容重算后派发 oas-count，detail { count, matches }：count 为渲染的 <mark> 片段数（含 0），matches 为实际命中的关键词去重列表。下方 demo 点击按钮切换关键词组，反馈文本实时更新（组件挂载首帧的首次派发早于手动 addEventListener 注册，与 DOM 原生事件同步派发语义一致；框架事件绑定不受影响）。

oas-count 事件反馈

关键词：组件 复用关键词：框架 平台关键词：不存在

示例代码

空态与安全

• 无 text、无 highlight 或零命中时：原文原样渲染（或渲染空），零 <mark>；oas-count 仍派发 count: 0，宿主可据此展示「无结果」。
• highlight 以 [ 开头时按 JSON 数组解析，解析失败或非数组回退按空白分隔拆词；空串与非字符串项被过滤。
• 原文与关键词一律按纯文本渲染（DOM textContent 通道），HTML 片段不会被解析执行。

字号与行内排布

宿主为行内盒（display: inline），可自然嵌入段落文本流；字号、行高继承外层排版上下文。

API

oas-highlight

属性

属性	说明	类型	默认值
accent-sensitive	重音敏感（缺省 NFD 折叠重音）	boolean	—
case-sensitive	大小写敏感（缺省不敏感）	boolean	—
highlight	关键词：空格多词或 JSON 数组；解析失败回退空白分隔	—	—
text	原文文本	—	—
whole-word	整词匹配（缺省否；Unicode 字母/数字词边界）	boolean	—

事件

事件	说明
oas-count	内容重算后派发，detail: { count, matches }

CSS 变量

CSS 变量	默认值
--oas-highlight-bg	color-mix(in srgb, var(--oas-preset-gold) 22%, transparent)
--oas-highlight-color	var(--oas-color-text-primary)

Parts

Part	说明
highlight	命中片段（mark）
root	内容容器