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搜索高亮的资料请关注脚本之家其它相关文章！
相关文章
uniapp Android解决 APP菜单、按钮权限控制方法
这篇文章主要介绍了uniapp Android解决 APP菜单、按钮权限控制方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
js jquery数组介绍，数组时编程中比较常用的处理，需要的朋友可以参考下2012-07-07
这篇文章主要为大家详细介绍了微信小程序云开发之模拟后台增删改查，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要为大家介绍了p5.js实现声音控制警察抓小偷游戏示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了JS实现的视频弹幕效果,涉及javascript基于事件响应的页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2018-08-08
小程序中使用css var变量(使js可以动态设置css样式属性)
这篇文章主要介绍了小程序中使用css var变量，使js可以动态设置css样式属性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了js原型与原型链的相关资料,包括原型、原型对象、__proto__隐式原型以及原型链的机制,通过实例和练习帮助读者理解原型链的工作原理和如何在实际开发中应用,需要的朋友可以参考下2025-05-05
这篇文章主要介绍了javascript运行机制之执行顺序理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
这篇文章主要介绍了纯javascript实现简单下拉刷新功能,没有借助任何的框架，十分简单实用，有需要的小伙伴来参考下吧。2015-03-03
这篇文章主要介绍了JavaScript获取用户所在城市及地理位置的实例代码，非常不错，具有参考借鉴价值，需要的朋友参考下吧2018-04-04
最新评论