运用JS将搜索的关键字高亮显示
2025-04-27 23:13
JavaScript
83
0
0
0
标题录入
封面图
在前端开发中,经常需要将用户输入的搜索关键字在页面内容中高亮显示。可以使用 JavaScript 来实现这一功能。以下是一个简单的示例代码,展示如何将搜索关键字高亮显示: ### 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> <style> /* 定义高亮样式 */ .highlight { background-color: yellow; } </style> </head> <body> <h1>这是一个示例页面</h1> <p id="content"> 这是一个简单的示例页面,用于演示如何将搜索关键字高亮显示。你可以输入任意关键字来查看效果。 </p> <br> <label for="keyword">请输入搜索关键字:</label> <input type="text" id="keyword" placeholder="输入关键字"> <button onclick="highlight()">高亮</button> <script src="script.js"></script> </body> </html> ``` ### JavaScript 实现 ```javascript function highlight() { // 获取用户输入的关键字 const keyword = document.getElementById('keyword').value.trim(); // 如果没有输入关键字,直接返回 if (!keyword) { return; } // 获取要高亮的内容元素 const contentElement = document.getElementById('content'); // 获取原始内容 let contentText = contentElement.innerHTML; // 创建正则表达式,忽略大小写 const regex = new RegExp(keyword, 'gi'); // 使用正则表达式替换关键字为带有高亮样式的HTML contentText = contentText.replace(regex, `<span class="highlight">${keyword}</span>`); // 更新内容 contentElement.innerHTML = contentText; } ``` ### 代码说明: 1. **HTML部分**: - 页面包含一个段落(`<p>`标签),其 `id` 为 `content`,用于存放需要高亮显示的内容。 - 提供一个输入框和按钮,用户可以在输入框中输入关键字,并点击按钮触发高亮操作。 2. **CSS部分**: - 定义了一个 `.highlight` 类,用于设置高亮的背景颜色(黄色)。 3. **JavaScript部分**: - `highlight()` 函数负责处理高亮逻辑。 - 首先获取用户输入的关键字,并检查是否为空。 - 然后获取目标内容元素(`#content`),并将其内容存储为字符串。 - 使用正则表达式(`new RegExp(keyword, 'gi')`)来匹配关键字,并忽略大小写。 - 将匹配到的关键字用 `<span class="highlight">` 包裹,生成新的 HTML 字符串。 - 最后更新目标内容的 HTML 内容。 ### 示例效果: 假设用户输入的关键字是 "示例",那么页面中的内容会变成: ```html <p id="content"> 这是一个<span class="highlight">示例</span>页面,用于演示如何将搜索关键字<span class="highlight">示例</span>高亮显示。你可以输入任意关键字来查看效果。 </p> ``` ### 注意事项: 1. 如果需要支持多个关键字同时高亮,可以在输入框中允许用户输入多个关键字,并在 JavaScript 中对每个关键字分别进行高亮处理。 2. 可以进一步优化,例如在高亮时保留原有的格式,或者在用户清空输入框时自动移除高亮。 希望这个示例对你有所帮助!
上一篇:
JavaScript 经典实例日常收集整理常用经典5
下一篇:
JavaScript 经典实例日常收集整理常用经典 6
标题录入,一次不能超过6条
怎么分辨对方是朋友还是敌人
T:0.028821s,M:247.31 KB
返回顶部
留言
留言
评论