在前端开发中，搜索关键词高亮是提升用户体验的常用功能，比如用户在页面内搜索内容时，匹配到的关键词需要以特殊颜色或背景显示。下面我们就一步步讲解如何用JavaScript实现这个功能。
实现核心思路
高亮搜索关键词的核心逻辑可以分为三步：
- 对搜索关键词进行转义，避免正则特殊字符导致匹配错误
- 用转义后的关键词生成正则表达式，匹配目标文本中的对应内容
- 将匹配到的关键词用带有高亮样式的标签包裹，替换原有文本
基础实现步骤
1. 转义关键词特殊字符
正则中有很多特殊字符，比如.*+?^${}()|[]\，如果关键词包含这些字符，直接用来生成正则会报错或者匹配不符合预期，所以需要先转义这些字符。
// 转义正则特殊字符
function escapeRegExp(str) {
return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}2. 生成正则并替换文本
转义后的关键词可以用来生成全局匹配的正则，然后用<span class="highlight">标签包裹匹配到的内容，同时给高亮样式添加对应的CSS。
// 高亮文本中的关键词
function highlightKeyword(text, keyword) {
if (!keyword) return text;
// 转义关键词
const escapedKeyword = escapeRegExp(keyword);
// 生成全局不区分大小写的正则
const reg = new RegExp(escapedKeyword, 'gi');
// 替换匹配到的内容，用span包裹
return text.replace(reg, '<span class="highlight">$&</span>');
}3. 添加高亮样式
需要给包裹关键词的span标签添加样式，让高亮效果生效。
.highlight {
background-color: #ffeb3b;
color: #333;
padding: 0 2px;
border-radius: 2px;
}处理DOM元素中的高亮
如果要对页面中某个DOM元素的内容做高亮，不能直接替换元素的innerHTML，否则会破坏原有的事件绑定和嵌套结构，正确的做法是遍历元素的文本节点，只替换文本节点的内容。
// 对DOM元素内容高亮关键词
function highlightElement(el, keyword) {
if (!keyword) return;
const escapedKeyword = escapeRegExp(keyword);
const reg = new RegExp(escapedKeyword, 'gi');
// 遍历所有子节点
const childNodes = el.childNodes;
for (let i = 0; i < childNodes.length; i++) {
const node = childNodes[i];
// 只处理文本节点
if (node.nodeType === Node.TEXT_NODE) {
const text = node.textContent;
if (reg.test(text)) {
// 重置正则的lastIndex，避免全局匹配失效
reg.lastIndex = 0;
const newHtml = text.replace(reg, '<span class="highlight">$&</span>');
// 创建临时元素存放替换后的内容
const tempEl = document.createElement('span');
tempEl.innerHTML = newHtml;
// 替换原文本节点
el.replaceChild(tempEl, node);
}
} else if (node.nodeType === Node.ELEMENT_NODE) {
// 递归处理子元素
highlightElement(node, keyword);
}
}
}完整使用示例
下面是一个简单的页面示例，输入关键词后点击按钮，就可以高亮页面中指定区域的内容。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关键词高亮示例</title>
<style>
.highlight {
background-color: #ffeb3b;
color: #333;
padding: 0 2px;
border-radius: 2px;
}
.content {
margin: 20px 0;
line-height: 1.6;
}
</style>
</head>
<body>
<input type="text" id="keywordInput" placeholder="输入搜索关键词">
<button onclick="doHighlight()">高亮关键词</button>
<div class="content" id="targetContent">
JavaScript是一种轻量级的解释型编程语言，主要用于网页交互开发，也可以用于服务端开发、桌面应用开发等场景。学习JavaScript需要掌握变量、函数、DOM操作等基础内容。
</div>
<script>
function escapeRegExp(str) {
return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
function highlightElement(el, keyword) {
if (!keyword) return;
const escapedKeyword = escapeRegExp(keyword);
const reg = new RegExp(escapedKeyword, 'gi');
const childNodes = el.childNodes;
for (let i = 0; i < childNodes.length; i++) {
const node = childNodes[i];
if (node.nodeType === Node.TEXT_NODE) {
const text = node.textContent;
if (reg.test(text)) {
reg.lastIndex = 0;
const newHtml = text.replace(reg, '<span class="highlight">$&</span>');
const tempEl = document.createElement('span');
tempEl.innerHTML = newHtml;
el.replaceChild(tempEl, node);
}
} else if (node.nodeType === Node.ELEMENT_NODE) {
highlightElement(node, keyword);
}
}
}
function doHighlight() {
const keyword = document.getElementById('keywordInput').value.trim();
const target = document.getElementById('targetContent');
// 先清除之前的高亮，恢复原始内容
target.innerHTML = target.textContent;
if (keyword) {
highlightElement(target, keyword);
}
}
</script>
</body>
</html>注意事项
- 每次高亮前最好先清除之前的高亮效果，避免重复包裹标签导致样式异常
- 如果关键词可能包含HTML特殊字符，除了正则转义，还要注意替换时的字符转义，避免XSS风险
- 如果内容量很大，频繁操作DOM可能会影响性能，可以结合虚拟列表或者节流处理优化
JavaScript高亮搜索关键词正则匹配字符串替换DOM操作修改时间：2026-05-29 03:34:19