如何使用 JavaScript 突出显示搜索到的字符串结果？

在 Web 开发中，搜索功能是经常出现的一个应用场景，当用户搜索关键词时，需要将搜索结果的关键字标记出来，以便用户快速定位。本文将介绍如何使用 JavaScript 突出显示搜索到的字符串结果。

实现方式

实现突出显示搜索结果的方式有多种，例如通过修改元素的颜色、添加标签等。下面将介绍两种简单的实现方式。

1. 使用 replace 方法

使用 JavaScript 的 replace 方法可以替换字符串中的某些部分，我们可以借助这个方法实现搜索结果的突出显示。具体实现步骤如下：

1. 获取搜索框中输入的关键词；
2. 遍历需要搜索的字符串，将关键词替换成带有标记的字符串；
3. 将替换后的字符串插入页面中。

代码示例：

const keyword = document.querySelector('#searchBox').value;
const content = document.querySelector('#content').textContent;
const highlighted = content.replace(new RegExp(keyword, 'gi'), '<span class="highlighted">$&</span>');
document.querySelector('#content').innerHTML = highlighted;

其中，RegExp 构造函数用于创建一个正则表达式对象，/ 包裹的是要匹配的字符串，g 表示全局搜索，i 表示忽略大小写。'<span class="highlighted">$&</span>' 中的 $& 会被搜索到的字符串替换，使其被 <span> 标签包裹起来。

2. 使用 innerHTML

使用 innerHTML 将搜索结果解析成 HTML 代码，并通过设置标签的样式实现突出显示。具体实现步骤如下：

1. 获取搜索框中输入的关键词；
2. 遍历需要搜索的字符串，将匹配到的字符转换为带有标记的 HTML 代码；
3. 将标记后的 HTML 代码插入页面中。

代码示例：

const keyword = document.querySelector('#searchBox').value;
const content = document.querySelector('#content').textContent;
const highlighted = content.replace(new RegExp(keyword, 'gi'), `<mark class="highlighted">$&</mark>`);
document.querySelector('#content').innerHTML = highlighted;

其中，<mark> 标签用于表示突出显示的文本，样式可以通过 CSS 设置。

总结

本文介绍了两种实现突出显示搜索结果的方式，具体实现可以根据实际需求来选择。需要注意的是，在实现过程中需要防止 XSS 攻击，因此需要对用户输入进行过滤和验证。