搜索结果中关键字高亮显示

使关键字高亮显示主要是给搜索结果中的关键字加一个标签并给他加上特定的样式。 主要以在vue中为例

给关键字添加span标签的方法

wraperkeyword(k, v) { function highlight(value) { console.log(value); return `<span style="color:#1890ff">${value}</span>`; } return v.replace(new RegExp(this.search, "ig"), v => highlight(v)); },

在拿到搜索结果后

我们在请求到搜索结果后，遍历每一条数据调用上面方法（wraperkeyword（））给关键字加标签在渲染的时候使用v-html即可

async searchlist() { this.search = this.$route.query.search; let res = await this.$axios.post( "/web/search", this.qs.stringify({ search: this.search }) ); if (res.data.state.type === "SUCCESS") { this.tableData = res.data.data; this.tableData.activity.forEach(element => { element.titlewraper = this.wraperkeyword( "activity_title", element.activity_title ); }); } }