小程序实现v-html，将搜索结果中搜索的文字标记

在小程序中做搜索功能时，有需求要将搜索的文字标记为蓝色。

实现方式：

1.使用小程序组将rich-text，将内容用正则匹配并用${this.inputValue}替换

 

i.categoryLabel = this.setColor(i.categoryName)

 

setColor(str) {
    let s = `${this.inputValue}`
    let text = str.replace(new RegExp(this.inputValue,'g'),s)
    return text
}

 

2.使用text，将内容用搜索的文字分割，这个方法可以对标记的内容添加事件。

{{it.descLabel[0]}}
{{it.keyword}}
{{it.descLabel[1]}}

 

x.descLabel = this.setColor('- '+x.description,x.keyword)

 

setColor(str,key) {
    let s1 = str.split(key)[0]
    let s2 = str.split(key)[1]
    return [s1,s2]
}