vue 搜索文字高亮方法

最新推荐文章于 2024-07-15 09:51:11 发布

GracieLaw

最新推荐文章于 2024-07-15 09:51:11 发布

阅读量350

点赞数

分类专栏：前端文章标签： vue js

本文链接：https://blog.csdn.net/GracieLaw/article/details/111644471

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

这篇博客详细探讨了前端开发中的Vue框架应用，深入解析了其组件化开发的优势，并通过实例展示了如何进行状态管理。同时，文章还提及了后端开发中的微服务架构和数据库优化策略，强调了Python在数据处理中的重要作用。

摘要由CSDN通过智能技术生成

      // item 高亮字段所属对象
      // matchStr 高亮匹配词
      // needStr 需要高亮的字符串
      // newKeyName 新增需要含高亮字段属性名
    highlightWord (item, matchStr, needStr, newKeyName) {
      matchStr = matchStr.replace(/\s*/g, '')
      needStr = needStr.replace(/\s*/g, '')
      item[newKeyName] = ''
      let idArr = []
      for (let i = 0; i < needStr.length; i++) {
      	// 单字匹配
        // for (let ii = 0; ii < matchStr.length; ii++) {
        //   if (needStr[i].toUpperCase() === matchStr[ii].toUpperCase()) {
        //     idArr.push(i)
        //   }
        // }
      	// 全匹配
        if (needStr.substring(i, i + matchStr.length).toUpperCase() === matchStr.toUpperCase()) {
          for (let ii = 0; ii < matchStr.length; ii++) {
            idArr.push(i + ii)
          }
        }
      }
      for (let i = 0; i < needStr.length; i++) {
        let str = needStr[i]
        if (idArr.includes(i)) {
          str = '<span class="redColor">' + needStr[i] + '</span>'
        }
        item[newKeyName] += str
      }
    },