如何高效实现JavaScript文本高亮？从基础到专家的完整指南

2026-04-29 10:37:18作者：齐添朝

为什么前端文本高亮如此重要？

当用户在网页上搜索内容时，如何让关键词立即跳出来？当阅读长文档时，如何快速定位关键信息？这些问题的答案都指向同一个技术需求——文本高亮。前端文本高亮实现不仅能显著提升用户体验，更是现代网页应用不可或缺的功能模块。无论是搜索引擎结果页、在线文档阅读器还是数据可视化平台，网页关键词标记都扮演着引导用户注意力的关键角色。

文本高亮技术原理简析

文本高亮的核心原理是通过JavaScript动态识别页面中的目标文本，将其包裹在特定HTML标签（通常是<mark>或自定义<span>）中，并通过CSS样式突出显示。这一过程涉及DOM遍历、文本节点分析、正则匹配和高效渲染等技术环节。现代高亮库如mark.js通过优化的DOM操作和事件处理，实现了跨浏览器兼容、性能稳定的文本标记功能。

分级应用指南

基础应用：快速上手文本高亮

安装与初始化

通过npm安装mark.js库：

npm install mark.js --save-dev

基础高亮实现

// 导入mark.js库
import Mark from 'mark.js';

// 初始化高亮实例
// 参数为要搜索的上下文元素，这里是整个文档body
const marker = new Mark(document.body);

// 基本高亮示例：高亮所有"JavaScript"关键词
function highlightKeyword() {
  // 清除之前的高亮
  marker.unmark();
  
  // 高亮新关键词，配置基本选项
  marker.mark('JavaScript', {
    className: 'basic-highlight', // 自定义CSS类
    caseSensitive: false,         // 不区分大小写
    accuracy: 'partially'         // 部分匹配模式
  });
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', highlightKeyword);

配套CSS样式

.basic-highlight {
  background-color: #ffff00;
  padding: 0 2px;
  margin: 0 -2px;
  border-radius: 3px;
}

进阶应用：高级配置与事件处理

正则表达式高亮

// 使用正则表达式匹配数字
marker.markRegExp(/\b\d{3}-\d{2}-\d{4}\b/g, {
  className: 'regex-highlight',
  each: function(element) {
    // 为每个匹配元素添加自定义数据属性
    element.dataset.type = 'social-security-number';
    
    // 添加鼠标悬停效果
    element.addEventListener('mouseover', function() {
      this.style.backgroundColor = '#ffd700';
    });
    
    element.addEventListener('mouseout', function() {
      this.style.backgroundColor = '#ffff00';
    });
  }
});

自定义高亮元素与事件

// 自定义高亮元素和事件处理
marker.mark('重要信息', {
  element: 'span',          // 使用span而非默认的mark标签
  className: 'custom-highlight',
  // 高亮完成后的回调函数
  done: function(count) {
    console.log(`成功高亮了 ${count} 处匹配内容`);
    if (count === 0) {
      alert('未找到匹配内容');
    }
  },
  // 对每个高亮元素执行的操作
  each: function(element) {
    element.addEventListener('click', function() {
      // 创建工具提示
      const tooltip = document.createElement('div');
      tooltip.className = 'highlight-tooltip';
      tooltip.textContent = '这是重要信息';
      document.body.appendChild(tooltip);
      
      // 定位工具提示
      const rect = element.getBoundingClientRect();
      tooltip.style.left = `${rect.right + 10}px`;
      tooltip.style.top = `${rect.top}px`;
      
      // 点击其他地方关闭工具提示
      const closeTooltip = () => {
        document.body.removeChild(tooltip);
        document.removeEventListener('click', closeTooltip);
      };
      
      setTimeout(() => {
        document.addEventListener('click', closeTooltip);
      }, 0);
    });
  }
});

专家应用：性能优化与复杂场景处理

大文档分块高亮

// 大文档分块高亮实现
function highlightLargeDocument(keyword, contextSelector, chunkSize = 5000) {
  const context = document.querySelector(contextSelector);
  if (!context) return;
  
  // 创建新的mark实例
  const marker = new Mark(context);
  marker.unmark();
  
  // 获取所有文本节点
  const textNodes = [];
  const treeWalker = document.createTreeWalker(
    context,
    NodeFilter.SHOW_TEXT,
    { acceptNode: node => NodeFilter.FILTER_ACCEPT },
    false
  );
  
  let node;
  while ((node = treeWalker.nextNode())) {
    textNodes.push(node);
  }
  
  // 分块处理文本节点以避免UI阻塞
  let currentIndex = 0;
  
  function processNextChunk() {
    const endIndex = Math.min(currentIndex + chunkSize, textNodes.length);
    
    // 处理当前块
    for (let i = currentIndex; i < endIndex; i++) {
      // 这里可以添加自定义逻辑来决定是否处理特定节点
      if (textNodes[i].textContent.length > 0) {
        // 标记当前节点（简化示例，实际实现需要更复杂的逻辑）
      }
    }
    
    currentIndex = endIndex;
    
    // 如果还有节点要处理，继续处理下一块
    if (currentIndex < textNodes.length) {
      // 使用requestIdleCallback在浏览器空闲时处理
      requestIdleCallback(processNextChunk, { timeout: 1000 });
    } else {
      // 所有块处理完成
      console.log('分块高亮完成');
    }
  }
  
  // 开始处理第一块
  requestIdleCallback(processNextChunk, { timeout: 1000 });
  
  // 实际执行高亮（mark.js内部已优化，但大文档仍需分块）
  marker.mark(keyword, {
    // 禁用默认的同步执行
    // 这里使用mark.js内置的优化
    separateWordSearch: true,
    filter: function(node) {
      // 自定义过滤逻辑，排除过小的文本节点
      return node.textContent.length > 3;
    }
  });
}

工具函数封装

// 文本高亮工具类封装
class Highlighter {
  constructor(contextSelector, defaultOptions = {}) {
    this.context = document.querySelector(contextSelector);
    if (!this.context) {
      throw new Error('找不到指定的上下文元素');
    }
    
    this.marker = new Mark(this.context);
    this.defaultOptions = {
      className: 'highlight',
      caseSensitive: false,
      accuracy: 'partially',
      ...defaultOptions
    };
    
    // 存储当前高亮的关键词
    this.currentKeywords = [];
  }
  
  // 高亮关键词
  highlight(keywords, options = {}) {
    // 如果传入的是字符串，转为数组
    if (typeof keywords === 'string') {
      keywords = [keywords];
    }
    
    // 合并默认选项和自定义选项
    const mergedOptions = { ...this.defaultOptions, ...options };
    
    // 清除现有高亮
    this.unmark();
    
    // 存储当前关键词
    this.currentKeywords = keywords;
    
    // 执行高亮
    if (keywords.length > 0) {
      this.marker.mark(keywords, mergedOptions);
    }
    
    return this;
  }
  
  // 清除高亮
  unmark() {
    this.marker.unmark();
    this.currentKeywords = [];
    return this;
  }
  
  // 切换高亮状态
  toggleHighlight(keywords, options = {}) {
    if (this.currentKeywords.some(k => keywords.includes(k))) {
      this.unmark();
    } else {
      this.highlight(keywords, options);
    }
    return this;
  }
  
  // 获取当前高亮数量
  getHighlightCount() {
    return this.context.querySelectorAll(`.${this.defaultOptions.className}`).length;
  }
}

// 使用示例
const highlighter = new Highlighter('.content-area', {
  className: 'custom-highlight',
  accuracy: 'exactly'
});

// 高亮多个关键词
highlighter.highlight(['JavaScript', '前端', '文本高亮']);

实战案例解析

案例一：实时搜索高亮系统

实现一个带有实时搜索功能的高亮系统，用户输入时即时高亮匹配内容：

<div class="search-container">
  <input type="text" id="search-input" placeholder="输入搜索关键词...">
  <button id="clear-btn">清除高亮</button>
  <div id="result-count"></div>
</div>
<div class="content-area">
  <!-- 这里是需要搜索的内容 -->
</div>

<script>
  // 初始化高亮器
  const contentHighlighter = new Highlighter('.content-area', {
    className: 'search-highlight',
    separateWordSearch: true
  });
  
  const searchInput = document.getElementById('search-input');
  const clearBtn = document.getElementById('clear-btn');
  const resultCount = document.getElementById('result-count');
  
  // 防抖函数，避免输入时频繁触发高亮
  function debounce(func, delay = 300) {
    let timeoutId;
    return function(...args) {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
  }
  
  // 处理搜索输入
  const handleSearch = debounce(function(e) {
    const keyword = e.target.value.trim();
    
    if (keyword.length > 0) {
      contentHighlighter.highlight(keyword);
      const count = contentHighlighter.getHighlightCount();
      resultCount.textContent = `找到 ${count} 个匹配项`;
    } else {
      contentHighlighter.unmark();
      resultCount.textContent = '';
    }
  });
  
  // 绑定事件
  searchInput.addEventListener('input', handleSearch);
  clearBtn.addEventListener('click', () => {
    searchInput.value = '';
    contentHighlighter.unmark();
    resultCount.textContent = '';
  });
</script>

<style>
  .search-highlight {
    background-color: rgba(255, 255, 0, 0.5);
    border-bottom: 2px solid #ff9500;
  }
  
  .search-container {
    margin: 20px 0;
    display: flex;
    gap: 10px;
    align-items: center;
  }
  
  #search-input {
    flex-grow: 1;
    padding: 8px;
    font-size: 16px;
  }
  
  #result-count {
    color: #666;
    font-size: 14px;
  }
</style>

案例二：代码语法高亮增强

结合mark.js实现代码片段中的关键词高亮，增强代码阅读体验：

<pre><code id="code-snippet">
function highlightCode(keywords) {
  // 创建高亮实例
  const marker = new Mark(document.getElementById('code-snippet'));
  
  // 清除现有高亮
  marker.unmark();
  
  // 高亮关键词
  marker.mark(keywords, {
    className: 'code-highlight',
    caseSensitive: true,
    accuracy: 'exactly'
  });
}

// 高亮JavaScript关键词
highlightCode(['function', 'const', 'let', 'if', 'else', 'return']);
</code></pre>

<style>
  #code-snippet {
    background-color: #f5f5f5;
    padding: 15px;
    border-radius: 5px;
    font-family: monospace;
    white-space: pre-wrap;
  }
  
  .code-highlight {
    background-color: rgba(50, 150, 255, 0.2);
    padding: 0 2px;
    border-radius: 2px;
    font-weight: bold;
  }
</style>

性能优化策略

限制搜索范围：避免在整个document上执行高亮，明确指定包含内容的容器元素。
使用requestIdleCallback：对于大型文档，将高亮操作分解为小块，在浏览器空闲时执行。
实现防抖机制：在实时搜索场景中，使用防抖减少高亮函数的执行频率。
优化选择器：使用高效的CSS选择器，避免复杂的DOM查询。
事件委托：对动态生成的高亮元素使用事件委托，而非为每个元素绑定事件。
使用文档片段：在进行大量DOM操作时，使用DocumentFragment减少重排。
避免过度高亮：对于极长文本，可设置最大高亮数量限制。
缓存DOM引用：避免重复查询相同的DOM元素。

常见问题速解

Q: 为什么高亮在某些元素中不生效？

A: 检查这些元素是否被排除在搜索之外，mark.js默认会排除<script>和<style>标签。可以通过exclude选项自定义排除规则，或使用include选项明确指定要搜索的元素类型。

Q: 如何在iframe中使用mark.js高亮内容？

A: mark.js支持iframe内容高亮，但需要确保iframe与主页面同源，或配置了适当的CORS策略。使用iframes选项启用跨iframe搜索：

marker.mark('关键词', {
  iframes: true,          // 启用iframe搜索
  iframeTimeout: 5000     // 设置iframe加载超时时间
});

Q: 高亮大量关键词时页面卡顿怎么办？

A: 可采用分批处理策略，将关键词数组拆分，使用setTimeout或requestIdleCallback依次处理：

function batchMark(marker, keywords, batchSize = 5) {
  let index = 0;
  
  function processBatch() {
    const end = Math.min(index + batchSize, keywords.length);
    marker.mark(keywords.slice(index, end));
    index = end;
    
    if (index < keywords.length) {
      requestIdleCallback(processBatch);
    }
  }
  
  processBatch();
}

Q: 如何自定义高亮动画效果？

A: 可以通过CSS过渡效果实现高亮动画：

.highlight {
  background-color: #ffff00;
  transition: all 0.3s ease;
}

.highlight.fade-in {
  animation: fadeHighlight 0.5s;
}

@keyframes fadeHighlight {
  0% { background-color: transparent; }
  50% { background-color: #ffeb3b; }
  100% { background-color: #ffff00; }
}

然后在each回调中添加类名触发动画：

marker.mark('关键词', {
  each: function(element) {
    element.classList.add('fade-in');
    setTimeout(() => element.classList.remove('fade-in'), 500);
  }
});