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

后端部分

首先看一下后端的实现，核心思路是接收前端传递的参数，在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>");
  }
}

最终效果如图：

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