接口请求数据后返回的结果进行正则替换
然后用v-html插入页面
使用方法如下:
html代码:
<div class="doc-body-item-title">
<span class="doc-body-item-title-word"
v-html="item.replaceFileName"
@click="goDetails(item)">
</span>
</div>
<div class="doc-body-item-content">
<span class="doc-body-item-content-word" @click="goDetails(item)"
v-html="item.fileContent">
</span>
</div>
js代码:
// 接口请求数据
searchFileList(sendData).then((res) => {
const { dataList, ...info } = res || {};
if (this.$route.query.keyword) {
const showList = (dataList || []).map((item) => {
item.replaceFileName = item.title.replace(new RegExp(this.$route.query.keyword, 'g'), `<span style="color: #ff6531;">${this.$route.query.keyword}</span>`);
item.fileContent = item.partContent.replace(new RegExp(this.$route.query.keyword, 'g'), `<span style="color: #ff6531;">${this.$route.query.keyword}</span>`);
return item;
});
this.list = showList;
} else {
this.list = dataList;
}
this.totalInfo = info;
});

本文介绍如何通过正则表达式对从接口获取的数据进行关键词高亮,并使用v-html将其展示在页面上。适用于前端开发中搜索结果的展示需求。
1390

被折叠的 条评论
为什么被折叠?



