• 首页
  • 前端
    • HTML
    • CSS
    • Javascript
    • XML
    • AJAX
  • 前端框架
    • BootStrap
    • Jquery
  • PHP
    • 语法
    • 核心
    • 面向对象
    • PHP7
    • Socket
    • Swoole
  • 数据库
    • Mysql
    • Redis
    • Memcache
    • MongoDB
  • 优化
    • 优化方案
    • 页面静态化
    • Nginx
  • 后台框架与实战
    • Smarty
    • 源码Blog
    • TP3.2
    • TP3.2商城
    • TP5.0
    • TP5.0商城
    • Laravel
    • Laravel在线教育平台
    • Yii
    • Yii手机直播
    • CodeIgniter
    • Yaf
  • 移动开发
    • 微信公众号
    • 混合APP
  • 二次开发
    • DedeCMS
  • Linux
    • 基本操作
    • 环境搭建
  • 版本控制
    • GIT
    • SVN
  • Node.js
  • 资料库
没有结果
查看所有结果
  • 首页
  • 前端
    • HTML
    • CSS
    • Javascript
    • XML
    • AJAX
  • 前端框架
    • BootStrap
    • Jquery
  • PHP
    • 语法
    • 核心
    • 面向对象
    • PHP7
    • Socket
    • Swoole
  • 数据库
    • Mysql
    • Redis
    • Memcache
    • MongoDB
  • 优化
    • 优化方案
    • 页面静态化
    • Nginx
  • 后台框架与实战
    • Smarty
    • 源码Blog
    • TP3.2
    • TP3.2商城
    • TP5.0
    • TP5.0商城
    • Laravel
    • Laravel在线教育平台
    • Yii
    • Yii手机直播
    • CodeIgniter
    • Yaf
  • 移动开发
    • 微信公众号
    • 混合APP
  • 二次开发
    • DedeCMS
  • Linux
    • 基本操作
    • 环境搭建
  • 版本控制
    • GIT
    • SVN
  • Node.js
  • 资料库
没有结果
查看所有结果
没有结果
查看所有结果

JS高级(五)正则、分组、捕获、反向引用、匹配、属性、方法

Mr.Lee 由 Mr.Lee
2018年5月19日
在 Javascript, 前端技术
0
JS高级(五)正则、分组、捕获、反向引用、匹配、属性、方法
0
分享
5
浏览

JavaScript应该掌握的知识:

DOM操作:

元素:获取节点,添加节点,修改节点,删除节点,克隆节点

属性:获取元素的属性,增删改属性

事件绑定:

domObj.onclick = function(){

//这个函数不是直接执行,由用户的行为来触发这个函数

}

常用事件:

window.onload事件:

onclick

onkeyup / onkeydown / onkeypress

onmouseover / onmouseout

onfocus / onblur

onchange

正则表达式

一、概述

1、概述

正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个字符串中是否含有某种子串、将匹配的子串做替换或者从某个字符串中取出符合某个条件的子串等。

匹配就是在某个字符串中查找你想要查找的内容(由正则表达式决定),如果查找到了,就表示匹配。没有查找到就表示不匹配。

abacabad

正则表达式本身是一门独立的技术,可以被大多数编程语言所使用,如Javascript、PHP、Java

2、应用场景

(1)表单验证里面,验证字符的合法性,如邮箱是否合法,手机号是否合法等等。

(2)信息过滤,如论坛帖子或者评论中的非法字符,例如 sql注入、js脚本注入、煽动性的言论。

(3)信息采集,采集别人网站上面的内容,例如整页采集时 筛选出需求的部分

(4)信息替换。

(5)页面伪静态的规则

二、入门案例

1、正则用法说明

这个案例是在字符串str中查找是否有p。

正则语法:

以两条斜线,作为正则表达式起始和结尾的定界符。不能加引号。

match是字符串方法,所以应该由字符串调用。意思是在字符串中匹配要查找的值,如果匹配将返回匹配的内容,如果不匹配返回null。

2、全局修饰符g

g是global,表示全局的意思,它是正则表达式语法中的修饰符,修饰符应该放到定界符(/)的后面。

三、正则语法

1、量词

n+ 匹配任何包含至少一个 n 的字符串。匹配一个或多个前导字符(前导字符就是紧挨着+的前一个字符)

n* 匹配任何包含零个或多个 n 的字符串。前导字符有没有都行

n? 匹配任何包含零个或一个 n 的字符串。

n{X} 匹配包含 X 个 n 的序列的字符串。

n{X,Y} 匹配包含 X 或 Y 个 n 的序列的字符串。

n{X,} 匹配包含至少 X 个 n 的序列的字符串。

n$ 匹配任何结尾为 n 的字符串。从末尾开始匹配

^n 匹配任何开头为 n 的字符串。(注意位置在前面)

^n$ 表示只匹配字符串n。也就是匹配整个字符串。

2、元字符

. 表示单个字符,表示任意字符。除了换行和行结束符。

.* 表示任意字符串(0个或多个任意字符,除了换行和行结束符)

\w 匹配任何数字、字母、下划线。一个\w表示一个字符。

\W 匹配任何非数字、非字母、非下划线。

\d 查找数字。

\D 查找非数字字符。

\s 查找空白字符。

\S 查找非空白字符。

\b 匹配单词边界。(边界字母个数没有限制;\b放前面表示匹配单词前面的边界,\b表示匹配单词后面的边界)

\B 匹配非单词边界。

\n 查找换行符。

\r 查找回车符。

\t 查找制表符。

3、方括号

方括号表示一个范围,也称为字符簇。

[abc] 查找方括号之间的任何字符。

[^abc] 查找任何不在方括号之间的字符。(方括号中的^表示取反)

[0-9] 查找任何从 0 至 9 的数字。表示一个字符

[a-z] 查找任何从小写 a 到小写 z 的字符。

[A-Z] 查找任何从大写 A 到大写 Z 的字符。

[A-z] 查找任何从大写 A 到小写 z 的字符。包括下划线。

[5-8] 查找5 <= 目标 <= 8的字符

(red|blue|green) 查找任何指定的选项。(竖线|表示或者)

4、修饰符

i 执行对大小写不敏感的匹配。

g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。

m 执行多行匹配。

5、转义字符

四、分组/捕获和反向引用

捕获和反向引用的语法的解释:

正则中出现的小括号,就叫捕获或者分组

在正则语法中(在/…/内),在捕获的后面,用“\1”来引用前面的捕获。用\2表示第二个捕获的内容….

在正则语法外(如replace时),用“$1”来引用前面的捕获。

禁止引用

(?:正则) 这个小括号中的内容不能够被引用

五、匹配中文(utf-8编码)

每个字符(中文、英文字母、数字、各种符号、拉丁文、韩文、日文等)都对应着一个Unicode编码。

查看Unicode编码,找到中文的部分,然后获取中文的Unicode编码的区间,就可以用正则匹配了。

中文的Unicode编码从4E00开始,到9FA5结束。

[4E00-9FA5]

完整的Unicode编码表:http://blog.csdn.net/hherima/article/details/9045861

六、环视(断言/零宽断言)

every(?=n) 匹配任何其后紧接指定字符串 n 的字符串。

查找a,什么样的a呢?后面必须是b的a

every(?!n) 匹配任何其后没有紧接指定字符串 n 的字符串。

查找a,什么样的a呢?后面不能是b的a

另外,还会看到(?!B)[A-Z]这种写法,其实它是[A-Z]范围里,排除B的意思,前置的(?!B)只是对后面数据的一个限定,从而达到过滤匹配的效果。

七、正则对象的属性和方法

正则对象中的成员方法和属性的正确调用方式:

1、exec方法和lastIndex属性

exec方法执行一个正则匹配,只匹配一次,匹配到结果就返回一个数组类型的结果,匹配不到就返回null。并将表示匹配的位置 置为下一个匹配的位置。

lastIndex一个整数,标示开始下一次匹配的字符位置。没有更多匹配重置lastIndex为0.

依次调用exec匹配下一个的例子:

匹配带子表达式的例子:

带子表达式并且依次调用的例子:

2、test方法

test方法检测目标字符串和正则表达式是否匹配,如果匹配返回true,不匹配返回false。

八、支持正则表达式的 String 对象的方法

1、search()

在字符串中搜索符合正则表达式的结果。如果找到结果返回结果的位置,停止向后检索,也就是说忽略全局标识符g;如果没有匹配结果,返回-1.

2、match()

在字符串中检索匹配正则表达式的子串;如果匹配,返回包含匹配结果的一个数组;不匹配返回null。

不加全局g的情况:

获取的结果只是第一个匹配的内容,匹配的内容中的第一个单元是匹配的结果,后面的单元是子表达式

加全局的g的情况:

获取的结果是所有匹配的内容,但是不包含子表达式。

多次调用和调用一次效果一样。

3、split()

将字符串分割成数组:

4、replace()替换

默认只替换一次,加g全部替换

替换的时候,使用”$1″表示第一个字表达式:

替换abc为a[a-b-c]c hds h[h-d-s]s

替换aaa bbb ccc为Aaa Bbb Ccc

九、案例

1、匹配手机号格式是否正确

要求:

基本的要求:11位,1打头,纯数字

特别精细的话,必须联系各大运营商,查看23位都是什么,比如有136的,但是可以没有163的。

2、匹配邮箱格式是否正确

邮箱:

@前面有4~16个字符(都可以有数字,字母,下划线,点 ,中横线)

@后面点前面:允许数字字母组合,长度2~10位

点后面:只允许出现字母,长度为2~5;

还有一种情况是后面是两个点,如xxxx@xx.com.cn

3、解决结巴程序

把叠字的字符串,换成单子,比如,“今今今今天天天天天天天天中午吃吃吃了泡面”换成“今天中午吃了泡面”

4、用户名验证

注册的时候,要求用户名:长度4~10位,不能是纯数字,不能是纯字母,不能有特殊符号,不能以数字打头。

十、PHP中的正则表达式

语法和JavaScript中的正则语法基本一致。

PHP中的正则函数:

1、preg_match()

基础语法练习:

基础语法和js中正则语法基本相同。

具体查看preg_match的用法:

带有子表达式的例子:

2、preg_match_all();

执行正则表达式的全局匹配

查看匹配情况(不带子表达式):

查看匹配情况(带子表达式):

3、preg_replace();

案例:解决贪婪问题?

4、php中匹配中文

标签: 分组匹配反向引用属性捕获方法正则
上一篇文章

XML 概述、入门、用途、语法、接口调用、电子词典、DOM操作XML

下一篇文章

JS高级(四)原型链、定义类或对象、私有和封装、静态属性和方法、继承、操作符 instanceof、for…in、顶层函数、贪吃蛇

下一篇文章
JS高级(五)正则、分组、捕获、反向引用、匹配、属性、方法

JS高级(四)原型链、定义类或对象、私有和封装、静态属性和方法、继承、操作符 instanceof、for…in、顶层函数、贪吃蛇

发表回复 取消回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Search

没有结果
查看所有结果

About Me

个人随笔

Winston Lee

Programmer

Hello & welcome to my blog! My name is Winston Lee and am a programmer and am keen on sharing.

Winston Lee

About Me

Hello & welcome to my blog! My name is Winston Lee and am a programmer and am keen on sharing.

Categories

  • AJAX
  • BootStrap
  • CodeIgniter
  • CSS
  • DedeCMS
  • GIT
  • HTML
  • Javascript
  • Jquery
  • Laravel
  • Laravel在线教育平台
  • Linux
  • Memcache
  • MongoDB
  • MVC
  • Mysql
  • Nginx
  • Node
  • PDO
  • PHP
  • PHP7
  • PHP基本语法
  • PHP核心编程
  • Redis
  • Smarty
  • Socket
  • SVN
  • Swoole
  • TP3.2
  • TP3.2商城
  • TP5.0
  • TP5.0商城
  • XML
  • Yaf
  • Yii
  • Yii手机直播
  • 二次开发
  • 优化方案
  • 前端技术
  • 前端框架
  • 后台框架
  • 基本操作
  • 微信公众号
  • 数据库
  • 未分类
  • 混合APP
  • 源码Blog项目
  • 版本控制
  • 环境搭建
  • 移动端开发
  • 网站优化
  • 资料
  • 面向对象
  • 面向对象编程
  • 页面静态化

Tags

DOM Json RBAC 事件 传参 函数 分页 判断语句 匿名函数 变量 图片上传 存储过程 安装 对象 封装 属性 接口 控制器 数据库操作 数据类型 数据表 数组 文件上传 无刷新分页 权限 标签 模型 正则 流程控制 目录结构 算法 类 索引 继承 缩略图 表关系 视图 路由 运算符 选择器 递归 配置 错误处理 页面静态化 验证码
  • 首页
  • 前端
  • 前端框架
  • PHP
  • 数据库
  • 优化
  • 后台框架与实战
  • 移动开发
  • 二次开发
  • Linux
  • 版本控制
  • Node.js
  • 资料库

沪公网安备31011502400873 | 沪ICP备2024050435号-3

没有结果
查看所有结果
  • 首页
  • 前端
    • HTML
    • CSS
    • Javascript
    • XML
    • AJAX
  • 前端框架
    • BootStrap
    • Jquery
  • PHP
    • 语法
    • 核心
    • 面向对象
    • PHP7
    • Socket
    • Swoole
  • 数据库
    • Mysql
    • Redis
    • Memcache
    • MongoDB
  • 优化
    • 优化方案
    • 页面静态化
    • Nginx
  • 后台框架与实战
    • Smarty
    • 源码Blog
    • TP3.2
    • TP3.2商城
    • TP5.0
    • TP5.0商城
    • Laravel
    • Laravel在线教育平台
    • Yii
    • Yii手机直播
    • CodeIgniter
    • Yaf
  • 移动开发
    • 微信公众号
    • 混合APP
  • 二次开发
    • DedeCMS
  • Linux
    • 基本操作
    • 环境搭建
  • 版本控制
    • GIT
    • SVN
  • Node.js
  • 资料库

沪公网安备31011502400873 | 沪ICP备2024050435号-3