vue全局注册过滤器 自动化引入 前端过滤敏感词 vue filter 脱敏

目录结构

在filters下的index.js中写如下代码

import Vue from 'vue'//引入vue
const directives = require.context('../filters', true, /(?<!index)\.js$/); //实现自动化导入 文件路径，是否遍历子目录，正则匹配
directives.keys().map(item => {//在名字中遍历
  const componentConfig = directives(item)//文件内容
  const name = item.replace('./', '').replace(".js", '')//文件名字替换掉./和后缀.js
  Vue.filter(name,(e)=>componentConfig.filter(e))//vue中注册自定义指令
  console.log(componentConfig.filter);
})

desensitization.js文件中写

import filterData from './a.json'//引入需要被过滤掉的词 文件在下面
export const filter = function (value) {//定义方法
  if (value) {//如果传入值不为空则进入
    value = JSON.parse(JSON.stringify(value))//将value进行深拷贝
    filterData.map(item => {//对过滤的词汇进行遍历
      if (value.includes(item)) {//如果过滤的词汇在传入值中
        let l="*"//定义一个*
        for(let i = 1;i < item.length;i++){//遍历过滤词汇长度
          l+='*'//让替换的长度等于被替换的长度
        }
        value =value?.replaceAll(item, l)//进行替换
      }
    })
    return value//如果不为空就返回处理后的值
  }
  return value//没处理也需要返回
}

a.json 需要过滤的词的数组 网上扒一个 违规不能发

[
  "ni ma si le",
]

在想要使用过滤器的地方写

{{title|desensitization}}//template里面这样使用过滤器

引入自动化文件

import './filters/index'；在main.js中引入自动化的文件

最终效果过滤后