效果如下,实现完整代码在后面
实现思路分析
这是在vue的页面的使用,如果在html中的引用,也差不多,首先,得定义方法judgeBadWord()来进行敏感词的匹配,以及获取到输入框的值,来和敏感词进行必对
这里我是将敏感词库单独拿出来放在js中,当然屏蔽词少的话只需定义个数组就行
如下将完整代码中的这行注释掉
this.forbiddenArray=forbiddenArray.forbiddenArray;
把这行代码的注释去掉就可以
// var forbiddenArray = ["fuck", "tmd", "他妈的","小孩"];
因为涉及到vue中外部引入的方法,这几介绍一下引入方式
创建badWord.js
在页面中引入
<script>
import forbiddenArray from "../static/js/BadWord.js";
</script>
完整实现代码如下
<template>
<div>
<input v-model="inputContent"/>
<input type="button" value="屏蔽敏感词" @click="judgeBadWord()">
<span v-text="showInput"></span>
</div>
</template>
<script>
import forbiddenArray from "../static/js/BadWord.js";
export default {
data (){
return{
inputContent:"",
showInput:"",
contents:"",
forbiddenArray:[]
}
},
methods:{
judgeBadWord() {
// var forbiddenArray = ["fuck", "tmd", "他妈的","小孩"];
// var destString = trim(str);
this.forbiddenArray=forbiddenArray.forbiddenArray;
// alert(forbiddenArray[1])
var re = '';
for(var i=0;i<forbiddenArray.length;i++){
if(i==forbiddenArray.length-1)
re+=forbiddenArray[i];
else
re+=forbiddenArray[i]+"|";
}
//定义正则表示式对象
//利用RegExp可以动态生成正则表示式
var pattern = new RegExp(re,"gi");
this.showInput=this.inputContent.replace(pattern,"***")
if(pattern.test(this.inputContent)){
return false;
}else{
return true;
}
}
}
}
</script>
如果这篇文章对你有帮助点赞个鼓励一下呗,介绍的比较粗略,有问题欢迎留言交流