给我的小程序加了个丝滑的搜索功能，踩坑表情包长度问题

🕗 发布于 2024-12-11 06:00 uniapp 微信小程序 vue.js 前端

前言

最近在用自己的卡盒小程序的时候，发现卡片越来越多，有时候要找到某一张来看看笔记要找半天，于是自己做了一个搜索功能，先看效果：

怎么样，是不是还挺不错的，那么这篇文章就讲讲这样一个搜索展示的功能是如何实现的。

代码实现

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

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

分析完成后，我们一点一点实现。

匹配关键字

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

先看代码：

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

1. 创建正则表达式

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

searchText.value：这是用户输入的搜索文本。
- new RegExp(...) ：通过传入的搜索文本和标志（‘giu’）创建一个新的正则表达式对象。
- g：全局搜索标志，表示搜索整个字符串中的所有匹配项，而不是在找到第一个匹配项后停止。
- i：不区分大小写标志，表示搜索时忽略大小写差异。 - u：Unicode 标志，表示启用 Unicode 完整匹配模式，这对于处理非 ASCII 字符很重要。

2. 搜索匹配项

let match

let match：声明一个变量 match，它将用于存储 RegExp.exec() 方法找到的匹配项。

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

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

3. 记录匹配项的索引

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

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

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

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

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

关键词高亮

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

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

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

假设我们打印：

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

在这里插入图片描述

这里我没有使用 Array.from 而是使用了 lodash 中的 toArray，是因为看到这篇文章 https://fehey.com/emoji-length 中提到：

Array.from(props.text) 创建的数组 textArray 中的每个元素实际上是一个 UTF-16 代码单元的字符串表示，而不是完整的 Unicode 字符 Emoji 表情有可能是多个 Emoji + 一些额外的字符来拼接出来的，像 ‘👩‍👩‍👧‍👧’ 就是由 [‘👩’, ‘’, ‘👩’, ‘’, ‘👧’, ‘’, ‘👧’] 拼接而成的，单个 Emoji 长度为 2，中间的连接字符长度为 1，故返回了 11。

如何获取 ‘👩‍👩‍👧‍👧’ 的长度为视觉的 1 呢，可以使用 lodash 的 toArray 方法，_.toArray(‘👩‍👩‍👧‍👧’).length = 1,其内部实现了对 unicode 字符转换数组的兼容。

正是因为我们第一步中使用正则去匹配字符串的时候，是根据表情包字符实际的长度返回的索引值，所以我们这里有一个逻辑：

  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]
    }
//，，，
    index += textArray[arrIndex].length
    arrIndex += 1
  }

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

滚动到指定位置并高亮

这一步就比较简单了，直接上代码：

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


// 滚动到卡盒位置
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 实现一个丝滑的英语学习卡盒小程序这篇文章中有详细提到，这里不赘述了。

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

<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; /* 中间时刻显示阴影 */
  }
}

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

总结

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

原文地址：https://blog.csdn.net/weixin_47077674/article/details/144370600

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：汽车BLIS系统：守护驾驶安全的隐形卫士
下一篇：python爬虫常用数据保存模板（Excel、CSV、mysql）——scrapy中常用数据提取方法（CSS、XPATH、正则）（23）

.NET(C#) 如何配置用户首选项及保存用户设置
.NET(C#) 如何配置用户首选项及保存用户设置
阅读更多2024-12-14
【最新】北大数字普惠金融指数数据集-省市县（2011-2023年）
郭峰,王靖一,王芳,孔涛,张勋,程志云.测度中国数字普惠金融发展:指数编制与空间特征[J].经济学(季刊),2020,19(04):1401-1418.时间跨度：省级和城市级指数时间跨度为2011-2
阅读更多2024-12-14
GESP202412 四级【Recamán】题解（AC）
a11ak−1−kkakak−1−kak−1k小杨想知道 Recamán 数列的前n项从小到大排序后的结果。手动计算非常困难，小杨希望你能帮他解决这个问题。
阅读更多2024-12-14
IDEA遇到EasyConnect中的网络资源无法访问的问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.csdn.net/wanshanyu_/article/de
阅读更多2024-12-14
双目摄像头标定方法
此时已经完成标定，左下角为反投影误差，右边为外参可视化。将双目左右目拍的图像上传（左右目最好不少于20张）此时回到主页面，即可看到成功导出。把这些误差大的删除即可。
阅读更多2024-12-14
Servlet、omcat服务器架构与工作原理
Servlet是运行在服务器端的Java程序，它的主要职责之一是接收并处理来自客户端（如浏览器）的HTTP请求。当客户端发送一个请求到服务器时，Servlet可以解析请求中的信息，例如请求的URL路径
阅读更多2024-12-14
Vue生命周期钩子函数：深入解析与实践
作为高级Vue前端开发人员，对Vue组件的生命周期钩子函数有着深刻的理解是至关重要的。生命周期钩子函数是指在Vue组件的创建、更新、销毁等过程中，Vue自动调用的一系列方法。通过这些钩子函数，我们可以
阅读更多2024-12-14
安卓开发--使用android studio发布APP
app发布
阅读更多2024-12-14
数据结构与算法学习笔记----拓扑排序
@ author: 明月清了个风。
阅读更多2024-12-14
python 将数据保存到现有的Excel文件的新工作表
out_file = ‘query.xlsx’df1 = pd.DataFrame(out_data)若直接写入：df1.to_excel(out_file, index=False, sheet_n
阅读更多2024-12-14