描述: 回车发言, 将规定好需要过滤的词替换成**，两个字替换成**，三个字替换成***
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>过滤敏感词</title>
<style>
*{
list-style: none;
}
li{
height: 30px;
}
input{
border: none;
outline: none;
box-sizing: border-box;
border: 1px solid #464451;
padding: 5px 10px;
}
</style>
</head>
<script>
window.onload = function(){
// 回车发言 onkeyup keyCode
// 过滤 将规定好的词替换成*** replace 规定好的词--->正则 一个字符变成一个*
// 1.获取input和div面板
var input = document.getElementsByTagName('input')[0];
var panel = document.querySelector('#panel');
console.log(input, panel);
// 2.定义敏感词
var reg = /走光|色情|肉欲|美腿|自摸|坐台|捆绑|*|打倒|*|*|*|*/g;
// 3.获取键盘事件, 如果回车键抬起, 过滤
document.onkeyup = function(evs){
// 获取事件对象
var ev = window.event || evs;
// console.log(ev.keyCode, 'up');
// 如果按下回车键, 进行过滤
if(ev.keyCode == 13){
// alert('Filter!');
// 3.1.获取输入框输入的内容
var searchContent = input.value;
// console.log(searchContent);
// 3.2.判断输入的内容在敏感词数组中是否存在, 查找search, 替代replace
// console.log(searchContent.search(reg));
if(searchContent.search(reg)!== -1){
// 查找到字符几位, 就用几位数来替代
searchContent = searchContent.replace(reg, function(ev){
var str = "";
for(var i=0; i < ev.length; i++){
str += "*";
}
return str;
});
}
// 添加节点li
var li = document.createElement('li');
// 给新节点添加内容
li.innerHTML = searchContent;
// 将新的li添加至panel
panel.appendChild(li);
// 将input的内容置为空
input.value = '';
}
}
}
</script>
<body>
<!-- 1.布局 -->
<input type="text" name="search" id="search" placeholder="Search"> 回车发言
<ul id="panel"></ul>
</body>
</html>