正则表达式-基础版

酱菜第一深情
418 阅读6分钟

引言

相信我们在登入或者注册的时候，有时候对于账号和密码的格式有一定的要求：比如包含大写字母、小写字母、数字和特殊字符等，下面，我们来探究一下在js当中，如何运用正则表达式来对账号或者密码的格式来进行规范

创建一个正则表达式

你可以使用以下两种方法构建一个正则表达式：

使用一个正则表达式字面量，其由包含在斜杠之间的模式组成，如下所示：

var re = /ab+c/;

或者调用RegExp对象的构造函数，如下所示：

var re = new RegExp("ab+c");

正则表达式常用方法

校验数据

test(字符串)

测试字符是否满足正则表达式规则，如果测试到有，则返回true；没有则返回flase
语法：正则表达式.test(字符串） 正则表达式提供的方法


var reg=/[123]/
var str='1' 
var result=reg.test(str)
console.log(result)//flase

字符串.replace(正则表达式，新的内容）

replace() 方法返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern是字符串，则仅替换第一个匹配项。字符串提供的方法

var reg=/\d/
var str="11123bcd"
var res=str.replace(reg,"a") //将数字换为a
console.log(res)//a1123bcd 只要匹配到符合规则的就返回

我们也可以对字符串的边界进行规范

微信截图_20240617230114.png

举个例子

如果你想确保一个字符串以字母 "a" 开头并且以字母 "b"结尾，你可以使用正则表达式的 ^ 和 $ 锚点来实现这一需求。下面是一个使用 JavaScript 实现的例子：

示例代码:

let str = "appleb"; 
let regex = /^a.*b$/; 
if (regex.test(str)) 
{
console.log("字符串以 'a' 开头，以 'b' 结尾"); 
} 
else 
{ 
console.log("字符串不符合要求"); 
}

在这个例子中：

  • ^a 确保字符串以 "a" 开始。
  • .* 允许任何字符（除了换行符）出现任意次数。
  • b$ 确保字符串以 "b" 结束。

因此，/^a.*b$/ 这个正则表达式会检查字符串是否以 "a" 开始且以 "b" 结束，中间可以包含任意数量的任意字符。

正则表达式当中的 []

基本用法

当你在方括号 [ ] 内列出一系列字符时，正则表达式将匹配列表中任意一个字符。例如：

  • [abc] 匹配 "a" 或 "b" 或 "c"。
  • [0-9] 匹配任何单个数字字符，范围从 "0" 到 "9"。
  • [A-Za-z] 匹配任何单个小写或大写字母。

在JavaScript中，如果我们想要检查一个字符串是否以 "a"、"b" 或 "c" 开头，我们可以这样做：

let str = "apple";
let regex = /^[a-c]/;
if (regex.test(str)) {
console.log("字符串以 'a', 'b', 或 'c' 开头"); }
else {
console.log("字符串不符合要求"); }

在这个例子中：

  • ^[a-c] 正则表达式检查字符串是否以 "a"、"b" 或 "c" 开头。
  • ^ 确保匹配从字符串的开始位置开始。
  • [a-c] 定义了一个字符集合，匹配 "a" 到 "c" 之间的任何一个字符。

如果 str 的值是 "apple"，那么 regex.test(str) 将返回 true，因为字符串以 "a" 开头，符合我们的字符集合定义。但如果 str 的值是 "dog"，那么 regex.test(str) 将返回 false，因为字符串不以 "a"、"b" 或 "c" 开头。

这就是使用方括号 [] 在正则表达式中创建字符集合的一个最基本的例子。

下面，我们来一个正则表达式的实际运用

微信截图_20240617232820.png

这是以一个登入注册页面，

电话号码要求

以数字 "1" 开始；

第二位数字是 3 到 9 之间的任意一个；

接下来有 9 个任意数字；

正则表达式 "^1[3-9]\d{9}$" 主要用于匹配中国大陆的手机号码格式。下面是对这个正则表达式各个部分的详细解释：

  • ^：表示字符串的开始。
  • 1：匹配数字 "1"，中国大陆手机号码的第一位数字通常是 "1"。
  • [3-9]：这是一个字符集合，表示匹配 "3" 到 "9" 之间的任意一个数字。这意味着手机号码的第二位可以是 3、4、5、6、7、8 或 9。
  • \d：这是一个预定义的字符类，等价于 [0-9]，用于匹配任意一个数字。
  • {9}：表示前面的 \d（任意一个数字）应该重复出现恰好 9 次。
  • $：表示字符串的结束。

这个正则表达式常用于验证中国大陆手机号码的格式是否正确，例如在用户注册或登录时检查用户输入的手机号码是否合法。如果一个字符串完全匹配这个正则表达式，那么它就很可能是一个有效的中国大陆手机号码。

假如，我们输入的手机号不符合这个格式，会怎么样？

微信截图_20240617233522.png

我们可以发现，假如输入的手机号如果不符合格式，输入框会出来一个提示

这里用到了html5表单的pattern属性，因为这里主要讲的是正则表达式，所以先不进行论述了

密码要求：由字母（大写或小写）和数字组成的字符串，其中字符串的长度至少为6个字符，至多为12个字符。

正则表达式 "^[a-zA-Z0-9]{6,12}$"

  • ^：表示匹配字符串的开始位置。
  • [a-zA-Z0-9]：这是一个字符集，意味着可以匹配任何小写字母 (a-z)、大写字母 (A-Z) 或数字 (0-9)。
  • {6,12}：这部分指定前面的字符集中的任意字符应该重复至少6次，但不超过12次。也就是说，整个匹配的字符串长度应该在6到12个字符之间。
  • $：表示匹配字符串的结束位置，确保整个字符串都符合上述规则，没有额外的字符。

例如，在网站注册时，可能要求用户创建一个长度在6到12个字符之间的账号名，且只能包含字母和数字，这时就可以使用这个正则表达式来校验输入的有效性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录注册</title>
    <link rel="stylesheet" href="./common.css">
    <style>
       * {
    margin: 0;
    padding: 0;
}

.auth {
    overflow: hidden;
    width: 320px;
    background: #ffe;
}

.auth .auth-title {
    display: flex;
    position: relative;
    border-bottom: 1px solid #eee;
    height: 40px;
}

.auth .auth-title label {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: color;
    height: 100%;
    cursor: pointer;
}

.auth .auth-title em {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50%;
    border-radius: 1px;
    height: 2px;
    background-color: #f66;
    transition: all 0.3s ease-in-out;
}

.auth .auth-form {
    display: flex;
    width: 200%;
    height: 250px;
    transition: all 0.3s ease-in-out;
}

.auth .auth-form form {
    flex: 1;
    padding: 40px;
}

.auth .auth-form div {
    display: flex;
    flex-direction: column-reverse;
}

.auth .auth-form div+div {
    margin-top: 10px;
}

#register-btn:checked~.auth-title label:nth-child(2) {
    color: #f66;
    font-weight: bold;
}

#register-btn:checked~.auth-title em {
    transform: translateX(160px);
}

#register-btn:checked~.auth-form {
    transform: translateX(-320px);
}

#login-btn:checked~.auth-title label:nth-child(1) {
    color: #f66;
    font-weight: bold;
}

#login-btn:checked~.auth-title em {
    transform: translateX(0);
}
 
    </style>
</head>

<body>
    <div class="bruce flex-ct-x" data-title="登录注册">
        <div class="auth">
            <input type="radio" id="login-btn" hidden name="auth" checked />
            <input type="radio" id="register-btn" hidden name="auth" />
            <div class="auth-title">
                <label for="login-btn">登录</label>
                <label for="register-btn">注册</label>
                <em></em>
            </div>
            <div class="auth-form">
                <form>
                    <div>
                        <input type="text" class="text1"     placeholder="请输入手机" required pattern="^1[3-9]\d{9}$">
                        <label>手机</label>
                    </div>
                    <div>
                        <input type="passsword"  class="text2" placeholder="请输入密码" required pattern="^[a-zA-Z0-9]{6,12}$">
                        <label>密码</label>
                    </div>
                    <button type="submit">登录</button>

                </form>
                <form>
                    <div>
                        <input type="text" placeholder="请输入手机" required pattern="^1[3-9]\d{9}$">
                        <label>手机</label>
                    </div>
                    <div>
                        <input type="passsword" placeholder="请输入密码" required pattern="^[a-zA-Z0-9]{6,12}$">
                        <label>密码</label>
                    </div>
                    <div>
                        <input type="passsword" placeholder="请再次输入密码" required pattern="^[a-zA-Z0-9]{6,12}$">
                        <label>重复密码</label>
                    </div>
                    <button type="submit">注册</button>
                </form>
            </div>
        </div>
    </div>
</body>

</html>

这是我们一个登入界面的案例，因为这里主要讲的是正则表达式，如果有兴趣的小伙伴，可以用这份代码去试一下

总结

关键知识点总结：

  1. 正则表达式的创建：

    • 字面量：使用斜杠 / 包围的模式，如 /ab+c/。
    • 构造函数：通过 new RegExp("ab+c") 创建，适合动态生成正则表达式的情况。

  2. 正则表达式方法：

    • test() ：测试字符串是否符合正则表达式的模式，返回布尔值。
    • replace() ：在字符串中替换匹配的部分，常用于格式化字符串。

  3. 边界匹配：

    • ^ 和 $ 分别匹配字符串的开始和结束，用于限定整个字符串必须满足的条件。

  4. 字符集[] ：

    • 用于匹配括号内的任一字符，如 [abc] 匹配 "a"、"b" 或 "c"。
    • 范围如 [0-9] 或 [A-Za-z] 分别匹配单个数字或字母。

  5. 模式应用案例：

    • 电话号码验证："^1[3-9]\d{9}$" 用于验证中国大陆手机号码，确保以 "1" 开始，第二位在 "3" 至 "9" 之间，随后是九个数字。
    • 密码复杂度："^[a-zA-Z0-9]{6,12}$" 确保密码长度在6到12个字符之间，并且只包含字母和数字。

制作不易，感谢支持

avatar
文章
阅读
粉丝