最后更新于 2023年2月9日，文中内容可能已发生变化
- JavaScript
正则表达式是一种在字符串中搜索模式的方法。它可以用于查找、替换、提取等操作。 - 使用正则表达式的基本语法
-
/pattern/modifiers; - 其中 pattern 是正则表达式的模式，modifiers 是可选的修饰符。
- 举个例子
-
let string = "The rain in Spain"; let pattern = /in/; console.log(pattern.test(string)); // true
-
- 在 JS
中：正则表达式也是对象，所以在使用的时候需要先创建一个正则对象，正则表达式有两种创建方式-
let pattern1 = /in/; // 字面量方式 let pattern2 = new RegExp("in"); // 构造函数方式。可根据接口返回数据，动态创建表单验证规则
-
- 一些常用的正则表达式相关方法。这些方法都有自己的使用场景，需要根据需求来选择使用。
- test() : 检测字符串中是否存在匹配模式
- exec() : 检索字符串中的匹配
- match() : 检索字符串中的匹配
- search() : 检索字符串中的匹配
- replace() : 替换字符串中的匹配
- split() : 通过匹配来分割字符串
- 正则表达式常用的修饰符有：
- i: 不区分大小写
- g: 全局匹配
- m: 多行匹配
- 例如：
-
let string = "Is this all there is?"; let pattern = /is/gi; console.log(string.match(pattern)); // ['Is', 'is', 'is']
- 正则表达式的量词用于表示字符串出现的次数。常用的量词有：
- *: 出现 0 次或多次
- ?: 出现 0 次或 1 次
- +: 出现 1 次或多次
- {n}: 出现 n 次
- {n,m}: 出现 n 到 m 次
- 例如：
-
let string = "Is this all there is?"; let pattern = /is*/; console.log(string.match(pattern)); // [ // 0:"is" // groups:undefined // index:5 // input:"Is this all there is?" // length:1 // ]
- 使用示例
- 手机号
-
/^(+86)?\d{10}$/
-
- 判断页面是否在微信或企业微信打开
-
const ua= window.navigator.userAgent.toLowerCase(); alert( ua.match(/MicroMessenger/i) == 'micromessenger' ); // 微信 alert( ua.match(/MicroMessenger/i) == 'micromessenger' && ua.match(/wxwork/i) == 'wxwork' ); // 企业微信
-
- 以字母开头，后边可跟字母、数字、连字符
-
const reg = /^[a-zA-Z][a-zA-Z0-9\-]+$/; if (!reg.test(value)) { callback(new Error('以字母开头，后边可跟随字母、数字、连字符')); } else { callback(); }
-
- 密码，8～36 个字符，必须同时包含三项（字母、数字、 【`~!@$%^&*()_-+={}[]|\</a >:;'<>,.?/】 中的特殊符号）
-
// 部分特殊字符前需要使用反斜线“\”进行转义 // 匹配特殊字符 `~!@#$%^&*()_\-+={}\[\]|\\:;'<>,.?\/ const myReg1 = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[`~!@#$%^&*()_\-+={}\[\]|\\:;'<>,.?\/])[A-Za-z\d`~!@#$%^&*()_\-+={}\[\]|\\:;'<>,.?\/]{8,36}$/; console.log(myReg1.test("qwe123qwe123")); // false console.log(myReg1.test("qwe123qwe123+")); // true console.log(myReg1.test("q8`~!@#$%^&*()_-+={}[]|\\:;'<>,.?/")); // true - https://stackoverflow.com/questions/19605150/regex-for-password-must-contain-at-least-eight-characters-at-least-one-number-a</a >
-
- 获取字符串中所有括号包含的内容
- 匹配小括号 () 中的内容
-
/\((.+?)\)/g
-
- 匹配中括号 [] 中的内容
-
/\[(.+?)\]/g
-
- 匹配花括号 {} 中的内容
-
/\{(.+?)\}/g
-
- 获取字符串所有花括号 {} 中的内容
-
const str='{film}的{star}都有谁，(1234)gjwiegjo[5678]'; const resultArr=[...(str).matchAll(/\{(.+?)\}/g)]; console.log(resultArr); //结果： [ ["{film}", "film", index: 0, input: "{film}的{star}都有谁，(1234)gjwiegjo[5678]", groups: undefined], ["{star}", "star", index: 7, input: "{film}的{star}都有谁，(1234)gjwiegjo[5678]", groups: undefined], ]
-
- JS 正则表达式 获取小括号 中括号
花括号内的内容：https://blog.csdn.net/genius_yym/article/details/79670035 - String.prototype.matchAll()</a >
：方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器
- 匹配小括号 () 中的内容
- 匹配中文、英文、下划线
-
/^[\u4e00-\u9fa5_a-zA-Z]+$/g -
// Ant Design 4.2.5 表单验证中英文和下划线 <Form.Item label="项目名称" name="name" rules={[ { required: true, message: "请输入项目名称", whitespace: true }, { pattern: /^[\u4e00-\u9fa5_a-zA-Z]+$/g, message: '项目名称只支持中英文和下划线，且字符长度不超过50', max: 50 }, ]} > <Input /> </Form.Item>
-
- 为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数
escapeHtml，将 <、>、"、& 进行转义-
function escapeHtml(str) { return str.replace(/[<>"&]/g, function (match) { switch (match) { case "<": return "<"; case ">": return ">"; case "&": return "&"; case '"': return """; } }); } console.log(escapeHtml('< > " & < > " &')); // < > " & < > " &
-
- 移除/替换字符串前后的空格
-
if (!String.prototype.trim) { String.prototype.trim = function () { return this.replace(/^\s+/, "").replace(/\s+$/, ""); }; } const str = " q w e "; console.log(str.trim()); // q w e
-
- 获取 html 字符串中的 img 标签内容
-
const input = ` <div>xxx</div> <img src="https://www.baidu.com/favicon.ico" alt="baidu"> <div>xxx</div> <img alt="sogou" src="https://www.sogou.com/images/logo/new/favicon.ico" > <div>xxx</div> `; // --------------------------------------------------------------------- // 提取所有 img 标签的 src、alt 属性，src 必须先出现 alt 后出现 // 提取符合条件的 img 标签 const imgTags1 = input.match(/<img.*?src="(.*?)".*?alt="(.*?)".*?>/g); // ['<img src="https://www.baidu.com/favicon.ico" alt="baidu">'] const srcAndAltArray1 = imgTags1.map((imgTag) => { // 提取 src 属性 const src = imgTag.match(/src="(.*?)"/); // ['src="https://www.baidu.com/favicon.ico"', 'https://www.baidu.com/favicon.ico'] // 提取 alt 属性 const alt = imgTag.match(/alt="(.*?)"/); // ['alt="baidu"', 'baidu'] return { src: src[1] || null, alt: alt[1] || null }; }); console.log(srcAndAltArray1); // [ // src: 'https://www.baidu.com/favicon.ico', alt: 'baidu' // ] // --------------------------------------------------------------------- // 提取所有 img 标签的 src、alt 属性，不论 src 和 alt 的顺序如何 const imgTags2 = input.match( /<img.*?(src="(.*?)".*?)?(alt="(.*?)".*?)?>/g ); const srcAndAltArray2 = imgTags2.map((imgTag) => { const src = imgTag.match(/src="(.*?)"/); const alt = imgTag.match(/alt="(.*?)"/); return { src: src[1] || null, alt: alt[1] || null }; }); console.log(srcAndAltArray2); // [ // {src: 'https://www.baidu.com/favicon.ico', alt: 'baidu'}, // {src: 'https://www.sogou.com/images/logo/new/favicon.ico', alt: 'sogou'} // ]
-
- 手机号