JavaScript实现搜索高亮功能详解
更新时间：2025年05月01日 09:30:33 作者：友人.227
这篇文章主要介绍了JavaScript实现搜索高亮功能,搜索功能是常见的需求之一,为了提升用户体验,我们可以通过高亮显示搜索结果中的关键词来帮助用户快速定位信息,需要的朋友可以参考下
前言
在开发 Web 应用时，搜索功能是常见的需求之一。为了提升用户体验，我们可以通过高亮显示搜索结果中的关键词来帮助用户快速定位信息。本文将介绍如何使用 HTML、CSS 和 JavaScript 实现一个简单的搜索高亮功能。
1. 功能需求
我们的目标是实现一个简单的搜索框，用户可以在其中输入关键词。当用户点击搜索按钮时：
- 如果输入框为空，则清除所有已有的高亮。
- 如果输入框中有关键词，则在页面内容中查找并高亮显示所有匹配的文本。
2. HTML 结构
HTML 部分非常简单，包含一个搜索框、一个搜索按钮和一些示例文本内容。以下是完整的 HTML 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索高亮功能</title>
<!-- 写css的地方 -->
<style></style>
</head>
<body>
<div class="search-container">
<input type="text" id="search-input" placeholder="请输入搜索关键词">
<button id="search-button">搜索</button>
</div>
<div class="content">
<p class="content-right">这是一个示例文本，用于演示搜索高亮功能。</p>
<p class="content-right">你可以输入关键词，比如“示例”或“高亮”，看看效果。</p>
<p class="content-right">这个功能使用了 JavaScript 来实现。</p>
</div>
</body>
</html>3. CSS 样式
为了提升视觉效果，我们使用 CSS 对页面进行简单的样式设计。以下是 styles.css 的内容：
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.search-container {
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
}
#search-input {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
width: 300px;
}
#search-button {
padding: 10px 20px;
font-size: 16px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-left: 10px;
}
#search-button:hover {
background-color: #0056b3;
}
.content {
margin: 20px;
}
.content-right {
margin-bottom: 10px;
padding: 10px;
background-color: white;
border: 1px solid #ddd;
border-radius: 4px;
}
em {
background-color: yellow;
font-weight: bold;
}4. JavaScript 实现
JavaScript 是实现搜索高亮功能的核心部分。以下是代码的详细解析：
document.addEventListener("DOMContentLoaded", () => {
const searchInput = document.getElementById("search-input");
const searchButton = document.getElementById("search-button");
const contentItems = document.querySelectorAll(".content-right");
searchButton.addEventListener("click", () => {
const keyword = searchInput.value.trim();
// 清除之前的高亮
contentItems.forEach(item => {
item.innerHTML = item.textContent;
});
// 如果关键词不为空，则进行高亮
if (keyword) {
contentItems.forEach(item => {
if (item.textContent.includes(keyword)) {
item.innerHTML = item.textContent.replace(
new RegExp(keyword, "gi"),
`<em>${keyword}</em>`
);
}
});
}
});
});5. 总结
通过简单的 HTML、CSS 和 JavaScript，我们实现了一个搜索高亮功能。这个功能不仅可以提升用户体验，还可以作为学习前端开发的一个很好的实践项目。你可以根据实际需求进一步扩展功能，例如支持动态内容更新或优化性能。
希望这篇文章对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言。
- 获取 DOM 元素：
使用 document.getElementById 和 document.querySelectorAll 获取搜索框、搜索按钮和内容区域。
- 绑定点击事件：
为搜索按钮绑定点击事件，当用户点击按钮时触发搜索逻辑。
- 清除高亮：
在每次搜索前，清除之前的所有高亮内容。通过将 innerHTML 替换为 textContent，移除所有 <em> 标签。
- 高亮关键词：
如果用户输入的关键词不为空，使用 String.prototype.includes 判断内容中是否包含关键词。
使用正则表达式和 String.prototype.replace 方法将关键词替换为 <em> 包裹的文本，实现高亮效果。
以上就是JavaScript实现搜索高亮功能详解的详细内容，更多关于JavaScript搜索高亮的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了H5 js点击按钮复制文本到粘贴板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要介绍了微信小程序tabBar设置实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
js函数中有三个在特定场合很好用的函数:reduce(),map(),filter()。而数组经常用到的方法有push、join、indexOf、slice等等，但是有一个经常被我们忽略的方法：reduce，这个方法简直强大的不要不要的。下面通过这篇文章来一起学习学习吧。2016-12-12
这篇文章主要介绍了js实现仿微博滚动显示信息的效果,通过由上往下滚动来实现不断显示微博的，而且每一天新微博都是通过淡入效果显示的,需要的朋友可以参考下2015-12-12
这篇文章主要为大家详细介绍了js布局实现单选按钮控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要介绍了JavaScript中set与get方法用法,简单描述了set与get方法的功能,并结合实例形式分析了set与get方法的具体使用技巧,需要的朋友可以参考下2018-08-08
js中的原型与原型链应该是老生常谈的话题了，在前端面试中基本都是必问的一个问题，但是很多人还是稀里糊涂的，只知道其表层含义。本文将带大家深入了解JavaScript中的原型与原型链，感兴趣的可以学习一下2022-10-10
浅谈Javascript鼠标和滚轮事件,鼠标事件也许是web页面当中最常用到的事件，因为鼠标是最常用的导航设备2012-06-06
说起幻灯片效果，想必大家都不陌生吧，接下来为大家介绍下使用jquery插件jquery.smallslider.js实现幻灯片效果示例代码，喜欢的朋友可以学习下2013-11-11
只有msg是必须的，后面的参数可以省略。如果中间的参数为空则在对应位置上''或者""表示（根据实际情况选择单双引号） 调用此方法须在每个使用的页面的head区域加入下面代码。2009-11-11
最新评论