网站中实现关键词搜索及高亮

相信小伙伴们平时在浏览一些网站的时候应该都体验过网站的搜索功能，此功能不仅能快速检索出你关注的内容，同时也会对你搜索的关键词进行高亮显示，那今天就以一个SpringBoot项目为例实现网页中的关键词搜索及高亮

后端部分

首先看一下后端的实现，核心思路是接收前端传递的参数，在SQL语句中使用模糊查询，返回查询到的结果

我在项目中使用了Mybatis，以下代码是对应的mapper文件中的片段

<!--此处的key为用户搜索的内容-->
<select id="queryBlogByKey" resultType="Blog">
        select * from blog where (title like #{key} or content like #{key}) and deleted = 0
</select>

前端部分

高亮功能主要由前端实现，页面的主要内容为搜索框和待展示的内容，主要代码如下：

<!--搜索框-->
<div>
  <form name="search" method="post" th:action="@{/blog/search}">
    <div class="ui fluid category search">
      <div class="ui icon input">
        <input class="prompt" type="text" name="key" id="key" placeholder="输入关键词...." th:value="${key}">
        <i onclick="document.forms['search'].submit()" class="circular search link icon"></i>
      </div>
    </div>
  </form>
</div>

<!--展示的内容-->
<div id="content">
  ...
</div>

接下来是实现关键词高亮的代码，核心思路是：获取搜索框中的内容（即关键词），在展示的内容渲染时通过正则表达式匹配所有的关键词，将其全部渲染为span元素，并添加style改变其颜色

function highlight() {
    
    
  var key = document.getElementById("key").value; // 获取搜索框中的内容
  if (key === "") {
    
     // 非空判断
    return;
  } else {
    
    
    var regExp = new RegExp(key, "g");
    var content = document.getElementById("content");
    // 替换关键词实现高亮
    content.innerHTML = content.innerHTML.replace(regExp, "<span style=\"color:red\">" + key + "</span>");
  }
}

最终效果如图：

注意：此处实现的高亮功能只能识别跟关键词完全相同的内容，对于英文中的大小写字母将无法识别