网页前台通过js非法字符过滤代码(骂人的话等等)

网页前台通过js非法字符过滤代码的主要目的是防止用户输入一些恶意字符或代码，从而保护网站的安全，提高用户体验。本文将整理出一份完整的攻略，以实现该功能。

步骤一：准备过滤规则列表

在实现非法字符过滤功能前，需要准备好一份过滤规则列表，包括所有需要过滤的字符、字符串、HTML标签等。例如：

var illegalChars = ["fuck", "shit", "<script>", "<iframe>"];

步骤二：编写过滤函数

接下来需要编写一个函数，来判断用户输入是否包含非法字符。可以使用JavaScript的字符串方法indexOf()来实现。示例代码如下：

function checkInput(str) {
  for(var i = 0; i < illegalChars.length; i++) {
    if(str.indexOf(illegalChars[i]) != -1) {
      return false;
    }
  }
  return true;
}

该函数使用一个for循环来遍历所有非法规则列表中的字符，如果用户输入的字符串中包含任何一个非法字符，那么返回false，否则返回true。

步骤三：绑定事件

最后，需要将该函数绑定到需要输入的控件上。（如textarea, input等）。当用户在该控件上输入内容的时候会自动调用该函数进行非法字符过滤。示例代码如下：

document.getElementById("input-box").addEventListener("input", function(){
  if(!checkInput(this.value)) {
    alert("输入内容包含非法字符，请重新输入。");
    this.value = "";
  }
});

该代码使用addEventListener()方法将checkInput()函数绑定到一个ID为"input-box"的文本输入框上。当用户在该输入框上输入内容时，会自动调用checkInput()来判断内容中是否包含非法字符，如果包含，则清空输入框，并弹出警告信息。

通过以上三个步骤，我们就可以完成网页前台通过js非法字符过滤代码的实现，并保护网站的安全。