js 正则表达式过滤非法字符

在前端开发中，经常需要对用户输入的数据进行过滤和校验，以防止非法字符的出现。而其中一种常用的方式就是通过正则表达式来实现过滤和校验的操作。

正则表达式入门

正则表达式是一种描述字符串匹配规则的语法，由普通字符和特殊字符组成。例如，“abc”就是一个正则表达式，表示匹配字符串中的“abc”子串。

正则表达式中的特殊字符有很多，其中一些较为常见的有：

.：匹配除换行符以外的任意单个字符。
*：匹配前面的字符0次或多次。
+：匹配前面的字符1次或多次。
?：匹配前面的字符0次或1次。
[]：匹配括号中的任意一个字符。
{n}：匹配前面的字符n次。
{n,m}：匹配前面的字符至少n次，最多m次。

例如，正则表达式/ab+c?/可以匹配“abc”、“abbc”、“ab”、“ac”等字符串。

JavaScript中的正则表达式可以使用 RegExp 对象来创建。例如，下面的代码可以创建一个正则表达式，用于匹配以字母或数字开头，后面可以跟任意字母、数字或下划线的字符串：

var regExp = /^[a-zA-Z0-9]\w*/;

过滤非法字符

使用正则表达式可以很方便地过滤掉一些非法的字符。例如，我们可以通过下面的代码，将输入字符串str中的非字母、非数字、非中文字符全部替换为空格，从而实现过滤操作：

var regExp = /[^\u4e00-\u9fa5a-zA-Z0-9]+/g; // 匹配非中文、非字母、非数字的字符
var str = "今天上午上了_@#一个课程，收获颇丰！123";
str = str.replace(regExp, ' '); // 将非法字符替换为空格

上述代码中，我们创建了一个正则表达式，用于匹配非中文、非字母、非数字的字符，然后使用 replace 方法将匹配到的字符替换为空格。

另外，我们还可以结合 test 方法来判断一个字符串是否符合指定的正则表达式。例如，下面的代码可以判断字符串str是否为一个邮箱地址：

var regExp = /^\w+@[a-zA-Z0-9]+\.[a-zA-Z]+$/;
var str = "example@example.com";
if(regExp.test(str)) {
  console.log("邮箱地址格式正确");
} else {
  console.log("邮箱地址格式不正确");
}

实战：输入框禁止输入非法字符

为了保证用户输入的数据合法并减少后端处理的压力，我们可以在输入框中使用正则表达式过滤非法字符。例如，下面的代码将演示如何创建一个输入框，对其中输入的内容进行过滤：

<input type="text" id="input">

<script>
var inputElem = document.getElementById("input");
inputElem.addEventListener("input", function(event) {
  var regExp = /[^\u4e00-\u9fa5a-zA-Z0-9]+/g; // 匹配非中文、非字母、非数字的字符
  var str = event.target.value;
  str = str.replace(regExp, '');
  event.target.value = str;
});
</script>

上述代码中，我们使用 addEventListener 方法添加了一个 input 事件监听器，当输入框中的内容发生变化时，会自动执行回调函数。在回调函数中，我们使用正则表达式过滤掉输入框中的非法字符，然后将过滤后的结果设置回输入框的值中。

这样，用户在输入框中输入时，会自动过滤掉非法字符，从而保证输入的数据合法。