有两种类型看需求封装

<rich-text v-else :nodes="item.value"></rich-text>

类型一，每个字都高亮

onInput(){
    // 重置数组 
    this.filterList = JSON.parse(JSON.stringify(this.communityList))
    // 过滤数组 
    this.filterList = this.filterList.filter(item => item.value.includes(this.valueInp))
    // 数组项高亮 
    this.filterList.forEach(item => {
        let fontres = ''
        for(let fontItem of item.value) {
            if(this.valueInp.includes(fontItem)) 
                fontres += `<font style='color: #0378BC'>${fontItem}</font>`
            else 
                fontres += fontItem
        }
        item.value = fontres
    });
    console.log(this.filterList);
},

效果

image.png

类型二，按单词高亮第一项

onInput(){
    // 重置数组 
    this.filterList = JSON.parse(JSON.stringify(this.communityList))
    // 过滤数组 
    this.filterList = this.filterList.filter(item => item.value.includes(this.valueInp))
    // 数组项高亮 
    this.filterList.forEach(item => {
        item.value = item.value.replace(this.valueInp, `<font style='color: #0378BC'>${this.valueInp}</font>`)
    });
    console.log(this.filterList);
},

效果

image.png