引言

在现代Web开发中，正则表达式（Regular Expressions，简称Regex）是一种强大且灵活的工具，它可以用来搜索、匹配和操作字符串。无论是处理用户输入、数据格式验证，还是动态内容渲染，正则表达式都能极大地简化我们的代码并提高效率。

我将通过两个实际应用场景，带大家深入了解正则表达式在Web开发中的妙用。我们将首先探讨如何使用正则表达式进行模板渲染，接着再展示如何通过正则表达式进行表单验证。希望通过这些实例，能够帮助大家更好地掌握正则表达式的使用技巧，并在实际项目中灵活应用。

正则表达式基础

在我们深入实例之前，先来了解一下正则表达式的基本概念和常见符号。

字符类：[] 用来定义一个字符集合，匹配方括号内的任意字符。例如，[abc] 匹配 a、b 或 c。
数量词：{} 用来指定匹配的次数。例如，\d{3} 匹配恰好三位数字。
单词字符：\w 匹配任何字母、数字或下划线。
一个或多个：+ 表示前面的字符至少出现一次。例如，\w+ 匹配一个或多个单词字符。
捕获组：() 用来分组匹配的字符，并捕获它们以供后续使用。

这些符号和模式构成了正则表达式的基础，接下来我们将通过具体实例来演示它们的应用。

模板渲染中的正则表达式

模板渲染是Web开发中的常见需求，我们通常需要将模板字符串中的占位符替换为实际的数据值。以下是一个简单的模板渲染示例：

<script>
    let template = '我是{{name}}, 年龄{{age}}, 性别{{sex}}';
    let person = {
        name: '张三',
        age: 18,
        sex: '男'
    }

    function renderTemplate(template, data) {
        const reg = /\{\{(\w+)\}\}/;
        if (reg.test(template)) {
            const name = reg.exec(template)[1];
            template = template.replace(reg, data[name]);
            console.log(template);
            return renderTemplate(template, data);
        }
        return template;
    }

    renderTemplate(template, person);
</script>

正则表达式定义：

const reg = /{{(\w+)}}/; 这一行代码定义了一个正则表达式，用于匹配双大括号{{}}之间的单词字符。

测试和替换：

if (reg.test(template))：检查模板字符串中是否存在匹配的占位符。
const name = reg.exec(template)[1];：提取匹配到的占位符名称（如name、age、sex）。
template = template.replace(reg, data[name]);：将占位符替换为对应的数据值。

递归处理：

return renderTemplate(template, data);：递归调用函数，以处理模板中可能存在的多个占位符。

实现结果：

表单验证中的正则表达式

在表单验证中，正则表达式同样是不可或缺的工具。下面是一个表单验证示例，用于验证手机号和密码：

html

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

1. required属性：

该属性用于指定输入字段为必填项。如果用户试图提交表单但该字段为空，则浏览器将提示用户填写此字段。

2. pattern属性：

该属性用于指定输入字段的正则表达式模式。如果用户输入的数据不匹配该模式，则浏览器将提示用户输入符合模式的值。 pattern="^1[3-9]\d{9}$"：
- ^：匹配字符串的开始。
- 1：匹配字符1。
- [3-9]：匹配数字3到9中的任意一个。
- \d{9}：匹配9个数字（0-9）。
- $：匹配字符串的结束。
总结：这个模式匹配以1开头，第二位是3-9之间的数字，后面是9个数字的手机号。

3. 密码验证：

pattern="^[a-zA-Z0-9]{6,12}$"：
- ^：匹配字符串的开始。
- [a-zA-Z0-9]：匹配任意字母（大小写）或数字。
- {6,12}：匹配前面的字符6到12次。
- $：匹配字符串的结束。
总结：这个模式匹配6到12个由字母或数字组成的密码。

4. 隐藏的单选按钮（radio）：

通过hidden属性隐藏的单选按钮，用于切换登录和注册表单。

5. 表单标题与切换按钮：

利用label标签和for属性，与隐藏的单选按钮关联，实现表单的切换。

渲染

那么为了实现登录与注册两部分的内容分离，我们还可以通过纯css来操作，下面我用stylus来展现代码，更加清晰易懂。

关于stylus可以看我的这篇文章分享：# 纯CSS实现极简下拉菜单：从入门到精通Stylus

*
    margin 0
    padding 0
.auth
    overflow hidden
    width 320px
    background-color #f0f0f0
    .auth-title
        display flex
        position relative
        border-bottom 1px solid #eee
        height 40px
        label
            flex 1
            display flex
            justify-content center
            align-items center
            height 100%
            cursor pointer
        //     text-align center
        //     line-height 40px
        em
            position absolute
            left 0
            bottom 0
            width 50%
            border-radius 1px
            height 2px
            background-color #f66
            transition all .3s ease-in-out
    .auth-form
        display flex
        width 200%
        height 250px
        transition all .3s ease-in-out
        form
            flex 1
            padding 20px
            div
                display flex
                flex-direction column-reverse
                & + div 
                    margin-top 10px

#register-btn:checked
    & ~ .auth-title
        label:nth-child(2)
            color #f66
            font-weight bold
        em
            transform translateX(160px)
    & ~ .auth-form
        transform translateX(-50%)

#login-btn:checked
    & ~ .auth-title
        label:nth-child(1)
            color #f66
            font-weight bold
        em
            transform translateX(0)
    & ~ .auth-form
        transform translateX(0)

这里我将解析几个关键地方的代码：

.auth-title：设置为flex布局，使子元素水平排列，并添加底部边框。
label：设置为flex布局，使内容居中，鼠标悬停时显示为可点击。
em：设置为定位元素，用于指示当前选中的表单，通过动画实现平滑过渡效果。
.auth-form：设置为flex布局，宽度为200%，为了能够同时放下登录与注册两部分的内容，高度为250px，通过动画实现平滑过渡效果。
form：设置为flex布局的子元素，具有1个flex单位的宽度，内边距为20px。
div：设置为列方向的flex布局，子元素逆序排列。相邻的div之间有10px的间距。
#register-btn:checked：当注册单选按钮被选中时：
- .auth-title中的第二个label变为红色并加粗。
- em指示条移动到注册标题下方。
- .auth-form表单容器向左移动50%，显示注册表单。
#login-btn:checked：当登录单选按钮被选中时：
- .auth-title中的第一个label变为红色并加粗。
- em指示条移动到登录标题下方。
- .auth-form表单容器保持在初始位置，显示登录表单。

实现效果

总结

今天的分享主要围绕正则表达式的基本概念、常用符号和语法、实用技巧、字符串替换和实际应用展开。我们了解了正则表达式在匹配字符串中的字符组合方面的强大功能。常用的符号+ 用于匹配一次或多次，[] 用于匹配括号内的任意字符，() 用于捕获组作为转义字符，^ 匹配字符串开始，$ 匹配字符串结束等。

实际应用方面，重点分享了在表单验证中的使用，例如匹配手机号码和密码的正则表达式。通过模板字符串替换的例子，我们进一步了解了如何将对象的属性值动态替换到模板字符串中，这在实际开发中具有重要意义。

总体来说，这次学习使我掌握了正则表达式的基本语法和实用技巧，增强了我们在实际项目中应用正则表达式的能力。以上便是我的分享，未来我将继续深入学习正则表达式，并分享给大家，让我们拭目以待，别忘了点赞收藏+关注哦~

正则表达式在Web开发中的妙用：从模板渲染到表单验证

引言

正则表达式基础

模板渲染中的正则表达式

表单验证中的正则表达式

html

渲染

实现效果

总结