JavaScript day9

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.jsvar str="ef ab 12 3acb abcd 33";var pattern=new RegExp("ab","igm");//==> var pattern=/ab/igmconsole.log(pattern);// /ab/gimconsole.log(pattern.lastIndex);//0console.log(pattern.ignoreCase);//trueconsole.log(pattern.global);//trueconsole.log(pattern.multiline);//trueconsole.log(pattern.source);// abconsole.log(pattern.flags);// gimconsole.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/igmvar 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);//16var result = pattern.exec(str);
console.log(result);//null
console.log(pattern.lastIndex);//0var result = pattern.exec(str);
console.log(result);//[ 'ab', index: 3
console.log(pattern.lastIndex);//5var 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!=nullconsole.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)

JavaScript day9相关推荐

QT5百度地图开发学习——qt调用JavaScript函数并传参
文章目录前言一.通信桥梁bridge 二.QT与JS相互通信(调用函数) 1.QT调用js函数前言在上文<QT5百度地图开发学习--控件提升展示地图>中,我们通过控件提升的方式在同 ...
JavaScript, mysql 总结
javaScript 1.JavaScript的使用方式方式一:js的内部方式向浏览器打印内容: document.write("hello!") ; 浏览器中 ...
【AJAX】JavaScript的面向对象
Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...
【JavaScript总结】JavaScript语法基础：JS高级语法
作用域链: 1.JS中只有函数能够限定作用域的范围: 2.变量处理在制定的函数范围内,还有一个特殊的作用域,就是没有用var 声明的全局作用域 3.js中的作用域链是为了清晰的表示出所有变量的作用范围 ...
【JavaScript总结】JavaScript语法基础：DOM
->DOM的理解:文档对应dom树 ->有了DOM能做什么:DOM的操作 html文档做为DOM树模型,DOM树的节点就是对象.对象会触发事件来执行一些事件代码. C#中的事件是一个委托变 ...
【JavaScript总结】JavaScript语法基础：JS编码
运算符数学:+. -. *. / 逻辑:>. < .>= .<=. == . !=.&&.|| . === .!==(完全等于) 对象相关 new delet ...
【JavaScript总结】JavaScript语法基础：数据类型
------>数据类型有哪些? ->基本类型:数字类型,布尔类型,字符串类型 ->引用类型:对象类型,函数类型 ->空类型:null 和 undefined ->运算符: ...
【JavaScript总结】JavaScript发展与学习内容
发展: 最初浏览器是为大学里浏览文档用,从地址栏输入文档地址,找到文档显示. 后来各种需求(购物网站,个人博客)出现,已有功能不能满足需求. 可人们依旧在努力满足这种需求,但实现后的效果很不尽人意. ...
Python：模拟登录、点击和执行 JavaScript 语句案例
案例一:网站模拟登录 # douban.pyfrom selenium import webdriver from selenium.webdriver.common.keys import Keys ...

JavaScript day9

JavaScript day9相关推荐

最新文章

热门文章