JavaScript day9_the future has arrived,it commences now-CSDN博客

本文链接：https://blog.csdn.net/qq_58614993/article/details/120193395

js的起源：减轻服务器的压力，在客户端对用户提交的数据进行验证=>弹框报错、红色报错、错误数据删除、提交给服务端、完成响应
正则语法：特殊的字符去指代一个特定含义 Regular Expression
针对该网页中的正则应用举例说明：https://preview.pro.ant.design/dashboard/analysis

开发思路：
1.验证合法性
2.业务处理
3.数据传输

在字符串中获取匹配的内容 :

“my website is http://192.168.15.131:8888/index”
请你检索出url,并且分别拿到协议，ip,端口，路径
问题：如何根据正则表达式查询出所有的符合模式的内容
var str = “my phone is 18812344321, my emil is lili@briup.com, my name is charles, my friend is jacky, his phone is 17751229900, my friend is tom, his phone is 15912344432.”
爬虫:

获取网页文件
从网页中读取所有的字符串
在字符串中过滤
从京东首页中成功爬取所有的图片地址

正则表达式:独立学科，用于匹配字符串。常用于检索，论文查重，爬虫，表单验证，软件测试。
1.实例化正则表达式
RegExp对象用于将文本与一个模式匹配
1.1.正则表达式对象初始化
正则表达式
是一个描述字符模式的对象。
正则表达式对象的创建
1.构造函数
第一个参数包括正则表达式的主体部分，即正则表达式直接量中两条斜线之间的文本,第二个参数指定正则表达式的修饰符。只能传入i,m, g或者其组合，可以省略
var pattern =new RegExp(“正则表达式”,“修饰符”)
var pattern =new RegExp(“abc”,“ig”);
2.正则表达式字面量
var pattern = /正则表达式/修饰符;
var pattern = /abc/ig;
字面量
由斜杠包围
构造函数
通过RegExp构造函数构建
var p=new RegExp(“正则表达式source”，“模式flags”)
//vi declare.js
var pattern1 =new RegExp(“abc”,“ig”);
var pattern2 = /abc/ig;
console.log(pattern1,pattern2);
console.log(typeof parttern1,typeof pattern2);

var pattern1 = new RegExp(“ab+c”,“i”);
var pattern2 = /ab+c/i;
var pattern1 = new RegExp("\w{1,3}",“igm”);
var pattern2 = /\w{1,3}?/igm;
console.log(pattern1,pattern2);
1.2.修饰符
修饰符
g global 全局
i ignore case 不区分大小写
m multiline 多行

1.3.api

属性
原型属性
RegExp.prototype.global 布尔值，表明这个正则表达式是否带有修饰符g
RegExp.prototype.ignoreCase 布尔值，表明这个正则表达式是否带有修饰符i
RegExp.prototype.multiline 布尔值，表明这个正则表达式是否带有修饰符m
RegExp.prototype.lastIndex 如果匹配模式带有g，这个属性存储在整个字符串中下一次检索的开始位置，这个属性会被exec(), test()方法调用到
RegExp.prototype.source 包含正则表达式文本
补充说明：
实例化的时候指定好的值，对象不能进行修改，可读
RegExp.prototype.global
表明正则表达式是否使用了"g"标志。global是一个正则表达式实例的只读属性。
RegExp.prototype.ignoreCase
表明正则表达式是否使用了"i"标志。ignoreCase是一个正则表达式实例的只读属性。
RegExp.prototype.multiline
表明正则表达式是否使用了"m"标志。multiline是一个正则表达式实例的只读属性。
RegExp.prototype.lastIndex
下次索引开始的位置，模式flags中包含g才会维护lastIndex;否则lastIndex为0，每次匹配都从索引0的位置开始
RegExp.prototype.source
返回一个值为当前正则表达式对象的模式文本的字符串，该字符串不会包含正则表达式字面量两边的斜杠以及任何的标志字符
RegExp.prototype.flags
返回一个字符串，由当前正则表达式对象的标志组成

//vi prototype.js
	var str="ef ab 12 3acb abcd 33";
	var pattern=new RegExp("ab","igm");
	//==> var pattern=/ab/igm
	console.log(pattern);// /ab/gim
	console.log(pattern.lastIndex);//0
	console.log(pattern.ignoreCase);//true
	console.log(pattern.global);//true
	console.log(pattern.multiline);//true
	console.log(pattern.source);// ab
	console.log(pattern.flags);// gim
	console.log(pattern.toString()); // /ab/gim

方法
原型方法
RegExp.prototype.test(str)
RegExp.prototype.exec(str)
RegExp.prototype.toString()
RegExp.prototype.toString()返回值：正则表达式的两个参数值
Object.prototype.toString() [Object Object]
RegExp.prototype.toString() /source/flags返回值是正则表达式对象的两个参数
var result = pattern.test(str);
检测一个字符串是否匹配某个模式
参数：字符串
返回值：布尔类型 true代表有符合条件的，false代表没有符合条件的
var p=new RegExp(“source”,”flags”);
var str=”24 bas abc 34”;//来源：表单控件里的值
Boolean p.test(str) 检测字符串str是否匹配正则表达式p,如果匹配返回true，否则返回false
var result = pattern.exec(str)
检索字符串中的正则表达式的匹配
参数字符串
返回值数组或者null
数组：匹配到的结果
如果正则表达式中有修饰符“g”，这时，在pattern中会维护lastIndex属性，记录下一次开始的位置，当第二次执行exec的时候，从lastIndex开始检索。
如果正则表达式中没有修饰符“g”，不会维护lastIndex属性，每次执行从开始位置检索
返回值 p.exec(str) 查找字符串str中符合正则表达式的内容
返回值：
[
匹配的内容
index: 在str中匹配的起始位置
input: 参数字符串
groups: undefined
]

//vi prototype.js
var str="ef ab 12 3acb abcd 33";
var pattern=new RegExp("ab","igm");
//==> var pattern=/ab/igm

var result = pattern.exec(str);
console.log(result);//[ 'ab', index: 3
console.log(pattern.lastIndex);//5
console.log(result[0]);//result[1]
console.log(result.index);
console.log(result.input === str);

var result = pattern.exec(str);
console.log(result);//[ 'ab', index: 14
console.log(pattern.lastIndex);//16

var result = pattern.exec(str);
console.log(result);//null
console.log(pattern.lastIndex);//0

var result = pattern.exec(str);
console.log(result);//[ 'ab', index: 3
console.log(pattern.lastIndex);//5

var result = pattern.test(str);
console.log(result,pattern.lastIndex);//true 16
var result = pattern.test(str);
console.log(result,pattern.lastIndex);//false 0
var result = pattern.test(str);
console.log(result,pattern.lastIndex);//true 5

//pattern.global=false;//这种设置无效
console.log(pattern.global);
var pattern2=/ab/im;
var result = pattern2.test(str);
console.log(result,pattern2.lastIndex);//true 0
var result = pattern2.test(str);
console.log(result,pattern2.lastIndex);//true 0
var result = pattern2.test(str);
console.log(result,pattern2.lastIndex);//true 0

//vi loop-exec.js
var str="ef ab 12 3acb abcd 33";
var pattern=new RegExp("ab","igm");
//1
do{
	var result=pattern.exec(str);
	if(result!=null){
		console.log(result[0],result["index"],pattern.lastIndex);
	}
}while(pattern.lastIndex!=0);
//2
while(true){
	var result = pattern.exec(str);
	if(result){  //result!=null
		console.log(result[0],result["index"],pattern.lastIndex);
	}else{
		break;
	}
}
// 3
while(true){
	var result = pattern.exec(str);
	if(!result){
		break;
	}
	console.log(result[0],result["index"],pattern.lastIndex);
}
// 4
var result = null;
while((result=pattern.exec(str))!=null){
	console.log(result[0],result["index"],pattern.lastIndex);
	if(pattern.global==false){
		break;
	}
}
// 5
var result = null;
while(result=pattern.exec(str)){
	console.log(result[0],result["index"],pattern.lastIndex);
	if(!pattern.global){
		break;
	}
}

2.正则表达式source
所有语言都通用：
PPT指代的规定：字符类、字符集合、边界、分组(匹配多个结果）、数量词
字符类
[直接量]
. (点号，小数点) 匹配任意单个字符，但是行结束符除外
\d 匹配任意阿拉伯数字。等价于[0-9]
\D 匹配任意一个不是阿拉伯数字的字符。等价于[^0-9]。
\w 匹配任意来自基本拉丁字母表中的字母数字字符，还包括下划线。等价于 [A-Za-z0-9_]。
\W 匹配任意不是基本拉丁字母表中单词（字母数字下划线）字符的字符。等价于 [^A-Za-z0-9_]。
\s 匹配一个空白符，包括空格、制表符、换页符、换行符和其他 Unicode 空格。
\S 匹配一个非空白符。
\t 匹配一个水平制表符（tab）
\r 匹配一个回车符（carriage return）
\n 匹配一个换行符（linefeed）
\v 匹配一个垂直制表符（vertical tab）
\f 匹配一个换页符（form-feed）

2.1.直接量字符
正则表达式中的所有字母和数字都是按照字面含义进行匹配的，Javascript正则表达式语法也支持非字母的字符匹配，这些字符需要通过反斜线""作为前缀进行转义。
字符匹配
字母和数字字符自身
\o Null字符（\u0000）
\t 制表符(\u0009)
\n 换行符(\u000A)
\v 垂直制表符(\u000B)
\f 换页符(\u000C)
\r 回车符(\u000D)
字符集合
[xyz] 一个字符集合，也叫字符组。匹配集合中的任意一个字符。你可以使用连字符‘-’指定一个范围。[0-9] [a-z]
[^xyz] 一个反义或补充字符集，也叫反义字符组。也就是说，它匹配任意不在括号内的字符。你也可以通过使用连字符 ‘-’ 指定一个范围内的字符。
边界
^ 匹配输入开始。如果多行（multiline）标志被设为 true，该字符也会匹配一个断行（line break）符后的开始处。
$ 匹配输入结尾。如果多行（multiline）标志被设为 true，该字符也会匹配一个断行（line break）符的前的结尾处。
\b 匹配一个零宽单词边界（zero-width word boundary），如一个字母与一个空格之间。
\B 匹配一个零宽非单词边界（zero-width non-word boundary），如两个字母之间或两个空格之间。

2.2.字符类
将直接量字符单独放进方括号内就组成了字符类，一个字符类可以匹配它所包含的任意字符。例如：/[abc]/ 就和字母"a"、“b”、“c"中的任意一个都匹配。”^{"符号用来定义否定字符类，例如：/[}abc]/ 匹配的是"a"、“b”、"c"之外的所有字符。字符类可以使用连字符来表示字符范围，例如：/[a-z]/，要匹配拉丁字母表中任何字母和数字，[a-zA-Z0-9]
字符匹配
[…] 方括号任意字符
[^…] 不在方括号内的任意字符
. 除换行符和其他unicode行终止符之外的任意字符
\w 任何ASCII字符组成的单词，等价于[A-Za-z0-9]
\W 任何不是ASCII字符组成的单词，等价于[^A-Za-z0-9]
\s 任何Unicode空白符
\S 任何非Unicode空白符的字符
\d 任何ASCII数字，等价于[0-9]
\D 除了ASCII数字之外的任何字符，等价于[^0-9]
[\b] 退格直接量
例如：
[0-9] 匹配中括号中0~9之间任意一个字符等价于 \d
[^0-9] 除了0~9之外的任意字符等价 \D
¹ 使用数字作为一行的开始
[0-9]$ 使用数字作为一行的结尾
[a-z] 匹配中括号a~z之间任意一个字符
\w 基本字符[A-Za-z0-9_]
\W [^A-Za-z0-9_]

//vi example-location.js
// location ^$
var multistr = “abc345abc\nAbc456sdf\nas1111abc\nFFF222GGG”;
console.log(text);
// 查找出以三个字母开头的一句话
// var pattern = /²{3}\w*/mg;
// 查找以三个字母开头并且以三个小写字母结尾的一句话
//var pattern = /³{3}\w*[a-z]{3} $KaTeX parse error: Undefined control sequence: \w at position 34: …= /^[A-Za-z]{3}\̲w̲*[a-z]{3}$ /mg;
//var pattern = /⁴{3}\w*[a-z]{3}$/m;
var result = null;
while(result=pattern.exec(multistr)){
console.log(result);
console.log(pattern.lastIndex);
if(!pattern.global){
break;
}
}

2.3.重复
数量词
x* 匹配前面的模式 x 0 或多次。
x+ 匹配前面的模式 x 1 或多次。等价于 {1,}。
x? 匹配前面的模式 x 0 或 1 次。
x{n} n 是一个正整数。前面的模式 x 连续出现 n 次时匹配
x{n,} n 是一个正整数。前面的模式 x 连续出现至少 n 次时匹配。
x{n,m} n 和 m 为正整数。前面的模式 x 连续出现至少 n 次，至多 m 次时匹配。
x*? 像上面的 * 一样匹配前面的模式 x，然而匹配是最小可能匹配。
x+? 像上面的 + 一样匹配前面的模式 x，然而匹配是最小可能匹配。
x|y 匹配 x 或 y
重复方式
贪婪匹配重复字符时是尽可能多的匹配,默认{1,4}
非贪婪匹配重复字符时是尽可能少地匹配,在待匹配的字符数量词后跟随一个问号即可
例如： {1,4}?
/a+/ 可以匹配一个或者多个连续的字母a, 当使用“aaa”作为匹配字符串时正则表达式会匹配它的三个字符。
/a+?/ 可以匹配一个或者多个连续的字母a, 但是尽可能少地匹配。只能匹配第一个a
字符含义
{n,m} 匹配前一项至少n次，但是不能超过m次
{n,} 匹配前一项n次或者更多次
{n} 匹配前一项n次
? 匹配前一项0次或者1次，也就是说前一项是可选的，等价于{0,1}

匹配前一项1次或者次，等价于{1,}

匹配前一项0次或多次，等价于{0,}
描述某个规则的重复次数
/\d{2,4}/ //匹配2~4个数字
/\w{3}\d?/ //精确匹配三个单词和一个可选择的数字
/\s+javascript\s+/ //匹配前后带有一个或多个空格的字符串"javascript"
[a-z]+ : test.(“hello word” )=true test(“245 _355”).false
电话号码： 0351-1234567 [0-9]{4}-[0-9]{7} \d{4}-\d{7}

//vi example-exec.js
var line = “有道翻译提供即时免费的中文、英语、日语、韩语、法语、德语、俄语、西班牙语、葡萄牙语、越南语、印尼语、意大利语全文翻译、网页翻译、文档翻译服务。”;
//查找“中文”字符串和“火星文”字符串
var pattern=/中文|火星文/img;
//var pattern=/全文|中文/img;
var result=null;
while(result=pattern.exec(line)){
console.log(result);
console.log(pattern.lastIndex);
}

//vi example-test.js
// 检测有没有大于8个字符的单词
// test()方法返回boolean类型，如果匹配上，则为true，否则为false
// 如果是全局匹配的话，会维护一个lastIndex属性，该属性是正则表达式对象的
var str = “He must be a person who is positive and brave enough to make short term sacrifice for long term success.The future has arrived,It commences now”;
console.log(text);
var pattern = /[a-z]{8,}/img;
var result = false;
while(result=pattern.test(str)){
console.log(result,pattern.lastIndex);
if(!pattern.global){
break;
}
}

//vi example-choose.js
var str = “He must java be a (person( who is java00 {positive( and javascript brave (enough{ to make short term javascript01 {sacrifice{ for long term success.The future has arrived,It commences now”;
console.log(str);
// 查找java00和javascript01，并且要00,01
var pattern = /java(script)?(\d{2})/img;
var result = null;
while(result=pattern.exec(str)){
console.log(result);
console.log(result[2]);
console.log(pattern.lastIndex);
}
// var pattern = /java|javascript/img;// 查找java或者javascript
// var pattern = /java(script)??/img;// 查找java 非贪婪匹配，尽可能少的匹配
// 查找被((或者{{或者({或者{(包围的字符串
// var pattern = /[({]\w*[({]/img;
// 查找被((或者{{包围的字符串
//var pattern = /(\w*(|{\w*{/img;
// var pattern = /([({])\w*\1/img;

贪婪匹配
默认情况下，匹配重复字符是尽可能多匹配，而且允许后续的正则表达式继续匹配，称之为贪婪匹配。
非贪婪匹配
在待匹配的字符后跟随一个问号即可，例如："??"、"+?"、"?"、"{1,5}?"
P=\java(script)?\img 只查找的是java

2.4.选择、分组、引用
分组
(x) 匹配 x 并且捕获匹配项。这被称为捕获括号（capturing parentheses）。
\n n 是一个正整数。一个反向引用（back reference），指向正则表达式中第 n 个括号（从左开始数）中匹配的子字符串。
例如：/\w+://\w+(.)\w+\1\w+/
http://www.baidu.com
var str = “my website url is http://127.0.0.1:80/cms/index.html , my database url is jdbc:mysql://127.0.0.1:3306/cms , this is ok”
var pattern = /(http|jdbc:mysql|ftp)😕/(((\d{1,3}).){3}((\d{1,3})))(😦\d{2,4}))?(/[\w.])/i

选择项
字符"|“用于分隔供选择的字符，选择项的尝试匹配次序是从左到右，知道发现了匹配项，如果左边的选择项匹配，就忽略右边的匹配项，即使它可以产生更好的匹配。
/ab|cd|ef/ 可以匹配字符串"ab"或者"cd"或者"ef”
圆括号作用有多个，一个作用是把单独的项组合成子表达式，一遍可以像处理一个独立的单元那样用"|"、"*"、"+"、"?“等来对单元内的项进行处理。
/java(script)?/ // 可以匹配字符串"java”，也可以匹配字符串"javascript"
子表达式分组
在正则表达式中，圆括号的另一个作用是在完整的模式中定义子模式。当一个正则表达式成功地和目标字符串相匹配时，可以从目标串中抽出和圆括号中的子模式相匹配的部分。
(/[a-z]+(\d+)/)
引用
在正则表达式中，圆括号的再一个作用是允许在同一正则表达式的后部引用前面的子表达式。这是通过在字符"“后加一位或多位数字来实现的。例如”\1"引用的是第一个带圆括号的子表达式。
//vi example-getn.js
// 中括号中的值只有普通字符含义或者对特殊字符使用\进行转义
//(x)匹配 x 并且捕获匹配项
// \n n是一个正整数。一个反向引用（back reference），指向正则表达式中第 n 个括号（从左开始数）中匹配的子字符串。
var line=“abc.efg+123.456++aaa.bbb++ccc.ddd+”;
var pattern=/(\w{3})[.]\w{3}+[+]/img;
while(result=pattern.exec(line)){
console.log(result);
console.log(result[1]);
console.log(pattern.lastIndex);
}
var pattern=/\w{3}([.])\w{3}([+])\2/img;
var result = null;
while(result=pattern.exec(line)){
console.log(result);
console.log(result[2]);
console.log(pattern.lastIndex);
}

String对正则表达式的支持
Javascript中 String对正则表达式的支持
search()
参数为一个正则表达式。如果参数不为正则表达式，则先通过RegExp将其转换为构造函数。不支持全局检索，返回第一个与之匹配的子串的位置，如果找不到匹配的子串，返回-1。类似于正则表达式的 test 方法。
match()
最常用的正则表达式方法，参数为正则表达式。返回由匹配结果组成的数组或者null。当正则表达式中没有g修饰符的时候，就不是全局匹配。这时，数组的第一个元素就为匹配的字符串，剩余的元素则是由正则表达式中用圆括号括起来的子表达式。如果该正则表达式设置为修饰符g,则该方法返回的数组包含字符串中所有匹配结果。类似于正则表达式的 exec 方法
“1 plus 2 equals 3”.match(/\d+/g) //返回[“1”,“2”,“3”]

Javascript中 String对正则表达式的支持
replace()
用以执行检索和替换操作。第一个参数是正则表达式，第二个参数是要替换的字符串。返回替换后的字符串
text.replace(/javascript/gi,“JavaScript”); //不区分大小写将所有javascript转换为JavaScript
split()
将字符串转成数组。参数可以为正则表达式
“1, 2, 3, 4, 5”.split(/\s*,\s*/); //[“1”,“2”,“3”,“4”,“5”] 允许分隔符左右两边留有空白

index/-1  str.search(partten) 查找有没有
arr/obj str.match(pattern)  查询符合条件的匹配项
newstr  str.replace(pattern,repstr)  替换
arr str.split(pattern) 分割字符串
arr str.split(“limiter”)分割字符串

"1 plus 2 equals 3".match(/\d+/g) 	//返回["1","2","3"]
text.replace(/javascript/gi,“JavaScript”); //不区分大小写将所有javascript转换为JavaScript
 "1, 2, 3, 4, 5".split(/\s*,\s*/); 	//["1","2","3","4","5"] 允许分隔符左右两边留有空白

电信采集：
门闸，- 文本文件 -> 数据库
苏E00W5J|9:00|7
苏E00W5J|9:50|8
苏E00W5J|12:00|7
苏E00W5J|17:30|8

//vi string-function.js
//search()
// 查找某个元素在字符串中有没有，有则返回开始位置的索引，没有则返回-1 ,
var str = "He javascriptmust be a person whojavascript is positive and brave enough to makejavascript short term sacrificejavascript for long term success.The javascriptfuture has arrived,It commences now";
var pattern = /javascript/ig;
//var pattern = /javascript1/i;
var index = str.search(pattern);
console.log(index);

// match()  exec()
// 查询所有符合条件的，如果是g，则返回数组。如果不是全局则返回类数组对象
/*与exec()区别：
	1.用法
		pattern.exec(str)
    	str.match(pattern)
    2.返回值
    	exec()
    		类数组对象
    	match()
    		g  数组
    		非g  类数组对象
*/ 
var str = "He javascriptmust be a person whojavascript is positive and brave enough to makejavascript short term sacrificejavascript for long term success.The javascriptfuture has arrived,It commences now";
var pattern1 = /javascript/ig;
var result = str.match(pattern1);
console.log(result);
var result = pattern1.exec(str);
console.log(result);
var result = pattern1.exec(str);
console.log(result);
var pattern2 = /javascript/i;
var result = str.match(pattern2);
console.log(result);
var result = pattern2.exec(str);
console.log(result);
var result = pattern2.exec(str);
console.log(result);

// 替换  replace()
var pattern = /javascript/ig;
var result = str.replace(pattern,"java");
console.log(result);
console.log(str);

/    // 以某种形式分割字符串 split()
var arr = ["terry","briup","lisi","zhangsan"];
var result = arr.join(1);
console.log(result);
// terry1briup1lisi1zhangsan
var result2 = result.split(1);
console.log(result2);

var str = "terry134briup156lisi12zhangsan";
var pattern = /\d+/img;
var result3 = str.split(pattern);
console.log(result3);

//比如后台给了用户现有权限的id,id之间使用&连接的，前端拿到这个数据后，需要转成数组。
var str = '1001 &1002& 1003 & 1004';
console.log(str.split('&'));
console.log(str.split(/\s*&\s*/));