vue/html中实现敏感词屏蔽

效果如下，实现完整代码在后面

实现思路分析
这是在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>

如果这篇文章对你有帮助点赞个鼓励一下呗，介绍的比较粗略，有问题欢迎留言交流