vue 敏感词过滤 前端

vue 敏感词过滤 前端

根据正则来进行过滤 敏感词是一个数组 词比较多 专门存放在js文件里面 vue用 export 导出 再引入到需要用的组件里

judgeBadWord(obj) {
   
      let word = words.words //获取敏感词的数组
      //进行遍历
      for (let i=0;i<word.length;i++) {
   
        /*替换全部空格*/
        // let arr = obj.replace(/\s+/g,"")
        this.contents = obj
        //gi g全局  i不分大小写
        let reg = new RegExp(word[i],"gi")
        //用indexOf 判断是否包含
        if(this.contents.indexOf(word[i]) !== -1){
   
          let result = this.contents.replace(reg,"***")
          this.contents = result
          return true
        }
      }
    }
    //在发送消息时进行调用就行了

刚开始这样写以为没啥问题 但是当同一句话中出现多个不同敏感词时 后面的会过滤不掉 进行改进了一下

judgeBadWord(str,badWord){
   
		//trim() 方法不会改变原始字符串 去掉首尾空白符
          this.contents = str.trim()
          var re = ''
          //正则过滤 模版字符串 \b 是一个整单词
          for(var i=0;i<badWord.length;i++){
   
            if(i==forbiddenArray.length-1)
            re += `\\b${
     badWord[i]}\\b`
            else
            re += `\\b${
     badWord[i]}\\b`+"|"
          }
          var reg = new RegExp(re,"gi")
          this.contents=this.contents.replace(reg,"***")
          return this.contents
        }

到这了以为可以结束了 可是敏感词里有 两个英语单词组成
hellow 是敏感词 hellow word 也是敏感词 输入hellow word 的时候 helllow会变成*** word不会 不能自己去把数组里面的字符串自己调位置吧
就 把数组进行了 排序

    //这里用map可以进行链式调用 字符串的length 从高到低排序
	let word = words.words
    this.rtn = word.map(i => ({
   raw: i, len: i.length}))
                .sort((p, n) => n.len - p.len)
                .map(i => i.raw)

只是记录一下 其中性能方面还可以优化一下 不足之处 还请多多关照！！！！