vue实现过滤并且替换敏感词，将长字符串转化成...的形式，将秒转化成XX:XX的形式

150 阅读 0 评论 99 点赞

我是靠谱客的博主沉默金针菇，这篇文章主要介绍vue实现过滤并且替换敏感词，将长字符串转化成...的形式，将秒转化成XX:XX的形式，现在分享给大家，希望可以做个参考。

使用vue的全局过滤敏感词

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 铭感词过滤
export const judgeBadWord = (str) => {
  const badWord = JSON.parse(sessionStorage.getItem('list'))
  const newArr = []
  badWord.forEach(item => {
    newArr.push(
      {
        sensitiveWord: item.sensitiveWord,
        replaceWord: item.replaceWord
      }
    )
  })
  // trim() 方法不会改变原始字符串 去掉首尾空白符
  let contents = ''
  contents = str.trim()
  newArr.forEach(function (item, index, array) {
    if (contents.indexOf(item.sensitiveWord) != -1) {
      const reg = new RegExp(item.sensitiveWord, 'gi')
      contents = contents.replace(reg, item.replaceWord)
    }
  })
  return contents
}

badWord：是后台返回的敏感词字段，和敏感词需要替换成为什么

在这里插入图片描述

注册全局过滤器

在mian.js中注册全局过滤器

复制代码

1
2
3
4
5
6
import * as filters from './filters'
// 注册全局的过滤器
for (const key of Object.keys(filters)) {
  Vue.filter(key, filters[key])
}

在需要的页面中使用

复制代码

1
2
{{ scope.row.menuName|judgeBadWord() }}

不需要引入

附其他的过滤器

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
 * 将长字符串转化成...的形式
 * @param {Number} max 最多显示的字符串
 */
export const strOverflow = (value, max) => {
  if (!value) return ''
  const valueStr = value.toString()
  if (valueStr.length <= max) return valueStr
  return valueStr.substring(0, max) + '...'
}
/**
 * 将秒转化成XX:XX的形式
 */
export const formatSec = (value) => {
  const val = parseInt(value, 0)
  if (!val) return '00:00'
  let minute = parseInt(val / 60, 0)
  let second = val - minute * 60
  minute = minute < 10 ? `0${minute}` : minute
  second = second < 10 ? `0${second}` : second
  return `${minute}:${second}`
}