uniapp：搜索关键字，高亮提示

<template>
	<view class="search">
		<u-navbar title="" :is-back="false" :border-bottom="false" title-color="#000"
			:background="{background:'#F5F5F8'}">
			<view class="page_navbar_warp">
				<u-search shape="square" placeholder="搜索" v-model="keyword" :show-action="true"
					action-text="取消" bg-color="#ffffff" search-icon-color="#ABB0BF" color="#000" height="72"
					@custom="$goBack(1,1)" @search="search" @change="change"></u-search>
			</view>
		</u-navbar>

		<view class="list">
			<view class="title">联系人</view>
			<view class="item" v-for="(item,index) in list" :key="index">
				<image src="../../static/logo.png" mode=""></image>
				<view class="right">
					<view class="name" v-html="item.title"></view>
					<view class="text u-line-1" v-html="item.content"></view>
				</view>
			</view>
			<view class="more">更多联系人</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				keyword: '',
				list: []
			}
		},
		methods: {
			changeColor(result) {
				result.map((item, index) => {
					if (this.keyword) {
						let replaceReg = new RegExp(this.keyword, "ig");
						let replaceString = `<span style="color: #FDAD4E">${this.keyword}</span>`;
						result[index].title = item.title.replace(replaceReg, replaceString);
						result[index].content = item.content.replace(replaceReg, replaceString);
					}
				});
				return result;
			},
			search(){
				if(this.keyword == ''){
					uni.showToast({
						icon:'none',
						title: '请输入搜索内容',
					});
				}else{
					// 模拟接口请求数据
					let arr = [{
							title: '天涯过客',
							content:'据说明天有雨'
						},
						{
							title: '彩虹过人',
							content:'测试数据'
						},
						{
							title: '梅开二度',
							content:'测试数据'
						},
						{
							title: '天天向上',
							content:'测试数据'
						}
					];
					this.list = this.changeColor(arr);
				}
			},
			change(e){
				if(e == ''){
					this.list = []
				}
			},
		}
	}
</script>