<template>
  <div class="home">
    <h1>筛选文字高亮</h1>
    <!-- <div v-html="brightenKeyword(list, text)"></div> -->
    ---------------------------------------------------------------
    <br />
    <div>
      切换显示文本:
      <button @click="isshow = true">原文本</button>
      <button @click="isshow = false">匹配文本</button>
    </div>
    <input type="text" @keyup.enter="getMachlist" v-model="wordage" placeholder="请输入关键字" />
    <input type="button" @click="getMachlist" value="确定" />
    <div style="" v-for="item in machlist" :key="item.id" v-html="item.title"></div>
  </div>
</template>

<script>
export default {
  name: "AsdHomeView",

  data() {
    return {
      // //全部列表
      list: [
        {
          id: 1,
          title: "qwe RTY uio ASD fgh ZXC",
        },
        {
          id: 2,
          title: "QWE rty UIO asd ZXC",
        },
        {
          id: 3,
          title: "君不见黄河之水天上来，奔流到海不复回。",
        },
        {
          id: 4,
          title: "君不见高堂明镜悲白发，朝如青丝暮成雪。",
        },
        {
          id: 5,
          title: "人生得意须尽欢，莫使金樽空对月。",
        },
        {
          id: 6,
          title: "天生我材必有用，千金散尽还复来。",
        },
        {
          id: 7,
          title: "烹羊宰牛且为乐，会须一饮三百杯。",
        },
        {
          id: 8,
          title: "岑夫子，丹丘生，将进酒，杯莫停。",
        },
        {
          id: 9,
          title: "与君歌一曲，请君为我倾耳听。",
        },
        {
          id: 10,
          title: "钟鼓馔玉不足贵，但愿长醉不愿醒。",
        },
        {
          id: 11,
          title: "古来圣贤皆寂寞，惟有饮者留其名。",
        },
        {
          id: 12,
          title: "陈王昔时宴平乐，斗酒十千恣欢谑。",
        },
        {
          id: 13,
          title: "主人何为言少钱，径须沽取对君酌。",
        },
        {
          id: 14,
          title: "五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。",
        },
      ], //全部列表
      machlist: [], // 匹配列表
      wordage: "", //搜索框输入的值
      isshow: true//是否显示原文本
    };
  },
  mounted() {
    // 打开页面获取数据
    this.getMachlist();
  },
  watch: {
    // 文字清空时调用
    wordage() {
      if (this.wordage === "") {
        this.getMachlist();
      }
    },
    isshow(){
      this.getMachlist();
    }
  },
  methods: {
    // 模糊查询 高亮匹配
    getMachlist() {
      // 去除恶意输入代码片段的可能
      let value = this.wordage.replace(/<.*?>/gi, "");

      // 模糊查询 只保留符合条件的数据
      let resultList = [];
      this.list.forEach((item) => {
        if (
          //  英文大小写数据进行判断 toUpperCase 大写  toLowerCase 小写
          item.title.indexOf(value.toUpperCase()) > -1 ||
          item.title.indexOf(value.toLowerCase()) > -1
        ) {
          resultList.push(item);
        }
      });

      // 修改高亮文案
      let dataList = [];
      // 声明正则校验  (正则表达式,"匹配模式")  /gi(全文查找、忽略大小写)
      const reg = new RegExp(value, "gi");
      // 循环遍历  this.list 使用数据进行渲染  resultList 使用只符合条件的数据
      if (this.isshow) {
        this.list.forEach((item) => {
          let obj = {
            id: item.id,
            title: item.title.replace(
              reg,
              //筛选出来的文字加样式
              (val) => `<span style='color:red'>${val}</span>`
            ),
          };
          dataList.push(obj);
        });
      } else {
        resultList.forEach((item) => {
          let obj = {
            id: item.id,
            title: item.title.replace(
              reg,
              //筛选出来的文字加样式
              (val) => `<span style='color:red'>${val}</span>`
            ),
          };
          dataList.push(obj);
        });
      }
      // 赋值
      this.machlist = dataList;
    },
  },
};
</script>

<style  scoped>
.home {
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
</style>