我们前端在开发评论留言模块的时，有可能会遇到一些用户不小心输入了一些辱骂别人的话，如果我们这个时候不做任何限制直接发送给后端，让后端存在数据库，我们前端拿到在进行展现给用户查看，这是一种对用户十分不友好不雅观的行为，所以我们今天来实现过滤文本脏字
页面结构
我们这里需要有一个文本域，用于让用户输入他们想输入的内容，有一个按钮用于提交我们文本域中的内容，按钮绑定了一个点击事件，当我们点击提交后，会对其内容进行过滤脏字的处理，还有个展示内容的元素，里面展示的是我们过滤完脏字后的内容，我们使用或逻辑运算符中断运算的特性对其显示内容进行判断，如果没有要显示的内容则显示暂无内容，如果有则显示过滤完脏字后的内容
<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; } },
坚持努力，无惧未来！
