如何在 HTML 中利用 标签对网页搜索结果中的关键字进行高亮显示

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《如何在 HTML 中利用 标签对网页搜索结果中的关键字进行高亮显示》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

是HTML5语义化高亮元素，专用于搜索关键词等需突出的上下文内容；使用时须转义HTML与正则字符、注意单词边界、显式声明样式、避免嵌套及滥用，以保障安全、可访问性与兼容性。

标签是 HTML5 原生语义化元素，专为标记“当前上下文中相关、需突出的内容”而设计，搜索关键词高亮正是它最标准、最不可替代的使用场景。

直接包裹关键词就能生效：

找到了关于 Vue 的详细教程。

但真实项目中不能只写 就完事——得兼顾安全、语义、样式和兼容性。

确保内容安全，防 XSS 和 DOM 解析错误

用户输入的搜索词（比如来自 URL 参数 ?q=）必须转义后再塞进 。
不要这样写：

element.innerHTML = text.replace(keyword, '<mark>' + keyword + '</mark>'); // 危险！

正确做法是：

• 对 keyword 中的 HTML 特殊字符做实体转义（& → &，< → < 等）
• 正则匹配前，还要转义正则元字符（如 .、*、( 会破坏匹配逻辑）
• 最好用 DOM 方法组装，而非字符串拼接

简易安全函数示意：

function escapeHtml(str) {
  return str.replace(/[&<>"'`=\/]/g, c => `&#${c.charCodeAt(0)};`);
}
function escapeRegex(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
function highlight(text, keyword) {
  const safeKeyword = escapeRegex(escapeHtml(keyword));
  const regex = new RegExp(`(${safeKeyword})`, 'gi');
  return text.replace(regex, '<mark>$1</mark>');
}

避免误匹配，注意单词边界（尤其英文）

搜 cat 时，不希望 education 被拆成 educacation。
解决方法：

• 英文场景加 \b 边界限定：new RegExp(\b(${safeKeyword})\b, 'gi')
• 中文无天然空格分隔，一般不加 \b，但需注意全角/半角一致性（如用户搜“JavaScript”，页面里是“javascript”就匹配不到）
• 多关键词时，按长度从长到短排序匹配，防止短词截断长词（如先匹配 “JavaScript”，再匹配 “Script”）

样式必须显式声明，不能依赖浏览器默认

很多环境会忽略 UA 默认样式：阅读模式、邮件客户端、深色主题、Windows 高对比度模式等。
至少写清这三项：

mark {
  background-color: #ffeb3b; /* 明确指定，别省 */
  color: #212121;
  padding: 0.1em 0.25em;
}

深色模式下建议补充：

@media (prefers-color-scheme: dark) {
  mark {
    background-color: #ffca28;
    color: #121212;
  }
}

避免只写 background: none —— 它可能漏掉 background-image 等隐式值。

语义要准确，别滥用或嵌套

• ✅ 正确：

  请查看 package.json 中的配置项。

  （上下文相关、临时标注）
• ❌ 错误：提交（不能包裹交互元素）
• ❌ 错误：ReactNative（嵌套无效，浏览器自动修正，语义丢失）
• ❌ 错误：整段警告文字全包 （该用 或 CSS 类）

辅助技术（如读屏器）会把 明确读作“高亮文本”，这是 永远做不到的。搜索引擎也可能提取 内容生成摘要片段。

不复杂但容易忽略。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~