JS 浅析正则表达式

最新推荐文章于 2025-04-28 17:29:54 发布

Aotman_

最新推荐文章于 2025-04-28 17:29:54 发布

阅读量284

点赞数 8

文章标签：正则表达式 javascript 前端 es6

本文链接：https://blog.csdn.net/qq_36020334/article/details/147410967

版权

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

举个栗子：

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

核心正则表达式：

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

关键点说明‌：

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

注意：

‌Unicode精准匹配‌
- 中文字符和标点需显式声明Unicode编码（如\uFF08匹配中文左括号（）。
- 避免使用.或\w等宽泛符号，防止误匹配。
‌符号范围‌
- ‌英文标点‌：直接使用字符（如()和%）。
- ‌中文标点‌：需用Unicode编码（如％对应\uFF05）。
‌空值处理‌
- 正则表达式末尾用*允许空字符串（如^[...]*$）。
- 若强制至少一个字符，改为+（如^[...]+$）。

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

HTML

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

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

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>

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