效果展示就是要实现这样的效果(高亮函数)
    image.png
    image.png
    在一个js模块中书写高亮函数(其实也就是正则替换,把匹配到的值,替换成相应的字符串)

    image.png
    image.png
    image.png
    上面代码举例 作用也就是在传入的字符串str中进行str.replace正则匹配,在整个str字符串中
    匹配到key(key表示要匹配的字段)val表示的是正则匹配到的值,然后把这个匹配到的值
    进行return后面的替换,替换成让它高亮的字符串
    高亮也就是把匹配到的字符串变一个颜色
    然后在输入框的页面(也就是需要高亮的页面)导入这个js文件,(导入这个js文件中正则替换的
    方法)
    image.png

    image.png

    因为使用输入框中的内容,匹配到下面渲染列表,使用正则,替换,写到计算属性中
    image.png
    上面的suggestions表示的就是上面要渲染列表的内容,使用map方法,把里面的每一项
    都使用导入的高亮函数(也就是写的那个正则替换)参数1表示的是suggestiongs中的每一项
    this.keyword表示的是输入框中的内容,就是在渲染列表的每一项,中寻找和输入框中内容
    相同的进行替换,替换成一句渲染的代码
    image.png
    写到计算属性中,每次输入框中的内容发生变化都会触发这个计算属性,进行替换,
    把普通的字符替换成一句渲染的代码
    遍历这个计算属性(每次输入框中的内容发生变化都执行这个计算属性,进而调用替换(高亮函数)
    把渲染列表那个数组中每一项和输入框内容相同的部分进行高亮替换(把相同的每一项,替换
    成一句渲染的代码)

    image.png
    遍历那个计算属性,遍历出来的是一句渲染代码的字符串,不会识别html标签,也就是不会渲染
    其中的html代码,这个时候就需要用v-html,v-html能识别字符串中的html标签,进而进行
    把遍历处理的每一项渲染到页面中(同时html标签也被识别渲染)如下图没有渲染的地方
    就在中间新建一个div把内容渲染到div里面就行
    image.png