vue实现敏感词屏蔽

Vue 实现敏感词屏蔽的方法

敏感词屏蔽是前端开发中常见的需求，可以通过多种方式在 Vue 中实现。以下是几种常见的方法：

使用计算属性过滤敏感词

通过计算属性动态过滤敏感内容，结合正则表达式替换敏感词：

export default {
  data() {
    return {
      inputText: '',
      sensitiveWords: ['敏感词1', '敏感词2', 'xxx']
    }
  },
  computed: {
    filteredText() {
      let result = this.inputText
      this.sensitiveWords.forEach(word => {
        const regex = new RegExp(word, 'gi')
        result = result.replace(regex, '*')
      })
      return result
    }
  }
}

使用自定义指令实现输入时过滤

创建自定义指令在输入时实时过滤敏感词：

Vue.directive('filter', {
  bind(el, binding) {
    el.addEventListener('input', (e) => {
      const words = binding.value || ['默认敏感词']
      let text = e.target.value
      words.forEach(word => {
        const regex = new RegExp(word, 'gi')
        text = text.replace(regex, '*')
      })
      e.target.value = text
    })
  }
})

使用过滤器全局处理

创建全局过滤器处理敏感词：

Vue.filter('filterWords', function(value) {
  if (!value) return ''
  const sensitiveWords = ['敏感词1', '敏感词2']
  let result = value
  sensitiveWords.forEach(word => {
    const regex = new RegExp(word, 'gi')
    result = result.replace(regex, '*')
  })
  return result
})

结合后端API验证

对于更严格的敏感词验证，可以结合后端API：

methods: {
  async checkSensitiveContent(text) {
    try {
      const response = await axios.post('/api/check-sensitive', { text })
      return response.data.cleanText
    } catch (error) {
      console.error('敏感词检查失败', error)
      return text
    }
  }
}

使用第三方库

考虑使用成熟的敏感词过滤库如bad-words：

import Filter from 'bad-words'
const filter = new Filter()

export default {
  methods: {
    cleanText(text) {
      return filter.clean(text)
    }
  }
}

实现时的注意事项

敏感词列表应定期更新，确保覆盖新的敏感词汇

对于中文敏感词处理，需要考虑分词和模糊匹配

在前端实现的同时，后端也应进行验证，防止绕过前端检查

敏感词替换符号可以根据需求自定义，如*、※※※等

对于大量文本处理，考虑性能优化，避免频繁的正则匹配