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

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

如下图：

在这里插入图片描述

起初用的是富文本实现

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

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

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

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

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

封装特定的高亮渲染组件

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

下面上封装组件代码：

<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>