vue js给字符串中包含的部分字符串加样式

最新推荐文章于 2024-09-06 11:40:11 发布

超小盆友的媳妇儿

最新推荐文章于 2024-09-06 11:40:11 发布

阅读量5.3k

点赞数 3

分类专栏： vue.js 文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_37642495/article/details/110921005

版权

vue.js 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

            let searchStr = this.formInline.logId, // 需要特殊样式的字符串
              srtEndIndex = 0,
              srtStartIndex = 0,
              newStr = ''
            data.forEach((item) => {  // 后端返回的列表数据
              if (item.indexOf(searchStr) > -1) {
              srtEndIndex = item.indexOf(searchStr) + searchStr.length
              srtStartIndex = item.indexOf(searchStr)
              newStr =
                item.substring(0, srtEndIndex) +
                '</span>' +
                item.substring(srtEndIndex)
              newStr =
                newStr.substring(0, srtStartIndex) +
                '<span style="color:#e6a23c">' +
                newStr.substring(srtStartIndex)
              } else {
                newStr = item
              }

              this.list.push(newStr)
            })

一看代码都能懂的起在这里存下以后万一用的到哈哈哈！

发现上面的好麻烦有简单办法就把选中的字符串用样式标签加字符串给替换掉就可

   // item 为总字符串  source为原字符串  newStr为加上样式标签后的字符串
    replaceAll(item, sourceStr, newStr) {
      let reg = new RegExp(sourceStr, 'g') //g,表示全部替换。
      return item.replace(reg, newStr)
    },

              // searchStr 是个变量 就是需要加样式的字符串
              if (item.indexOf(searchStr) != -1) {
                newStr = this.replaceAll(
                  item,
                  searchStr,
                  '<span style="color:#e6a23c">' + searchStr + '</span>',
                )
                console.log(newStr)
              } else {
                newStr = item
              }

好啦好啦记录一下下嘿嘿嘿~~~~~