vue 通过query传参实现搜索和关键字高亮

最近这个项目里面，有一个全局搜索的功能，我们没有用ES全局搜索，只是做了一搜索管理页面，用来添加需要在搜索功能添加的接口、参数、展示的列等。搜索展示页面通过异步请求请求多个接口，来实现需要搜索的展示能，今天这是搜索中搜索关键字高亮是怎么实现的。vue路由通过query传参把关键字传给搜索页面，搜索页面点用接口，搜索有次关键字的信息，使用正则表达式进行全文匹配关键词，用带有样式的关键字替换全文关键字实现高亮。

1、路由页面

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";

Vue.use(Router);

export default new Router({
    // mode: "history",
    base: process.env.BASE_URL,
    routes: [{
            path: "/",
            name: "home",
            component: Home
        },
        {
            path: "/about",
            name: "about",
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () =>
                import ( /* webpackChunkName: "about" */ "./views/About.vue")
        },
        {
            path: "/fruits",
            name: "fruits",
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () =>
                import ( /* webpackChunkName: "about" */ "./views/fruits.vue")
        }
    ]
});```
2、搜索页面
```javascript
<template>
  <div>
    <div class="search fl">
      <div class="headfl" id="v-step1">
        <el-input
          class="headinput"
          style="border-radius: 20px;"
          placeholder="请输入内容"
          v-model="input"
          clearable
          @keyup.enter.native="searchEnterFun"
        >
          <el-button
            style=" color:#fff; font-size:16px;"
            slot="append"
            type="primary"
            icon="icon iconfont icon-fangdajing-copy"
            @click="searchClick"
          >
            <span style="display:inline-block; margin-left:10px;">
              搜索
            </span>
          </el-button>
        </el-input>
      </div>
    </div>
	</div>
</template>
<script>
  export default {
    data(){
      return {
        input:'',
      }
    },
    created(){
	  },
    mounted(){
    },
    methods: {
      // 热键
      searchEnterFun(e) {
        var keyCode = window.event ? e.keyCode : e.which;
        if (keyCode == 13 && this.input) {
          this.searchClick();
        }
      },
      searchClick() {
        var inputArray = this.input.split('')
        if(inputArray.length == 1){
          for(var I of inputArray){
            if(I == '_'){
              this.input = " "
            }
          }
        }
        if (this.input.trim()) {
          this.$router.push({
            path: "/fruits",
            query: {
              searchContent: this.input,
            },
          });
        }
      },
	  },
  }
</script>

3、搜索结果页面（带高亮）

<template>
    <div>
		<div>
            <ul id="box">
                <span v-for="(item,index) in searchInt" :key='index'>
                    <li v-html="item.int"></li>
                </span>
            </ul>
        </div>
	</div>
</template>
<script>
  export default {
    data(){
      return {
        searchValue:'',
        searchInt:[{
            int:'水果：草莓、菠萝、木瓜、哈密瓜、芒果、杏、李子、樱桃。'
        },{
            int:'水果：西瓜、木瓜、哈密瓜、山竹、樱桃、香蕉、芒果、火龙果。'
        },{
            int:'水果：苹果、香梨、山楂、橘子、桂圆、葡萄、木瓜、哈密瓜、荔枝、樱桃。'
        },{
            int:'水果：木瓜、哈密瓜、橘子、橙子、柚子、青枣、石榴、甘蔗、樱桃。'
        }]
      }
    },
    created(){
        console.log(this.$route.query.searchContent)
        this.searchValue = this.$route.query.searchContent;
        this.redHeight(this.searchValue)
	  },
    mounted(){
    },
    methods: {
        redHeight(value){
            this.searchInt.map((item, index) => {
                if (this.searchValue) {
                    /**
                     * 使用正则表达式进行全文匹配关键词
                     * ig : 表示 全文查找 ,忽略大小写
                     *  i : 忽略大小写
                     *  g : 全文查找
                     *
                     * 使用字符串的replace方法进行替换
                     * stringObject.replace('被替换的值',替换的值)
                     */
                    let replaceReg = new RegExp(this.searchValue, 'ig')
                    let replaceString = `<span style="color: #ed4014">${this.searchValue}</span>`
                    this.searchInt[index].int = item.int.replace(replaceReg, replaceString)
                }
            })
            
        }
	},
  }
</script>
<style type="text/css">
     #box{ 
	    height:200px; 
	    width:500px;
	    margin:50px auto;
	    border:2px solid #eee;
	    text-indent:20px;
    }
    #inpt{
        text-align:center;
    }
    li{
    	list-style-type: none;
    	margin: 10px 0;
    }
           
</style>