在本文中，我们将深入探讨如何使用JavaScript实现静态页面的搜索功能，并在用户输入的关键字与页面内容相匹配时进行高亮显示。首先，作者引入了HTML结构，包括一个输入框用于接收用户输入的搜索关键字（id="key-word"），一个按钮用于触发搜索操作（id="search-button"），以及一个包含大量文本的div元素（id="content"），这些元素构成基础的交互界面。
JavaScript部分的核心是以下几个步骤：
1. **事件响应**：使用`$`函数作为简化版的`document.getElementById`，创建了事件监听器，如当用户聚焦到输入框时清除默认提示文字，以及输入框失去焦点时恢复默认提示。这样确保了用户的输入体验。
2. **搜索触发**：当用户点击"搜索"按钮时，通过`onclick`事件处理程序，获取用户输入的关键字（`keyWord`）和页面内容（`content`）。这里使用`search_do`函数进行实际的搜索操作。
3. **搜索算法**：`search_do`函数接收两个参数，即`content`和`keyWord`。该函数内部，首先将页面内容（字符串类型）保存，然后遍历整个内容查找关键字。在找到匹配项时，使用`replace`方法替换匹配的文本，同时将`<mark>`标签包裹在被高亮的词前后，以实现高亮显示。例如，原始代码片段中的`content=search_do(content,keyWord);`这行代码就是执行这个过程。
4. **结果更新**：搜索完成后，用修改后的高亮结果显示在页面上，覆盖原有的`content`元素。由于没有展示完整的`search_do`函数，我们可以假设它会返回一个新的字符串，其中包含了高亮标记的关键字。
5. **示例不足**：虽然提供的代码片段展示了基本的思路，但完整的`search_do`函数代码并未给出。这可能是为了节省篇幅或鼓励读者自己实现这部分逻辑，通常这个函数会采用正则表达式或者循环逐个查找匹配。
总结起来，本文档向读者展示了如何利用JavaScript在静态页面上实现一个基础的搜索并高亮显示功能，涉及到了DOM操作、事件监听和字符串处理技术。对于前端开发人员来说，这是一个实用且常见的技巧，有助于提高网页用户体验。学习和掌握这个功能，对于理解和运用JavaScript进行网页交互有着重要的实践价值。
我的内容管理
展开
