博主介绍

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

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

文章目录

简介：这是一篇有关【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>