鲁达 是什么
正则表达式是一种用来匹配字符串的强有力的武器
它的设计思想是用一种描述性的语言定义一个规则，凡是符合规则的字符串，我们就认为它“匹配”了，否则，该字符串就是不合法的
根据正则表达式语法规则，大部分字符仅能够描述自身，这些字符被称为普通字符，如所有的字母、数字等。
元字符就是拥有特动功能的特殊字符，大部分需要加反斜杠进行标识，以便于普通字符进行区别，而少数元字符，需要加反斜杠，以便转译为普通字符使用。JavaScript 正则表达式支持的元字符如表所示。
在 JavaScript中，正则表达式也是对象，构建正则表达式有两种方式：
- 字面量创建，其由包含在斜杠之间的模式组成
const re = /\d+/g; - 调用regexp对象的构造函数
const re = new RegExp("\\d+","g"); const rul = "\\d+" const re1 = new RegExp(rul,"g"); 使用构建函数创建，第一个参数可以是一个变量，遇到特殊字符\需要使用\\进行转义
表示字符的方法有多种，除了可以直接使用字符本身外，还可以使用 ASCII 编码或者 Unicode 编码来表示。
示例1
下面使用 ASCII 编码定义正则表达式直接量。
var r = /\x61/;var s = "JavaScript";var a = s.match(s);由于字母 a 的 ASCII 编码为 97，被转换为十六进制数值后为 61，因此如果要匹配字符 a，就应该在前面添加“\x”前缀，以提示它为 ASCII 编码。
示例2
除了十六进制外，还可以直接使用八进制数值表示字符。
var r = /\141/;var s = "JavaScript";var a = s.match(r);使用十六进制需要添加“\x”前缀，主要是为了避免语义混淆，而八进制则不需要添加前缀。
示例3
ASCII 编码只能够匹配有限的单字节字符，使用 Unicode 编码可以表示双字节字符。Unicode 编码方式：“\u”前缀加上 4 位十六进制值。
var r = "/\u0061/";var s = "JavaScript";var a = s.match(s);
在 RegExp() 构造函数中使用元字符时，应使用双斜杠。
var r = new RegExp("\\u0061"); RegExp() 构造函数的参数只接受字符串，而不是字符模式。在字符串中，任何字符加反斜杠还表示字符本身，如字符串“\u”就被解释为 u 本身，所以对于“\u0061”字符串来说，在转换为字符模式时，就被解释为“u0061”，而不是“\u0061”，此时反斜杠就失去转义功能。解决方法：在字符 u 前面加双反斜杠。
匹配规则
常见的校验规则如下：
规则 | 描述 |
\ | 转义 |
^ | 匹配输入的开始 |
$ | 匹配输入的结束 |
* | 匹配前一个表达式 0 次或多次 |
+ | 匹配前面一个表达式 1 次或者多次。等价于 {1,} |
? | 匹配前面一个表达式 0 次或者 1 次。等价于{0,1} |
. | 默认匹配除换行符之外的任何单个字符 |
x(?=y) | 匹配'x'仅仅当'x'后面跟着'y'。这种叫做先行断言 |
(?<=y)x | 匹配'x'仅当'x'前面是'y'.这种叫做后行断言 |
x(?!y) | 仅仅当'x'后面不跟着'y'时匹配'x'，这被称为正向否定查找 |
(?<!y)x | 仅仅当'x'前面不是'y'时匹配'x'，这被称为反向否定查找 |
x|y | 匹配‘x’或者‘y’ |
{n} | n 是一个正整数，匹配了前面一个字符刚好出现了 n 次 |
{n,} | n是一个正整数，匹配前一个字符至少出现了n次 |
{n,m} | n 和 m 都是整数。匹配前面的字符至少n次，最多m次 |
[xyz] | 一个字符集合。匹配方括号中的任意字符 |
[^xyz] | 匹配任何没有包含在方括号中的字符 |
\b | 匹配一个词的边界，例如在字母和空格之间 |
\B | 匹配一个非单词边界 |
\d | 匹配一个数字 |
\D | 匹配一个非数字字符 |
\f | 匹配一个换页符 |
\n | 匹配一个换行符 |
\r | 匹配一个回车符 |
\s | 匹配一个空白字符，包括空格、制表符、换页符和换行符 |
\S | 匹配一个非空白字符 |
\w | 匹配一个单字字符（字母、数字或者下划线） |
\W | 匹配一个非单字字符 |
正则表达式标记
标志 | 描述 |
g | 全局搜索。 |
i | 不区分大小写搜索。 |
m | 多行搜索。 |
s | 允许 . 匹配换行符。 |
u | 使用unicode码的模式进行匹配。 |
y | 执行“粘性(sticky)”搜索,匹配从目标字符串的当前位置开始。 |
使用方法如下：
var re = /pattern/flags; var re = new RegExp("pattern", "flags"); 在了解下正则表达式基本的之外，还可以掌握几个正则表达式的特性：
贪婪模式
在了解贪婪模式前，首先举个例子：
const reg = /ab{1,3}c/ 在匹配过程中，尝试可能的顺序是从多往少的方向去尝试。首先会尝试bbb，然后再看整个正则是否能匹配。不能匹配时，吐出一个b，即在bb的基础上，再继续尝试，以此重复
如果多个贪婪量词挨着，则深度优先搜索
const String = "12345"; const regx = /(\d{1,3})(\d{1,3})/; con( (reg) ); // => ["12345", "123", "45", index: 0, input: "12345"] 其中，前面的\d{1,3}匹配的是"123"，后面的\d{1,3}匹配的是"45"
懒惰模式
惰性量词就是在贪婪量词后面加个问号。表示尽可能少的匹配
var string = "12345"; var regex = /(\d{1,3}?)(\d{1,3})/; con( (regex) ); // => ["1234", "1", "234", index: 0, input: "12345"]其中\d{1,3}?只匹配到一个字符"1"，而后面的\d{1,3}匹配了"234"
分组
分组主要是用过()进行实现，比如beyond{3}，是匹配d字母3次。而(beyond){3}是匹配beyond三次
在()内使用|达到或的效果，如(abc | xxx)可以匹配abc或者xxx
反向引用，巧用$分组捕获
let str = "John Smith"; // 交换名字和姓氏 con(/(john) (smith)/i, '$2, $1')) // Smith, John 匹配方法
正则表达式常被用于某些方法，我们可以分成两类：
- 字符串（str）方法：match、matchAll、search、replace、split
- 正则对象下（regexp）的方法：test、exec
方法 | 描述 |
exec | 一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回 null）。 |
test | 一个在字符串中测试是否匹配的RegExp方法，它返回 true 或 false。 |
match | 一个在字符串中执行查找匹配的String方法，它返回一个数组，在未匹配到时会返回 null。 |
matchAll | 一个在字符串中执行查找所有匹配的String方法，它返回一个迭代器（iterator）。 |
search | 一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1。 |
replace | 一个在字符串中执行查找匹配的String方法，并且使用替换字符串替换掉匹配到的子字符串。 |
split | 一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的 String 方法。 |
(regexp)
(regexp) 方法在字符串 str 中找到匹配 regexp 的字符
如果 regexp 不带有 g 标记，则它以数组的形式返回第一个匹配项，其中包含分组和属性 index（匹配项的位置）、input（输入字符串，等于 str）
let str = "I love JavaScript"; let result = (/Java(Script)/); con( result[0] ); // JavaScript（完全匹配） con( result[1] ); // Script（第一个分组） con( re ); // 2 // 其他信息： con( re ); // 7（匹配位置） con( re ); // I love JavaScript（源字符串） 如果 regexp 带有 g 标记，则它将所有匹配项的数组作为字符串返回，而不包含分组和其他详细信息
let str = "I love JavaScript"; let result = (/Java(Script)/g); con( result[0] ); // JavaScript con( re ); // 1如果没有匹配项，则无论是否带有标记 g ，都将返回 null
let str = "I love JavaScript"; let result = (/HTML/); con(result); // nullAll(regexp)
返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器
const regexp = /t(e)(st(\d?))/g; const str = 'test1test2'; const array = [...All(regexp)]; con(array[0]); // expected output: Array ["test1", "e", "st1", "1"] con(array[1]); // expected output: Array ["test2", "e", "st2", "2"] (regexp)
返回第一个匹配项的位置，如果未找到，则返回 -1
let str = "A drop of ink may make a million think"; con( ( /ink/i ) ); // 10（第一个匹配位置） 这里需要注意的是，search 仅查找第一个匹配项
(regexp)
替换与正则表达式匹配的子串，并返回替换后的字符串。在不设置全局匹配g的时候，只替换第一个匹配成功的字符串片段
const reg1=/javascript/i; const reg2=/javascript/ig; con('hello Javascript Javascript Javascript'.replace(reg1,'js')); //hello js Javascript Javascript con('hello Javascript Javascript JavaScript'.replace(reg2,'js')); //hello js js js (regexp)
使用正则表达式（或子字符串）作为分隔符来分割字符串
con('12, 34, 56'.split(/,\s*/)) // 数组 ['12', '34', '56']#regexp.exec(str)
regexp.exec(str) 方法返回字符串 str 中的 regexp 匹配项，与以前的方法不同，它是在正则表达式而不是字符串上调用的
根据正则表达式是否带有标志 g，它的行为有所不同
如果没有 g，那么 regexp.exec(str) 返回的第一个匹配与 (regexp) 完全相同
如果有标记 g，调用 regexp.exec(str) 会返回第一个匹配项，并将紧随其后的位置保存在属性regexp.lastIndex 中。 下一次同样的调用会从位置 regexp.lastIndex 开始搜索，返回下一个匹配项，并将其后的位置保存在 regexp.lastIndex 中
let str = 'More about JavaScript at ;; let regexp = /javascript/ig; let result; while (result = regexp.exec(str)) { con( `Found ${result[0]} at position ${re}` ); // Found JavaScript at position 11 // Found javascript at position 33 }regexp.test(str)
查找匹配项，然后返回 true/false 表示是否存在
let str = "I love JavaScript"; // 这两个测试相同 con( /love(str) ); // true应用场景
通过上面的学习，我们对正则表达式有了一定的了解
下面再来看看正则表达式一些案例场景：
验证QQ合法性（5~15位、全是数字、不以0开头）：
const reg = /^[1-9][0-9]{4,14}$/ const isvalid = (s)校验用户账号合法性（只能输入5-20个以字母开头、可带数字、“_”、“.”的字串）：
var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/; const isvalid = (s)将url参数解析为对象
const protocol = '(?<protocol>https?:)'; const host = '(?<host>(?<hostname>[^/#?:]+)(?::(?<port>\\d+))?)'; const path = '(?<pathname>(?:\\/[^/#?]+)*\\/?)'; const search = '(?<search>(?:\\?[^#]*)?)'; const hash = '(?<hash>(?:#.*)?)'; const reg = new RegExp(`^${protocol}\/\/${host}${path}${search}${hash}$`); function execURL(url){ const result = reg.exec(url); if(result){ re = re || ''; return re; } return { protocol:'',host:'',hostname:'',port:'', pathname:'',search:'',hash:'', }; } con(execURL('https://localhost:8080/?a=b#xxxx')); protocol: "https:" host: "localhost:8080" hostname: "localhost" port: "8080" pathname: "/" search: "?a=b" hash: "#xxxx"再将上面的search和hash进行解析
function execUrlParams(str){ str = (/^[#?&]/,''); const result = {}; if(!str){ //如果正则可能配到空字符串，极有可能造成死循环，判断很重要 return result; } const reg = /(?:^|&)([^&=]*)=?([^&]*?)(?=&|$)/y let exec = reg.exec(str); while(exec){ result[exec[1]] = exec[2]; exec = reg.exec(str); } return result; } con(execUrlParams('#'));// {} con(execUrlParams('##'));//{'#':''} con(execUrlParams('?q=3606&src=srp')); //{q: "3606", src: "srp"} con(execUrlParams('test=a=b=c&&==&a='));//{test: "a=b=c", "": "=", a: ""} ECMAScript正则表达式6个最新特性
1. dotAll模式(s选项)
这个特性已经在ECMAScript 2018正式发布了。
默认情况下，.可以匹配任意字符，除了换行符:
('foo\nbar'); // false另外，.不能匹配Unicode字符，需要使用u选项启用Unicode模式才行。
ES2018引入了dotAll模式，通过s选项可以启用，这样，.就可以匹配换行符了。
('foo\nbar'); // true2. Lookbehind断言
这个特性已经在ECMAScript 2018正式发布了。
ECMAScript目前仅支持lookahead断言。
下面示例是Positive lookahead，匹配字符串“42 dollars”中紧跟着是”dollars”的数字：
const pattern = /\d+(?= dollars)/u; const result = ('42 dollars'); con(result[0]); // 打印42下面示例是Negative lookahead，匹配字符串“42 pesos”中紧跟着的不是”dollars”的数字:
const pattern = /\d+(?! dollars)/u; const result = ('42 pesos'); con(result[0]); // 打印42ES2018添加了lookbehind断言。
下面示例是Positive lookbehind，匹配字符串“$42”中前面是”\$”的数字:
const pattern = /(?<=\$)\d+/u; const result = ('$42'); con(result[0]); // 打印42下面示例是Negative lookbehind，匹配字符串“$42”中前面不是是”\$”的数字:
const pattern = /(?<!\$)\d+/u; const result = ('€42'); con(result[0]); // 打印42Fundebug专注于网页、微信小程序、微信小游戏，支付宝小程序，React Native，Node.js和Java线上BUG实时监控，欢迎免费试用
3. Named capture groups
这个特性已经在ECMAScript 2018正式发布了。
目前，正则表达式中小括号匹配的分组是通过数字编号的：
const pattern = /(\d{4})-(\d{2})-(\d{2})/u; const result = ('2017-01-25'); con(result[0]); // 打印"2017-01-25" con(result[1]); // 打印"2017" con(result[2]); // 打印"01" con(result[3]); // 打印"25"这样很方便，但是可读性很差，且不易维护。一旦正则表达式中小括号的顺序有变化时，我们就需要更新对应的数字编号。
ES2018添加named capture groups, 可以指定小括号中匹配内容的名称，这样可以提高代码的可读性，也便于维护。
const pattern = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u; const result = ('2017-01-25'); con(re.year); // 打印"2017" con(re.month); // 打印"01" con(re.day); // 打印"25"4. Unicode property escapes
这个特性已经在ECMAScript 2018正式发布了。
Unicode标准为每一个字符分配了多个属性。比如，当你要匹配希腊语字符时，则可以搜索Script_Extensions属性为Greek的字符。
Unicode property escapes使得我们可以使用ECMAScript正则表达式直接匹配Unicode字符的属性：
const regexGreekSymbol = /\p{Script_Extensions=Greek}/u; con('π')); // 打印true5. S
这个特性还处在Stage 3 Draft
g和y选项通常用于匹配一个字符串，然后遍历所有匹配的子串，包括小括号匹配的分组。S让这个操作变得更加简单了。
const string = 'Magic hex numbers: DEADBEEF CAFE 8BADF00D'; const regex = /\b[0-9a-fA-F]+\b/g; for (const match of All(regex)) { con(match); }每一个迭代所返回的match对象与regex.exec(string)所返回的结果相同：
// Iteration 1: [ 'DEADBEEF', index: 19, input: 'Magic hex numbers: DEADBEEF CAFE 8BADF00D' ] // Iteration 2: [ 'CAFE', index: 28, input: 'Magic hex numbers: DEADBEEF CAFE 8BADF00D' ] // Iteration 3: [ '8BADF00D', index: 33, input: 'Magic hex numbers: DEADBEEF CAFE 8BADF00D' ]注意，这个特性还处在Stage 3 Draft，因此还存在变化的可能性，示例代码是根据最新的提案写的。另外，浏览器也还没有支持这个特性。S最快可以被加入到ECMAScript 2019中。
6. 规范RegExp遗留特性
这个提案还处在Stage 3 Draft
这个提案规范了RegExp的遗留特性，比如RegExp.方法以及它的静态属性从RegExp.$1到RegExp.$9。虽然这些特性已经弃用(deprecated)了，但是为了兼容性我们不能将他们去。因此，规范这些RegExp遗留特性是最好的方法。因此，这个提案有助于保证兼容性。
常用验证
/** * @param {string} path * @returns {Boolean} */ export function isExternal(path) { return /^(https?:|mailto:|tel:)/.test(path) } /** * @param {string} str * @returns {Boolean} */ export function validUsername(str) { const valid_map = ['admin', 'editor'] return valid_map.indexO()) >= 0 } /** * @param {string} url * @returns {Boolean} */ export function validURL(url) { const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/ return reg.test(url) } /** * @param {string} str * @returns {Boolean} */ export function validLowerCase(str) { const reg = /^[a-z]+$/ return reg.test(str) } /** * @param {string} str * @returns {Boolean} */ export function validUpperCase(str) { const reg = /^[A-Z]+$/ return reg.test(str) } /** * @param {string} str * @returns {Boolean} */ export function validAlphabets(str) { const reg = /^[A-Za-z]+$/ return reg.test(str) } /** * @param {string} email * @returns {Boolean} */ export function validEmail(email) { const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ return reg.test(email) } /** * @param {string} str * @returns {Boolean} */ export function isString(str) { if (typeof str === 'string' || str instanceof String) { return true } return false } /** * @param {Array} arg * @returns {Boolean} */ export function isArray(arg) { if (typeof Array.isArray === 'undefined') { return Object.(arg) === '[object Array]' } return Array.isArray(arg) } TS版
/** * @param {string} path * @returns {Boolean} */ export function isExternal(path) { return /^(https?:|mailto:|tel:)/.test(path); } /** * @param {string} str * @returns {Boolean} */ export function validUsername(str) { const valid_map = ['admin', 'editor']; return valid_map.indexO()) >= 0; } /** * @param {string} url * @returns {Boolean} */ export function validURL(url) { const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/; return reg.test(url); } /** * @param {string} str * @returns {Boolean} */ export function validLowerCase(str) { const reg = /^[a-z]+$/; return reg.test(str); } /** * @param {string} str * @returns {Boolean} */ export function validUpperCase(str) { const reg = /^[A-Z]+$/; return reg.test(str); } /** * @param {string} str * @returns {Boolean} */ export function validAlphabets(str) { const reg = /^[A-Za-z]+$/; return reg.test(str); } /** * @param {string} email * @returns {Boolean} */ export function validEmail(email) { const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return reg.test(email); } /** * @param {string} phone * @returns {Boolean} */ export function validPhone(phone) { const reg = /^1[3-9][0-9]{9}$/; return reg.test(phone); } /** * @param {string} str * @returns {Boolean} */ export function isString(str) { if (typeof str === 'string' || str instanceof String) { return true; } return false; } /** * @param {Array} arg * @returns {Boolean} */ export function isArray(arg) { if (typeof Array.isArray === 'undefined') { return Object.(arg) === '[object Array]'; } return Array.isArray(arg); } // [修改]-新增-开始 /** * 英文验证 * @param min * @param max * @param value */ export function english(value: string, min = 6, max = 12): boolean { return new RegExp('^[a-z|A-Z]{' + min + ',' + max + '}$').test(value); } /** * 中文验证 * @param min * @param max * @param value */ export function chinese(value: string, min = 2, max = 12): boolean { return new RegExp('^[\u4e00-\u9fa5]{' + min + ',' + max + '}$').test(value); } /** * 非中文 * @param value 内容 * @returns boolean */ export function notChinese(value: string): boolean { return !/[\u4e00-\u9fa5]/.test(value); } /** * 必需数字 * @param min * @param max * @param value */ export function number(value: string, min = 1, max = 20): boolean { return new RegExp('^d{' + min + ',' + max + '}$').test(value); } /** * 必需小数点最大值 * @param min * @param max * @param value */ export function precision(value: string, max = 8, precision = 8): boolean { return new RegExp( '(^[0-9]{1,' + max + '}$)|(^[0-9]{1,' + max + '}[.]{1}[0-9]{1,' + precision + '}$)', ).test(value); } /** * 复杂密码验证 * @param value */ export function pwd(value: string): boolean { if (value && value.length > 15) { const en = /[a-z]/.test(value); const num = /[0-9]/.test(value); const daxie = /[A-Z]/.test(value); const teshu = /[~!@#$%^&*()_+=-\[\]\\,.\/;':{}]/.test(value); return en && num && daxie && teshu; } return false; } // [修改]-新增-结束 给大家分享我收集整理的各种学习资料，前端小白交学习流程，入门教程等回答-下面是学习资料参考。
前端学习交流、自学、学习资料等推荐 - 知乎