uniapp搜索出的文字高光并添加锚点

uniapp搜索出的文字高光并添加锚点

步骤一：

<u-search placeholder="请输入关键字" v-model="keyword" @search="searchVal" :show-action="false" shape="square" bg-color="#FFFFFF" border-color="#D7D7D7"></u-search>

在data里定义一个keyword

步骤二：

<view class="adult_cont" v-html="brightenKeyword(item.title,keyword)">{{item.title}}</view>

使用v-html标签，会输出运算以后的结果

步骤三：

brightenKeyword(val) {
	let keyword = this.keyword;
	if (keyword.length > 0) {
		val = val + "";
		val = val.replace(new RegExp(keyword, 'g'),
		`<a id="${keyword}" class="${keyword}" style="background-color: #ffdf25;color: white;">${keyword}</a>`
		);
		return val;
	} else {
		return val;
	}
}

步骤四：

searchVal() {
	this.brightenKeyword();
	//锚点
	uni.createSelectorQuery().select("." + this.keyword).boundingClientRect(data => { //目标位置节点 类或者 id 
		uni.createSelectorQuery().select(".illness_content").boundingClientRect((res) => { //最外层盒子节点类或者 id
			uni.pageScrollTo({
				duration: 200, //过渡时间
				scrollTop: data.top - res.top, //到达距离顶部的top值
			})
		}).exec()
	}).exec();
},

** 首先调用brightenKeyword函数，然后接下来的代码就是锚点的代码了**