Vue实现搜索关键字标红高亮加粗

Posted 2023-01-06 水香木鱼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue实现搜索关键字标红高亮加粗相关的知识，希望对你有一定的参考价值。

博主介绍

📢点击下列内容可跳转对应的界面，查看更多精彩内容！

🍎主页：水香木鱼
🍍专栏：后台管理系统

文章目录

简介：这是一篇有关【Vue实现搜索关键字标红高亮加粗】的文章，博主用最精简的语言去表达给前端读者们。

详细注释，已在文下注明

1、核心代码

  keySign(title) 
      let s = this.value; // 搜索框的值(您要标红的关键字)
      var str = title; // 列表标题(原文本)

      // 去除中间空格且字符之间用逗号隔开
      let inputvalue = s.replace(/\\ +/g, ","); // 把空格分开的字符串转换成以逗号分割
      let keyWordArr2 = inputvalue.split(","); // 把字符串分割转换成数组(方便截取)
      // 判断文本段落(原文本)是否为空
      if (str && str != "") 
        // 遍历分割后的字符串
        keyWordArr2.forEach((e) => 
          let regStr = "" + `($e)`;
          let reg = new RegExp(regStr, "g");
          // 如果匹配成功则抛出关键字DOM
          // TIPS: 这块您可以自定义标签可根据您的需求自定义样式
          str = str.replace(
            reg,
            '<span style="color:#fff;font-weight: bold;background-color: red;">' +
              e +
              "</span>"
          ); // 改变搜索关键字颜色为红色
        );
      
      return str;
    ,

2、完整代码

<template>
  <div>
    <!-- 搜索框 -->
    <section>
      <input v-model="value" />
      <span>
        当前要标红的关键字：<b> value </b></span
      >
    </section>
    <!-- END -->

    <!-- 列表 -->
    <section v-for="(item, index) in list" :key="index" class="content">
      <div>
        <span v-html="keySign(item.title)"></span>
      </div>
      <hr />
      <p>其他内容...</p>
    </section>
    <!-- END -->
  </div>
</template>

<script>
export default 
  data() 
    return 
      handleStatus: false,
      // 搜索框的值(您要标红的关键字)
      value: "",
      // 模拟假数据列表
      list: [
         id: 1, title: "中心化交易所如何用Merkle Tree实现资产储备证明" ,
         id: 2, title: "针对以太坊实现的一种Sparse Merkle Tree" ,
         id: 3, title: "从零开始设计并实现HDMI显卡" ,
         id: 4, title: "一文读懂Docker原理" ,
         id: 5, title: "区块链钱包安全指南" ,
      ],
    ;
  ,

  methods: 
    /**
     * 标红关键字
     * @description 可自定义HTML结构
     * @param String title - 列表标题
     * @return void
     */
    keySign(title) 
      let s = this.value; // 搜索框的值(您要标红的关键字)
      var str = title; // 列表标题(原文本)

      // 去除中间空格且字符之间用逗号隔开
      let inputvalue = s.replace(/\\ +/g, ","); // 把空格分开的字符串转换成以逗号分割
      let keyWordArr2 = inputvalue.split(","); // 把字符串分割转换成数组(方便截取)
      // 判断文本段落(原文本)是否为空
      if (str && str != "") 
        // 遍历分割后的字符串
        keyWordArr2.forEach((e) => 
          let regStr = "" + `($e)`;
          let reg = new RegExp(regStr, "g");
          // 如果匹配成功则抛出关键字DOM
          // TIPS: 这块您可以自定义标签可根据您的需求自定义样式
          str = str.replace(
            reg,
            '<span style="color:#fff;font-weight: bold;background-color: red;">' +
              e +
              "</span>"
          ); // 改变搜索关键字颜色为红色
        );
      
      return str;
    ,
  ,
;
</script>

<style scoped>
/* 样式根据您的需求写即可 */
.content 
  background: rgb(169, 186, 202);
  padding: 10px;
  margin-bottom: 20px;
  margin-top: 10px;

</style>

Vue实现搜索关键字标红高亮加粗

博主介绍

文章目录

1、核心代码

2、完整代码

相关推荐