JavaScript案例——07敏感词过滤

1.1 实现css的效果图

<style>
    input{
      width: 300px;
      height: 200px;
    }
</style>
  
<h1>敏感词过滤</h1>
<p>
    <textarea name = "" id="area" cols="30" rows="10"></textarea>
</p>
<p>
    <button>发布</button>
</p>
<p>
    <textarea name = "" id="res" cols="30" rows="10"></textarea>
</p>

2.1 第一步要实现的是数据的传输

2.1.1 先获取值

let area = document.getElementById("area");
let button = document.getElementsByTagName("button");
let res = document.getElementById("res");

2.1.2 点击事件的触发

button[0].onclick = function (){}

2.1.3 实现信息匹配

使用replace（）函数，并赋值给第二个文本框

运用正则表达式，/.. |.. |.. /g

res.innerHTML = area.value.replace(/'嘻|略|抢'/g,“*”)；

2.1.4 实现一个字一个*的匹配

res.innerText = area.value.replace(/小人|证据|嘻嘻/g,input =>{
        let str = '';
        for(let i = 0; i<input.length;i++){
          str += '*';
        }
        return str;
});

textarea可以使用value进行赋值，也可以使用.innerHTML进行赋值，结果是一样的。但是如果在网页中文本区输入新的内容，.innerHTML是获取不了新输入的内容的，只能获取原有赋值；此时.value是可以获得网页文本区的全部内容的。

资料来源：20个JavaScript经典案例_哔哩哔哩_bilibili