JS 浅析正则表达式

做数据的校验，就离不开正则表达式，现在网上常用的正则表达式都很全，很多都是开箱即用，非常方便和快捷，但是偶尔也会遇到那种很特殊的正则校验，如果能清楚的明白正则的校验规则，那么任何时候，面对任何需求，我们都会很轻松，从容而又优雅的写出所匹配的正则表达式，从此告别盲目的搜索！

举个栗子：

想限制输入内容为汉字、数字、字母、中英文百分号（%和％）、中英文冒号（:和：）等其他特殊字符。

核心正则表达式：

/^[\u4E00-\u9FA5a-zA-Z0-9\：:%％]*$/

关键点说明‌：

• \u4E00-\u9FA5：所有汉字
• a-zA-Z0-9：字母和数字
• 冒号：英文:（\u003A）和中文：（\uFF1A）
• 百分号：英文%（\u0025）和中文％（\uFF05）

注意：

1. ‌Unicode精准匹配‌

   • 中文字符和标点需显式声明Unicode编码（如\uFF08匹配中文左括号（）。
   • 避免使用.或\w等宽泛符号，防止误匹配。

2. ‌符号范围‌

   • ‌英文标点‌：直接使用字符（如()和%）。
   • ‌中文标点‌：需用Unicode编码（如％对应\uFF05）。

3. ‌空值处理‌

   • 正则表达式末尾用*允许空字符串（如^[...]*$）。
   • 若强制至少一个字符，改为+（如^[...]+$）。

示例代码1：输入框实时过滤

HTML

<input type="text" oninput="this.value=this.value.replace(/[^\u4E00-\u9FA5a-zA-Z0-9\：:%％]/g, '')">

• 使用oninput事件实时替换非法字符为空字符串，支持粘贴和输入。

 

JS

function validateInput(value) {return /^[\u4E00-\u9FA5a-zA-Z0-9\：:%％]+$/.test(value);
}

• 返回true表示合法输入，false表示包含非法字符。

 

完整示例：

<input type="text" id="restrictedInput" oninput="this.value=this.value.replace(/[^\u4E00-\u9FA5a-zA-Z0-9\：:%％]/g, '')">
<button onclick="submitForm()">提交</button><script>
function submitForm() {const input = document.getElementById("restrictedInput").value;if (!/^[\u4E00-\u9FA5a-zA-Z0-9\：:%％]+$/.test(input)) {alert("输入包含非法字符！");return false;}// 通过验证后执行提交逻辑console.log("合法输入:", input);
}
</script>

看懂了基础规则，是不是非常简单~