记录一次element ui+ Vue 下的实现文本中关键字添加背景颜色

最新推荐文章于 2023-09-22 22:22:37 发布

good good smile

最新推荐文章于 2023-09-22 22:22:37 发布

阅读量1k

点赞数

文章标签： js 字符串

本文链接：https://blog.youkuaiyun.com/weixin_44055310/article/details/114776919

版权

实现效果如图，根据违规词，在文本中查找并添加背景颜色
思路是：首先尝试了es6的新语法。这个东西连函数都能往里放，本来是指望能在其中直接添加html标签的形式实现可惜失败了，有时间再试试。
第一步是匹配字符串中的关键字，js中有一个常用的split方法：split() 方法用于把一个字符串分割成字符串数组并返回关键字。如匹配“最好” 则 “将心比心，没有最好只有更好” =》[ “将心比心，没有”, “只有更好” ]。
然后将数组两个值一起显示并在中间再插入关键字给其包裹并添加样式即可

      <el-table-column label="违规内容" prop="text">
        <template slot-scope="scope">
          {{scope.row.text[0]}}<i v-show="scope.row.text.length !== 1" style="background-color: #ef7777">{{scope.row.keywords}}</i>{{scope.row.text[1]}}
        </template>
      </el-table-column>

但有两个考虑： 1.如果字符串中没有关键字则数组中只有一个值，（如果关键字在串头串尾则会生成一个空值的数组）
如匹配“没有”，则在第一位为空串

2.如果本来没有关键字，可是你在文本中却强行显示了那么字符串内容就多了。解决方案是在处理数据的值后，根据数组长度是否为1来判断关键字是否显示如上代码显示 scope.row.text.length !== 1 说明文本中存在关键字，则进行显示。