ElementUI 正则-emeditor 正则

一、解决方案简述

在使用ElementUI开发项目时，有时需要对输入框等组件中的内容进行正则校验，确保用户输入符合特定格式。而emeditor是一款强大的文本编辑器，在其中利用正则表达式可以快速查找、替换文本。当涉及到这两种场景下的正则应用时，我们可以通过理解正则表达式的语法规则，并结合具体的业务需求来构建合适的正则表达式，以满足ElementUI表单校验和emeditor文本处理的要求。

二、ElementUI 表单校验中的正则

1. 基本用法

javascript
// 在定义rules规则时使用正则
let rules = {
// 验证手机号码
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ pattern: /^1[3456789]d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
]
};
// 将rules绑定到el-form上
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="手机号" prop="phone">
<el-input v-model="form.phone"></el-input>
</el-form-item>
</el-form>

这里定义了一个简单的手机号校验规则，pattern属性用于指定正则表达式，当触发blur事件（失去焦点）时，就会根据这个正则表达式来判断输入是否合法。

2. 自定义验证函数结合正则

如果校验逻辑比较复杂，还可以通过自定义验证函数来进行。
javascript
let rules = {
username: [
{ validator: (rule, value, callback) => {
let reg = /^[a-zA-Z0-9_-]{4,16}$/; // 用户名只能包含字母、数字、下划线或减号，长度4 - 16位
if (!value) {
return callback(new Error('用户名不能为空'));
} else if (!reg.test(value)) {
return callback(new Error('用户名格式不正确'));
} else {
callback();
}
}, trigger: 'blur'}
]
}


三、emeditor 中的正则

1. 查找文本

在emeditor中打开查找对话框，勾选“使用正则表达式”选项。例如要查找所有以大写字母开头的单词，可以输入正则表达式b[A - Z]w*b。其中b表示单词边界，[A - Z]匹配一个大写字母，w*匹配零个或多个字母、数字或下划线。

2. 替换文本

假设我们要将日期格式从“yyyy - mm - dd”转换为“dd/mm/yyyy”。先查找(d{4})-(d{2})-(d{2})，再替换为3/2/1。这里的括号用于分组捕获，1、2、3分别对应、第二、第三个分组的内容，在替换时按照新的顺序组合起来。