🔍给我的小程序加了个丝滑的搜索功能，踩坑表情包长度问题前言朄1�7近在用自己的卡盒小程序的时�1�7�，发现卡片越来越多，有时�1�7�要

前言

朄1�7近在用自己的卡盒小程序的时�1�7�，发现卡片越来越多，有时�1�7�要找到某一张来看看笔记要找半天，于是自己做了一个搜索功能，先看效果＄1�7/p> 搜索.gif

怎么样，是不是还挺不错的，那么这篇文章就讲讲这样丄1�7个搜索展示的功能是如何实现的〄1�7/p>

代码实现

首先我们分析这个搜索功能包含哪些霄1�7要实现的点：

输入关键字，匹配对应的卡片展礄1�7/li>
匹配的卡片上面，要把符合搜索条件的所有词给高亮展示出来，不然文本多的时�1�7�容易看花了〄1�7/li>
点击匹配到的卡片，要跳转到卡片的位置，并且闪烁两下，这样丄1�7看就知道要找卡片在哪了�1�7�1�7/li>

分析完成后，我们丄1�7点一点实现�1�7�1�7/p>

匹配关键孄1�7/h3>

我的小程序目前是纯前端搜索的，只是目前是这样，所以搜索�1�7�辑也是在前端实现�1�7�搜索�1�7�辑如果箄1�7单实现的话就是将搜索框的内容与列表中的每丄1�7项进行对比，看看内容中有没有包含这个字符串的，如果有就把这个项给返回回去〄1�7/p>

先看代码＄1�7/p>

const onSearch = () => {
  // 棄1�7查搜索文本框是否有�1�7�1�7/span>
  if (searchText.value) {
    // 创建丄1�7个正则表达式对象，用于在卡片内容中搜索文朄1�7/span>
    // 'giu' 标志表示全局搜索、不区分大小写和支持 Unicode
    const searchTextRegex = new RegExp(searchText.value, 'giu')
 
    // 遍历扄1�7有的卡片盒子
    const matchCardBox = cardDataStore.cardBoxList.map((cardBox) => {
      // 对每个卡片盒子，创建丄1�7个新对象，包含原始属性和修改后的卡片项目
      return {
        ...cardBox,
        // 映射并过滤卡片项目，只保留匹配搜索文本的项目
        cardItems: cardBox.cardItems
          .map((cardItem) => {
            // 初始化前面和背面内容的匹配数组1�7/span>
            const frontMatches = []
            const backMatches = []
 
            let match
            // 在卡片前面内容中搜索匹配顄1�7/span>
            while ((match = searchTextRegex.exec(cardItem.frontContent)) !== null) {
              // 记录每个匹配项的起始和结束索弄1�7/span>
              frontMatches.push({
                startIndex: match.index,
                endIndex: match.index + match[0].length,
              })
            }
 
            // 重置正则表达式的 lastIndex 属�1�7�，以便重新搜索
            searchTextRegex.lastIndex = 0
            // 在卡片背面内容中搜索匹配顄1�7/span>
            while ((match = searchTextRegex.exec(cardItem.backContent)) !== null) {
              // 记录每个匹配项的起始和结束索弄1�7/span>
              backMatches.push({
                startIndex: match.index,
                endIndex: match.index + match[0].length,
              })
            }
 
            // 棄1�7查是否有匹配项（前面或背面）
            const isMatched = frontMatches.length > 0 || backMatches.length > 0
 
            // 返回丄1�7个新的卡片项目对象，包含是否匹配和匹配项的位罄1�7/span>
            return {
              ...cardItem,
              isMatched,
              frontMatches,
              backMatches,
            }
          })
          // 过滤掉不匹配的项盄1�7/span>
          .filter((item) => item.isMatched),
      }
    })
 
    // 过滤掉没有匹配项目的卡片盒子
    filteredCards.value = matchCardBox.filter((cardBox) => cardBox.cardItems.length > 0)
  } else {
    // 如果没有搜索文本，则清空过滤后的卡片列表
    filteredCards.value = []
  }
}

1. 创建正则表达弄1�7/h4>

const searchTextRegex = new RegExp(searchText.value, 'giu')

searchText.value：这是用户输入的搜索文本〄1�7/li>
- new RegExp(...) ：�1�7�过传入的搜索文本和标志＄1�7'giu'）创建一个新的正则表达式对象〄1�7/li>
- g：全屄1�7搜索标志，表示搜索整个字符串中的扄1�7有匹配项，�1�7�不是在找到第一个匹配项后停止�1�7�1�7/li>
- i：不区分大小写标志，表示搜索时忽略大小写差异〄1�7 - u：Unicode 标志，表示启甄1�7 Unicode 完整匹配模式，这对于处理靄1�7 ASCII 字符很重要�1�7�1�7/li>

2. 搜索匹配顄1�7/h4>

let match

let match：声明一个变釄1�7 match，它将用于存傄1�7 RegExp.exec() 方法找到的匹配项〄1�7/li>

while ((match = searchTextRegex.exec(cardItem.frontContent)) !== null) { // ... }

searchTextRegex.exec(cardItem.frontContent) ：在 cardItem.frontContent （卡片的正面内容）中执行正则表达式搜索�1�7�1�7/li>
- 如果找到匹配项，exec() 方法返回丄1�7个数组，其中第一个元素（match[0]）是找到的匹配文本，index 属�1�7�是匹配项在字符串中的起始位置�1�7�1�7/li>
如果没有找到匹配项，exec() 方法返回 null〄1�7 - while 循环：继续执行，直到 exec() 方法返回 null，表示没有更多的匹配项�1�7�1�7/li>

3. 记录匹配项的索引

frontMatches.push({ startIndex: match.index, endIndex: match.index + match[0].length, })

在每次循环迭代中，都会找到一个匹配项〄1�7/li>
startIndex：匹配项圄1�7 cardItem.frontContent 中的起始位置〄1�7/li>
endIndex：匹配项圄1�7 cardItem.frontContent 中的结束位置（即起始位置加上匹配文本的长度）〄1�7/li>
frontMatches.push(...)：将包含起始和结束索引的对象添加刄1�7 frontMatches 数组中�1�7�1�7/li>

经过这么丄1�7番操作，我们就可以获得一个筛选后的数组，其中包含了所有匹配的项，每个项还有一个二维数组用来记录匹配位置开头结尾的索引＄1�7/p>

cardItems: (CardItem & {
      id: string
      frontMatches?: { startIndex: number; endIndex: number }[]
      backMatches?: { startIndex: number; endIndex: number }[]
    })[]

为什么要大费周章的记录这个索引呢，那是因为下丄1�7步需要用到，接下来说说关键词高亮的展示：

关键词高亄1�7/h3>

关键词高亮需要在字符串的某几个字符中更改它的样式，因此我们上丄1�7步才霄1�7要记录一下需要高亮的字符串开始和结束的位置，如此丄1�7来我们做这个高亮的组件就不用再执行一次匹配了。那么这个样式要如何实现呢，我们霄1�7要遍历这个字符串，在霄1�7要高亮的字增加额外的样式，最后再重新拼接成一个字符串〄1�7/p>

// Highlight.vue
<template>
  <view class="flex flex-wrap">
    <view
      v-for="(charWithStyle, index) in styledText"
      class="text-sm"
      :key="index"
      :class="charWithStyle.isMatched ? 'text-indigo-500 font-semibold' : ''"
    >
      {{ charWithStyle.char }}
    </view>
  </view>
</template>

<script lang="ts" setup>
import { defineProps, computed } from 'vue'

interface Props {
  text: string
  matches: { startIndex: number; endIndex: number }[]
}

const props = defineProps<Props>()

const styledText = computed(() => {
  const textArray = _.toArray(props.text)
  const returnArr = []
  let index = 0
  let arrIndex = 0
  while (index < props.text.length) {
    let char = ''
    if (textArray[arrIndex].length > 1) {
      char = textArray[arrIndex]
    } else {
      char = props.text[index]
    }

    const isMatched = props.matches.some((match) => {
      const endIndex = match.endIndex
      const startIndex = match.startIndex

      return startIndex <= index && index < endIndex
    })
    returnArr.push({ char, isMatched })
    index += textArray[arrIndex].length
    arrIndex += 1
  }

  return returnArr
})
</script>

这里我没有使甄1�7 for of 直接遍历字符串，这也是我的一个踩坑点，像 emoji 表情这种字符它的长度其实不是 1，如果你直接使用 for of 去遍历会把它的结构给拆开，最终展示出来的是乱码，如果你想正常展示就要甄1�7 Array.from(props.text) 的方式将字符串转换成数组，再进行遍历，这样每个字符就都是完整的�1�7�1�7/p>

假设我们打印＄1�7/p>

  console.log('😟'[0], '😟'.length)
  console.log(Array.from('😟')[0], Array.from('😟').length)

这里我没有使甄1�7 Array.from 而是使用亄1�7 lodash 中的 toArray，是因为看到这篇文章 fehey.com/emoji-lengt 1�7/a> 中提到：

Array.from(props.text) 创建的数组1�7 textArray 中的每个元素实际上是丄1�7丄1�7 UTF-16 代码单元的字符串表示，�1�7�不是完整的 Unicode 字符 Emoji 表情有可能是多个 Emoji + 丄1�7些额外的字符来拼接出来的，像 '👩‍👩�1�7�👧�1�7�👄1�7' 就是甄1�7 ['👩', '', '👩', '', '👧', '', '👧'] 拼接而成的，单个 Emoji 长度丄1�7 2，中间的连接字符长度丄1�7 1，故返回亄1�7 11〄1�7/p>
如何获取 '👩‍👩�1�7�👧�1�7�👄1�7' 的长度为视觉的1�7 1 呢，可以使用 lodash 的1�7 toArray 方法，_.toArray('👩‍👩�1�7�👧�1�7�👄1�7').length = 1,兄1�7a href="http://222.178.203.72:19005/whst/63/=khmjzitdihmzbm>sZqfds=gssor$29$1E$1Efhsgtazbnl$1EkncZrg$1EkncZrg$1Eakna$1E1e68.42c6ab6b8b8450Z2.ccZ1.1a2cbc1a61a8.$1EzhmsdqmZk$1ErsqhmfSn9qqZxzir$12K01/" target="_blank" title="https://github.com/lodash/lodash/blob/2f79053d7bc7c9c9561a30dda202b3dcd2b72b90/.internal/stringToArray.js#L12" ref="nofollow noopener noreferrer">内部实现了对 unicode 字符转换数组的兼容�1�7�1�7/p>

正是因为我们第一步中使用正则去匹配字符串的时候，是根据表情包字符实际的长度返回的索引值，扄1�7以我们这里有丄1�7个�1�7�辑＄1�7/p>

  let index = 0
  let arrIndex = 0
  while (index < props.text.length) {
    let char = ''
    if (textArray[arrIndex].length > 1) {
      char = textArray[arrIndex]
    } else {
      char = props.text[index]
    }
//，，＄1�7/span>
    index += textArray[arrIndex].length
    arrIndex += 1
  }

如果字符的长度大于一我们就从字符串数组中取�1�7�，这样表情包就能正常展示了，然后维护两个索引，丄1�7个索引给字符长度大于1的字符用，一个给字符长度丄1�7�用，根据不同的情况取不同的值，这样就能处理好表情包的这种情况了。下面这种很多个表情包的文本，也能在正确的位置高亄1�7/p>

滚动到指定位置并高亮

这一步就比较箄1�7单了，直接上代码＄1�7/p>

import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
const { safeAreaInsets } = uni.getWindowInfo()


// 滚动到卡盒位罄1�7/span>
const scrollToCardBox = (position: 'top' | 'bottom' = 'top') => {
  const query = uni.createSelectorQuery().in(instance.proxy)
  query
    .select(`#card-box-${props.cardBoxIndex}`)
    .boundingClientRect((data) => {
      return data
    })
    .selectViewport()
    .scrollOffset((data) => {
      return data
    })
    .exec((data) => {
      uni.pageScrollTo({
        scrollTop:
          data[1].scrollTop +
          data[0].top -
          safeAreaInsets.top +
          (position === 'top' ? 0 : data[0].height),
        duration: 200,
      })
    })
}

关于解析，在 🥲踩坑无数，如何用 uniapp 实现丄1�7个丝滑的英语学习卡盒小程庄1�7/a> 这篇文章中有详细提到，这里不赘述了�1�7�1�7/p>

uni.pageScrollTo 有一个回调，可以用于滚动到指定位置后，执行某个函数，那么我们可以在这里设置触发高亮的动画，动画的实现如下＄1�7/p>

<view
   //...
    :class="
      cardItemStore.scrollToCardItemId === props.cardItemData.id ? 'animation-after-search' : ''
    "
    
.animation-after-search {
  animation: vague 1s;
  animation-iteration-count: 2;
}

@keyframes vague {
  0%,
  100% {
    box-shadow: inset 0 0 0 0 transparent; /* 初始和结束时没有阴影 */
  }
  50% {
    box-shadow: inset 0 0 0 2px #6366f1; /* 中间时刻显示阴影 */
  }
}

这里没有使用边框，�1�7�是使用了内嵌的阴影，避免边框会把容器撑大的问题，滚动完成后动�1�7�给指定元素丄1�7个执行动画的 class,动画触发完成后再移除 class 射1�7 OK 了�1�7�效果如下：

总结

如果不是遇到了表情包长度问题，这个搜索功能的实现还是比较箄1�7单的，重点是交互和设计是否能够让用户快�1�7�定位到想找的内容�1�7�目前是纯前端实现，而且涉及了很多遍历，性能还有待提升，不过先实现再优化了�1�7�学习卡盒已经上线了，大家可以直接搜索到，这个搜索功能很快也发版了，欢迎体验〄1�7/p>