vue实现敏感词屏蔽

实现敏感词屏蔽的方法

使用正则表达式过滤敏感词

在Vue中可以通过正则表达式匹配敏感词并进行替换。创建一个敏感词数组，使用正则表达式全局匹配并替换为特定字符（如*）。

const sensitiveWords = ['敏感词1', '敏感词2', '敏感词3'];
const regex = new RegExp(sensitiveWords.join('|'), 'gi');

function filterText(text) {
  return text.replace(regex, '*');
}

利用计算属性实时过滤

在Vue组件中，可以利用计算属性实时监控输入内容并过滤敏感词。适用于输入框或文本展示场景。

computed: {
  filteredContent() {
    return filterText(this.content);
  }
}

后端配合过滤

前端过滤可能存在绕过风险，建议结合后端进行二次验证。前端发送数据到后端前，先进行初步过滤；后端接收后再次校验并返回处理结果。

axios.post('/api/check', { content: this.filteredContent })
  .then(response => {
    if (response.data.hasSensitiveWord) {
      alert('包含敏感词，请修改');
    }
  });

使用第三方库

现有开源库如bad-words可直接集成，提供更全面的过滤功能。安装后可直接调用其过滤方法。

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

filter.clean('包含敏感词的文本'); // 返回过滤后的文本

注意事项

• 敏感词库需要定期更新以适应新出现的词汇。
• 前端过滤不可替代后端验证，需两者结合确保安全性。
• 对于大规模文本处理，考虑使用Web Worker避免界面卡顿。