vue3+TS前端JS实现搜索关键词变红

最新推荐文章于 2024-09-10 15:17:20 发布

黑暗中跳舞的月亮

最新推荐文章于 2024-09-10 15:17:20 发布

阅读量935

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/Seven_Amber/article/details/133026594

博客提到网上搜索的处理方式在实际使用中，对汉字和数字匹配正常，但有字母时会异常替换，原因是替换的html代码里字母被识别和标红替换，最后改用针对单字匹配和字符串匹配的另一种处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

起初在网上搜索获得的处理方式大都是类似这种：

但是实际使用中发现，对于汉字和数字是没有问题的，但是如果有字母就会出现问题。

1.只有汉字和数字的时候：匹配正常。

2.当有字母的时候：异常替换。

原因：第二次判断的时候，替换的html代码里面的字母也做了识别和标红替换

最后做了调整改用另一种方式，针对单字匹配和字符串匹配两种处理：

展示：

<li v-html="brightenKeyword('123abcd张三李四')"></li>

处理：

 const brightenKeyword = (contentText) => {
    //单字匹配时将文字标红
    let res = contentText;
    if (searchKey.value == '') {
      return res;
    } else {
      let wordsArray = contentText.split('');
      for (var i = 0; i < wordsArray.length; i++) {
        if (searchKey.value.includes(wordsArray[i])) {
          wordsArray[i] = "<span style='color: red;'>" + wordsArray[i] + '</span>';
        }
      }
      res = wordsArray.join('');
      return res;
    }
  };

  // const brightenKeyword = (contentText) => {
  //   // 字符串整串匹配时：仅需要当前方法
  //   let res = contentText; //res的初始值是不带任何红色格式的
  //   const Reg = new RegExp(searchKey.value, 'g');
  //   res = contentText.replaceAll(Reg, `<span style="color: red;">${searchKey.value}</span>`);
  //   return res;
  // };