正文

轻松掌握：JavaScript实现关键词高亮显示的5种方法及实战案例

/0 浏览量
0418

在网页开发中，为了提升用户体验，我们经常需要对文本内容进行高亮显示，以突出显示某些关键词或短语。JavaScript 提供了多种方法来实现这一功能。以下将详细介绍五种常用的方法，并附上实战案例。

方法一：使用纯 JavaScript 和 HTML

这是一种简单直接的方法，通过 JavaScript 操作 DOM 元素来实现关键词高亮。

代码示例：

function highlightKeyword(keyword) {
  const text = document.getElementById('content').innerText;
  const highlightedText = text.replace(new RegExp(keyword, 'gi'), `<span class="highlight">${keyword}</span>`);
  document.getElementById('content').innerHTML = highlightedText;
}

// HTML 示例
// <div id="content">这里是需要高亮的文本内容，包含关键词。</div>
// <button onclick="highlightKeyword('关键词')">高亮关键词</button>

CSS 示例：

.highlight {
  background-color: yellow;
}

方法二：使用第三方库 highlight.js

highlight.js 是一个功能强大的 JavaScript 库，可以轻松实现代码和文本的高亮显示。

安装：

npm install highlight.js

代码示例：

// 引入 highlight.js
import hljs from 'highlight.js';

document.addEventListener('DOMContentLoaded', () => {
  hljs.highlightAll();
});

HTML 示例：

<pre><code class="javascript">function highlightKeyword(keyword) {</code></pre>

方法三：使用正则表达式和 DOM 操作

这种方法结合了正则表达式和 DOM 操作，可以更灵活地控制高亮显示。

代码示例：

function highlightKeyword(keyword) {
  const text = document.getElementById('content').innerHTML;
  const regex = new RegExp(`(${keyword})`, 'gi');
  const highlightedText = text.replace(regex, '<span class="highlight">$1</span>');
  document.getElementById('content').innerHTML = highlightedText;
}

方法四：使用 CSS 选择器和伪元素

这种方法利用 CSS 选择器和伪元素来实现高亮效果。

CSS 示例：

.highlight::after {
  content: attr(data-highlight);
  background-color: yellow;
  padding: 0 2px;
}

HTML 示例：

<div id="content">这里是需要高亮的文本内容，包含关键词。</div>
<div data-highlight="关键词">关键词</div>

方法五：使用 JavaScript 的字符串函数

这种方法利用 JavaScript 的字符串函数来实现高亮效果。

代码示例：

function highlightKeyword(keyword) {
  const text = document.getElementById('content').innerText;
  const regex = new RegExp(`(${keyword})`, 'gi');
  const highlightedText = text.replace(regex, '<span class="highlight">$1</span>');
  document.getElementById('content').innerHTML = highlightedText;
}

总结

以上五种方法各有优缺点，可以根据实际需求选择合适的方法。在实际应用中，我们可以根据文本内容的特点和需求，灵活运用这些方法来实现关键词高亮显示。

-- 展开阅读全文 --