携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情

我们前端在开发评论留言模块的时，有可能会遇到一些用户不小心输入了一些辱骂别人的话，如果我们这个时候不做任何限制直接发送给后端，让后端存在数据库，我们前端拿到在进行展现给用户查看，这是一种对用户十分不友好不雅观的行为，所以我们今天来实现过滤文本脏字

页面结构

我们这里需要有一个文本域，用于让用户输入他们想输入的内容，有一个按钮用于提交我们文本域中的内容，按钮绑定了一个点击事件，当我们点击提交后，会对其内容进行过滤脏字的处理，还有个展示内容的元素，里面展示的是我们过滤完脏字后的内容，我们使用或逻辑运算符中断运算的特性对其显示内容进行判断，如果没有要显示的内容则显示暂无内容，如果有则显示过滤完脏字后的内容

  <div>
      <textarea
        cols="30"
        rows="10"
        v-model="dirtyVal"
      ></textarea>
      <button @click="holdDirty">提交</button>
    </div>
    <br/>
    <!-- 展示内容-->
 <div> 展示内容：{{fliterDirtyVal||'暂无内容'}}</div>

实现逻辑

我们定义三个数据，第一个数据通过v-model绑定在文本域中，第二个数据是过滤脏字后的内容，第三个是脏字列表，我们输入的内容和需要和他进行对比

 data() {
    return {
      //文本内容
      dirtyVal: "",
      // 过滤后的文本内容
      fliterDirtyVal: '',
    //   需要过滤的脏字
dirtyList:['妈的','滚','TM','SB','去死'],
    };

写一个替换脏字的方法

holdDirty(){
//获取到当前文本域中的输入值
    let  value=this.dirtyVal;
    //将脏字列表使用join方法结合|拼接成正则判断的字符串
    let dirtyRegText=this.dirtyList.join('|');
    //创建一个正则，匹配所有包含脏字的字段且不区分大小写
   let dirtyReg= new RegExp(dirtyRegText,'gi');
   //使用正则，将当前文本域中的值使用正则进行替换且重新存到value变量中
 value=  value.replace(dirtyReg,'**')
 //将替换过后的文本赋值给过滤后的文本内容变量，以此让页面展示过滤后的内容，可以看到我们是否替换成功
    this.fliterDirtyVal=value;
}
  },

坚持努力，无惧未来！

Vue过滤用户敏感词操作

页面结构

实现逻辑