最直接的方式是用 String.prototype.replace() 配合转义后不区分大小写的全局正则，将关键词包裹为带样式的 span；需防 XSS，优先处理长关键词，并缓存正则、限制匹配次数以优化性能。
最直接的方式是用 String.prototype.replace() 配合正则表达式，把目标文本替换成带高亮标签的 HTML 片段。
基础实现：关键词包裹 + 内联样式
核心逻辑是将匹配到的关键词用 <span> 包裹，并添加背景色或 class。注意需转义特殊正则字符，避免报错。
- 构造不区分大小写的全局正则：
new RegExp(keyword.replace(/[.*+?^${}()|[]\]/g, '\$&'), 'gi') - 用
replace()的函数参数方式返回高亮 HTML：str.replace(reg, match => `<span style="background-color: #ffeb3b;">${match}</span>`) - 替换后必须用
innerHTML渲染（不能用textContent），否则标签会被当作文本显示
安全增强：防 XSS 与 HTML 结构保留
若原始文本含 HTML 标签（如 <p>搜索<b>关键词</b></p>），直接正则替换会破坏结构。此时应：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 先用
DOMParser解析为文档节点，再遍历文本节点处理 - 对每个文本节点执行高亮，用
document.createTextNode()和element.insertBefore()插入新节点 - 或使用
DOMPurify.sanitize()过滤结果，防止注入恶意脚本
多关键词支持：按长度排序避免误包
当同时高亮 #tag 和 #tagAgain 时，若先处理短词，#tag 可能错误地包在 #tagAgain 中间。解决方法是：
- 将关键词数组按字符串长度降序排列：
keywords.sort((a, b) => b.length - a.length) - 逐个执行
replace()，确保长关键词优先匹配 - 若需统一管理样式，可提前定义 CSS 类（如
.highlight-1），再通过class属性动态赋值
性能优化：避免重复渲染与过度匹配
高频调用（如输入实时搜索）下，需控制开销：
- 对同一字符串多次高亮时，缓存正则实例，避免重复
new RegExp - 限制匹配次数，例如加
{0, 100}量词，防超长文本卡顿 - 用
requestIdleCallback延迟非关键高亮操作，保证主线程响应流畅
