<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
</style>
<body>
<input type="text">回车发言
<ul></ul>
<script>
// 效果描述: 在输入框中输入内容,按下回车键,将内容中不可显示内容过滤后显示在页面下方
// 获取元素
var inp = document.getElementsByTagName('input')[0];
var ul = document.getElementsByTagName('ul')[0];
console.log(inp, ul);
var reg = /今天|星期|放假/g;
// 添加事件
document.onkeydown = function (evs) {
var ev = window.event || evs;
console.log(ev.keyCode);
if (ev.keyCode == 13) {
var text = inp.value;
console.log(text);
// 过滤器中的不显示内容
ul.innerHTML += ' <li> '+ (text.replace(reg, function(aa){
console.log(aa);
var str = '';
for(var i = 0; i < aa.length; i++){
console.log('*');
str += '*';
}
return str;
})) + '</li>';
}
}
</script>
</body>
</html>