移动端uni-app小程序搜索高亮前端处理，同时可设置相关样式，兼顾性能

一蓑烟雨，一任平生2024-03-10 20:08

在uni-app中我们会遇到搜索高亮显示的需求

如下图：

起初用的是富文本实现

使用replaceAll方法取代搜索字段为一个标签并设置相应的样式，但是小程序的并没有把标签渲染出来，所以放弃了，下面原代码：

javascript 复制代码

/* 搜索字体变色 */
export const searchColour = (text:string,searchKey:string)=>{
	return text.replaceAll(searchKey,`<text>${searchKey}</text>`)
}

用第三方库 mp-html 富文本组件

库的链接地址为：https://ext.dcloud.net.cn/plugin?id=805

这次将渲染出来了，但里面的样式太难设置了，导致效果也不是很理想，所以放弃了

封装特定的高亮渲染组件

原理就是根据搜索字段，将渲染字符串转化为对象，标记高亮字段，然后分别渲染

下面上封装组件代码：

javascript 复制代码

<template>
	<text v-for="(item,index) in renderString" :key="index" :class="{'high-light':item.highLight}">{{item.text}}
	</text>
</template>

<script setup lang='ts'>
	import {
		computed
	} from "vue";
	const props = withDefaults(defineProps < {
		textString: string,
		searchValue: string
	} > (), {

	})
	const renderString = computed(() => {
		return getTextObj(props.textString, props.searchValue)
	})

	function getTextObj(str: string, searchKey: string) {
		let strObj = [];
		let index = 0;
		if (searchKey == '') {
			return [{
				text: str,
				highLight: false
			}]
		}

		while (index < str.length) {
			let pos = str.indexOf(searchKey, index);
			if (pos === -1) {
				strObj.push({
					text: str.slice(index),
					highLight: false
				});
				break;
			}
			if (pos !== 0) {
				strObj.push({
					text: str.slice(index, pos),
					highLight: false
				});
			}
			strObj.push({
				text: searchKey,
				highLight: true
			});
			index = pos + searchKey.length;
		}
		return strObj;
	}
</script>

<style lang='scss' scoped>
	.high-light {
		color: #DF2D45;
	}
</style>

然后样式就比较好设置了

有帮助到你的话，点个赞吧！