搜索关键字高亮，兼容小程序h5

最新推荐文章于 2023-05-05 17:35:51 发布

陈大左

最新推荐文章于 2023-05-05 17:35:51 发布

阅读量218

点赞数

分类专栏： javascript 文章标签：小程序 javascript 前端

本文链接：https://blog.csdn.net/c347087870/article/details/129083081

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章介绍了如何在公司的搜索业务中实现关键字高亮功能，同时兼容小程序和H5。通过使用正则表达式进行文本替换以及将关键字转换成数组的方法，动态地在文本中插入样式标签以达到高亮效果。在模板中使用v-for遍历处理后的数据，并应用不同样式来区分高亮部分。

摘要由CSDN通过智能技术生成

公司的搜索业务需要关键字高亮功能，但需要兼容小程序和h5功能

网上搜了一些都是利用replace替换来实现的，但这样不能兼容小程序

export function hightLight (keyWord: string, suggtion: string) {
    // 使用 regexp 构造函数，因为这里要匹配的是一个变量
    const reg = new RegExp(keyWord, 'ig')
    const newSrt = String(suggtion).replace(reg, function (p) {
      return '<span style={color: red}>' + p + '</span>'
    })
    return newSrt
  }

自己有找到了一些可以兼容小程序和h5的写法就是把关键字转换成数组，偶数是高亮，奇数是正常字

export const filterHighlight = (str, highlight) => {
  //过滤高亮文字 字符串 转成数组
  let reg = new RegExp('(['+highlight+'])', 'g');
  let result = {};
  let currentIndex = 0;
  let returnData = [];
  while ((result = reg.exec(str))) {
    returnData.push(str.slice(currentIndex, result.index));
    returnData.push(result[1]);
    currentIndex = result.index + result[0].length;
  }
  if (str.length > currentIndex) {
    returnData.push(str.slice(currentIndex, str.length));
  }
  return returnData
}

<template>
  <text>
    <text
      :class="index % 2 !== 0 ? 'hightLight' : ''"
      v-for="(item, index) of hightLight"
      :key="index"
      >{{ item }}</text
    >
  </text>
</template>

<script>
import { filterHighlight } from "@/utils/index.js";
export default {
  props: {
    text: {
      type: String,
      default: "",
    },
    searchValue: {
      type: String,
      default: "",
    },
  },
  
  data() {
    return {};
  },
  computed:{
	hightLight:function(){
		return filterHighlight(this.text, this.searchValue)
	}
  }
};
</script>

<style lang="scss" scoped>
.hightLight {
  color: #1551e9;
}
</style>