关键词高亮显示特效代码

在网页开发中，关键词高亮显示是一种常见的功能，它能够帮助用户快速找到并聚焦到页面上的重要信息。这种特效在搜索引擎结果页、文章阅读、代码示例等场景中尤为常见。本文将详细介绍如何实现关键词高亮显示特效，并提供相关的代码示例。 一、基本原理 关键词高亮显示的核心是通过JavaScript或者CSS来改变关键词所在文本的样式，使其在页面上更加突出。通常我们会将关键词的背景色设为不同的颜色，或者添加下划线，以此吸引用户的注意力。 二、JavaScript实现 1. 获取关键词：我们需要获取要高亮显示的关键词。这可以通过从URL参数、页面元素属性，或者用户输入中提取得到。 2. 搜索文本：遍历DOM树，查找包含关键词的文本节点。可以使用`innerText`或`textContent`属性获取文本内容，然后用正则表达式匹配关键词。 3. 应用样式：找到匹配的关键词后，我们可以创建一个新的`span`元素，将其`innerHTML`设置为关键词，并设置相应的CSS样式，如背景色。然后将原文本替换为新创建的`span`元素。 以下是一个简单的JavaScript实现示例： ```javascript function highlightKeyword(keyword) { const textNodes = Array.from(document.body.querySelectorAll('body *')) .flatMap(node => Array.from(node.childNodes)) .filter(node => node.nodeType === Node.TEXT_NODE); textNodes.forEach(textNode => { const parent = textNode.parentNode; let newNode = document.createElement('span'); newNode.style.backgroundColor = 'yellow'; newNode.innerHTML = textNode.textContent.replace(new RegExp(keyword, 'gi'), '<span>$&</span>'); parent.insertBefore(newNode, textNode); parent.removeChild(textNode); }); } // 使用示例 highlightKeyword('关键词'); ``` 三、CSS实现 CSS实现相对简单，我们只需要定义一个CSS类，然后动态地将这个类应用到包含关键词的元素上。例如： ```css .highlight { background-color: yellow; } ``` ```javascript function highlightKeywordCSS(keyword) { const elements = document.querySelectorAll(`:contains(${keyword})`); elements.forEach(element => element.classList.add('highlight')); } // 使用示例 highlightKeywordCSS('关键词'); ``` 四、优化与注意事项 1. 性能优化：如果页面内容庞大，遍历所有文本节点可能会影响性能。可以考虑使用`IntersectionObserver`来监听可见区域内的元素，或者只处理可视窗口内的文本。 2. 用户体验：避免过多的高亮，以免影响用户阅读。可以设置合适的高亮阈值，只对出现频率较高的关键词进行高亮。 3. 兼容性：确保使用的JavaScript方法和CSS特性在目标浏览器中是支持的。 4. 可访问性：考虑到屏幕阅读器和其他辅助技术，应确保高亮不影响内容的可读性和语义理解。 总结，关键词高亮显示是提升用户体验的有效手段，通过JavaScript和CSS的结合，我们可以轻松实现这一功能。在实际应用中，还需要关注性能、兼容性和可访问性等方面，以提供更好的用户体验。