redisson 布隆过滤器(校验唯一性)

代码如下:

<template>
  <button @click="highLight">点击高亮替换</button>
  <div style="margin-top: 20px">原始数据</div>
  <div >{
   
   {originData}}</div>
  <div style="margin-top: 20px">替换后的数据</div>
  <div v-if="searchResult" v-html="searchResult"></div>

</template>
<script setup>
import {
      
      reactive, ref} from "vue";

// 要高亮显示的部分
const highLightFont = ref('jjw')

// 要替换成的样式
// const highLightData = ref('<span class="active">'+highLightFont.value+'</span>')
const highLightData = ref('<span style="color: red" class="active">'+highLightFont.value+'</span>')
// 替换后的结果
const searchResult = ref('')
// 要替换的原字符串
const originData = ref('jjw你好啊,Jjw咋样呀,JJw可别压力太大了')
const highLight = ()=>{
      
      
  // 'gi':g全部替换,i忽略大小写,
  const re = new RegExp(highLightFont.value, 'gi') 
  searchResult.value = originData.value.replace(re, highLightData.value)
}
</script>

<style scoped lang="less">
:deep(.active){
      
      
  color: red;
}
</style>

显示结果如下:

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/xieedeni/article/details/129861353