2021-01-13 JS 正则表达式的简单使用

什么是正则表达式？

正则表达式是构成搜索模式（search pattern）的字符序列。
当搜索文本中的数据时，可使用搜索模式来描述搜索的内容。
正则表达式可以是单字符，或者更复杂的模式。
正则表达式可用于执行所有类型的文本搜索和文本替换操作。

正则表达式模式

括号用于查找一定范围的字符串：

表达式	描述
[abc]	查找方括号之间的任何字符。 比如像查找某个字符串是否含有‘1’ 或者‘2’ 就可以写成[12]
[0-9]	查找任何从 0 至 9 的数字。 如果想查找包含英文字母的就可以写成 [a-zA-Z]
(x|y)	查找由 | 分隔的任何选项。 标记一个子表达式的开始和结束位置。子表达式可以获取供以后使用。要匹配这些字符，请使用 ( 和 )。

元字符（Metacharacter）是拥有特殊含义的字符：

元字符	描述
[abc]	查找方括号之间的任何字符。 比如像查找某个字符串是否含有‘1’ 或者‘2’ 就可以写成[12]
[0-9]	查找任何从 0 至 9 的数字。 如果想查找包含英文字母的就可以写成 [a-zA-Z]
(x|y)	查找由 | 分隔的任何选项。 标记一个子表达式的开始和结束位置。子表达式可以获取供以后使用。要匹配这些字符，请使用 ( 和 )。

Quantifiers 定义量词：

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

• 语法

/pattern/modifiers;

• 实例

var patt = /abc/i;

• 例子解释：

/abc/i 是一个正则表达式。
abc 是模式（pattern）（在搜索中使用）。
i 是修饰符（把搜索修改为大小写不敏感）。

js对于正则表达式的应用，字符串提供了 search方法 和 replace方法

• search方法是可以查找某个字符串中是否含有符合正则表达式的字符串，返回出现符合字符串的索引位置,如果没找到返回-1。

replace方法是可以查找字符串符合正则表达式的字符串并替换成其他的字符串。replacedemo可以参考
js replace方法渲染文本字符

js对于正则表达式的应用，正则表达式提供了 test，exec方法

• test() 是一个正则表达式方法。

=>它通过模式来搜索字符串，然后根据结果返回 true 或 false。
下面的例子搜索字符串中的字符 “e”：

/e/.test("The best things in life are free!"); //true

• exec()

exec() 方法是一个正则表达式方法。
它通过指定的模式（pattern）搜索字符串，并返回已找到的文本。
如果未找到匹配，则返回 null。

/e/.exec("The best things in life are free!"); //e

本文知识点摘抄字w3cschool 点此了解详细知识 https://www.w3school.com.cn/js/js_regexp.asp
在页面需要对某个输入框的值需要解析出需要的数据进行存入数据库，所以使用了正则表达式，在此记录下。

需求1：
需要对符合格式〔***〕 号格式的字符分别拿到 〔 〕的数字，比如〔2021〕1号 要拿到年限2021 。

• 方法1 exec

年限是两个符号中间包着的部分，所以正则表达式是 /〔\d+〕/,利用js 的正则表达式对象的exec方法进行截取

var data = /〔\d+〕/.exec("〔2021〕1号");//exec方法执行返回的对象就是正则匹配的结果 ,可以看到他的0属性就是我们匹配出的字符串
var value = data[0].substring(1,data[0].length-1);  //截取字符串的数字部分，从索引1开始，截取到倒数第二位。注意substr是(start,length)  substring是(start,end);

调试结果：

• 方法2 search

利用字符串的search方法，分别去搜索两个符号，如果字符串中存在就会返回索引，只需要利用两个符号的索引进行截取就可以了。

var str = "〔2021〕1号";
var start = str.search(/〔/);
var end = str.search(/〕/);
var value = str.substring(start+1,end);

调试结果

需求2 ：
需要对某个输入框的值进行校验，只能输入数字

利用 test 方法，正则表达式的test方法可以判断某个字符串是否符合表达式。

 	/^\d+$/.test("123456ds456");      //false
 /^\d+$/.test("12345456");      //true

需求3：
textarea存储的文本想要渲染到p标签中，他的换行是以\n存储的，在p标签中无法实现换行，这就需要使用replace方法来进行替换，把\n换成<br>标签,这样在p标签中就可以文本换行了

'第一行\n第二行\n第三行'.replace(/\n/g,'<br>');  //执行结果:"第一行<br>第二行<br>第三行"