搜索信息高亮显示（记录）

最新推荐文章于 2024-08-22 14:32:34 发布

liht~

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量85

点赞数 3

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/weixin_63132926/article/details/141326312

版权

先看效果：

1.封装一个控制高亮的函数。

textItem是当前要过滤的内容，searchText是需要高亮的内容

//高亮函数封装
const textHighlighting = (textItem, searchText) => {
  if (!searchText) return textItem;
  const isTrue = textItem.includes(searchText); //判断是否包含需要高亮的文字
  const result = ref(null);
  if (isTrue) {
    var reg = new RegExp(searchText, "g");  // 创建正则表达式
    //这里使用replace方法，替换需要高亮的文字为span标签，然后把span标签的样式设置为高亮样式
    // replace方法返回一个新的字符串，不会改变原来的字符串
    // replace方法第一个参数是正则表达式
    // replace方法第二个参数可以传函数，函数的返回值就是替换后的值，我这里直接传的结构
    result.value = textItem.replace(
      reg,
      `<span style="color:#94cc61;">${searchText}</span>`
    );
  } else {
    result.value = textItem;
  }
  return result.value;
};

2.在结构中使用

<div class="contentItem" v-for="(item, index) in list1" :key="index">
   <div class="classP">
      <div class="classTittle">链接：</div>
      <span class="classSpan" v-html="textHighlighting(item.url, inputValue1)"></span>
   </div>
</div>

效果实现，在此记录