js实现高亮
实现高亮的方法
使用原生JavaScript
通过操作DOM元素的style属性或类名实现高亮效果。以下是一个基础示例：
function highlightElement(elementId, color = 'yellow') {
const element = document.getElementById(elementId);
if (element) {
element.style.backgroundColor = color;
}
}使用CSS类切换
定义高亮样式类，通过JavaScript动态添加/移除类名：
.highlight {
background-color: yellow;
font-weight: bold;
}function toggleHighlight(elementId) {
const element = document.getElementById(elementId);
if (element) {
element.classList.toggle('highlight');
}
}文本范围高亮
对于文本节点中的特定内容，可使用Range和DocumentFragment：
function highlightText(text, containerId, highlightClass = 'highlight') {
const container = document.getElementById(containerId);
if (!container) return;
const content = container.innerHTML;
const regex = new RegExp(text, 'gi');
const highlighted = content.replace(regex,
match => `<span class="${highlightClass}">${match}</span>`
);
container.innerHTML = highlighted;
}使用第三方库
Mark.js等专门的高亮库提供更丰富的功能：
// 使用Mark.js库
const instance = new Mark(document.getElementById('content'));
instance.mark('keyword', {
className: 'custom-highlight',
accuracy: 'exactly'
});动态搜索高亮
结合输入框实现实时高亮：
document.getElementById('search-input').addEventListener('input', (e) => {
const keyword = e.target.value.trim();
const marker = new Mark(document.querySelector('article'));
marker.unmark().mark(keyword);
});注意事项
- 性能优化：频繁DOM操作时考虑使用文档片段或防抖技术
- 可访问性：高亮颜色需满足WCAG对比度标准
- 撤销功能：保留原始内容副本以便恢复
- 嵌套处理：注意处理HTML标签嵌套时的文本匹配问题
以上方法可根据具体需求组合使用，CSS类切换方式推荐用于大多数场景，因其更易维护和扩展样式。
