常见的HTML事件与正则表达式
2022/9/10 6:55:35
本文主要是介绍常见的HTML事件与正则表达式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
/* *作者:呆萌老师 *☑csdn认证讲师 *☑51cto高级讲师 *☑腾讯课堂认证讲师 *☑网易云课堂认证讲师 *☑华为开发者学堂认证讲师 *☑爱奇艺千人名师计划成员 *在这里给大家分享技术、知识和生活 *各种干货,记得关注哦! *vx:it_daimeng */
- 常用事件
常见的HTML事件
下面是一些常见的HTML事件的列表:
事件 |
描述 |
onchange |
HTML 元素改变 |
onclick |
用户点击 HTML 元素 |
onmouseover |
用户在一个HTML元素上移动鼠标 |
onmouseout |
用户从一个HTML元素上移开鼠标 |
onkeydown |
用户按下键盘按键 |
onload |
浏览器已完成页面的加载 |
- 正则表达式
1.组成部分:
一个正则表达式由4个部分组成:定界符 原子 元字符 模式修正符
reg="//" //为定界符 也可以是{} || 等
reg="/a/" a就是原子(最小的匹配单位) 在一个正则表达式中 至少有一个原子
reg="/\d{5}/" // 5代表 元字符 不能单独使用 用来扩展和限定原子的功能
reg="/abc/i" //i 代表 模式修正符 用来修正模式(正则) 对整个正则表达式进行修正的 所以要写在定界符外面
2.正则表达式的原子
1)打印字符(a-z A-Z !@#$%^&*()_+ 0-9) 和非打印字符(\n \t )
2)转义字符 \
3)特殊字符加上\ 变为普通字符
4)部分普通字符加上\ 变为特殊字符 如 \n \t \r
5)正则元素
[…] 查找方括号之间的任何字符
[^…] 查找任何不在方括号之间的字符
[a-z] 查找任何从小写 a 到小写 z 的字符
[A-Z] 查找任何从大写 A 到大写 Z 的字符
[A-z] 查找任何从大写 A 到小写 z 的字符
. 查找单个字符,除了换行和行结束符
\w 查找单词字符,等价于[a-zA-Z0-9]
\W 查找非单词字符,等价于[^a-zA-Z0-9]
\s 查找空白字符
\S 查找非空白字符
\d 查找数字,等价于[0-9]
\D 查找非数字字符,等价于[^0-9]
\b 匹配单词边界
\r 查找回车符
\t 查找制表符
\0 查找 NULL 字符
\n 查找换行符
3 . 元字符
{n,m} 匹配前一项至少n次,但不能超过m次
{n,} 匹配前一项n次或更多次
{n} 匹配前一项n次
n? 匹配前一项0次或者1次,也就是说前一项是可选的,等价于{0,1}
n+ 匹配前一项1次或多次,等价于{1,}
n* 匹配前一项0次或多次,等价于{0,}
n$ 匹配任何结尾为 n 的字符串
^n 匹配任何开头为 n 的字符串
?=n 匹配任何其后紧接指定字符串 n 的字符串
?!n 匹配任何其后没有紧接指定字符串 n 的字符串
- 模式修订符
i |
执行对大小写不敏感的匹配。 |
g |
执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 |
m |
执行多行匹配。 |
- 常用函数
test方法
检索字符串中指定的值。返回 true 或 false。
如果字符串 string 中含有与 RegExpObject 匹配的文本,则返回 true,否则返回 false。
search方法
search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。
返回值: stringObject 中第一个与 regexp 相匹配的子串的起始位置。
注释:如果没有找到任何匹配的子串,则返回 -1。
search() 方法不执行全局匹配,它将忽略标志 g。它同时忽略 regexp 的 lastIndex 属性,并且总是从字符串的开始进行检索,这意味着它总是返回 stringObject 的第一个匹配的位置。
match方法
match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。
字符串对象的match方法与正则对象的exec方法比较类似:
但是如果正则表达式带有g修饰符,那么match方法与exec方法就有差别了:
可以看到match返回了所有成功匹配的结果,但是exec方法只返回了一个。
replace方法
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
返回值:一个新的字符串,是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。
字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串,然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g,那么 replace() 方法将替换所有匹配的子串。否则,它只替换第一个匹配子串。
split方法
split(‘字符串的分割正则','返回数组的最大成员数');返回分割后各部分组成的数组
6.常用的正则表达式
常用的正则表达式
匹配国内电话号码:\d{3}-\d{8}|\d{4}-\d{7}
如 0511-4405222 或 021-87888822
匹配QQ号:[1-9][0-9]{4,}
从10000开始
邮政编码:[1-9]\d{5}(?!\d)
邮政编码为6位数字
匹配身份证:/^(\d{14}|\d{17})(\d|[xX])$/
匹配规则:身份证号码有15位或者18位,其中最后一位可能是X,其他全是数字
匹配ip地址:\d+.\d+.\d+.\d+
匹配帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线):^[a-zA-Z][a-zA-Z0-9_]{4,15}$ 表单验证时很实用
匹配中文字符: /[\u4E00-\u9FA5\uf900-\ufa2d]/
使用 Unicode,必须使用\u开头,接着是字符编码的四位16进制表现形式
匹配Email地址:
/^([a-zA-Z_0-9-])+@([a-zA-Z_0-9-])+(.[a-zA-Z_0-9-])+$/
邮箱的规则是: 由3部分组成
由1个或者多个字母数字下划线和杠 + @ + 1个或者多个字母数字下划线和杠 + . + 1个或者多个字母数字下划线和杠
匹配网址URL:[a-zA-z]+://[^\s]*
判断字符串是不是由数字组成: /^\d*$/
限制文本框只能输入数字和小数点(二位小数点):
/^\d*.?\d{0,2}$/
说明:开头有0个或者多个数字,(?表示匹配前一项0次或者多次)中间有0个或者1个小数点,小数点后面有0个或者最多2个数字
用户名正则: /^[\u4E00-\u9FA5\uf900-\ufa2d\w]{4,16}$/
匹配规则:只能是中文,英文,数字,下划线,4-16个字符
匹配中文字符正则:/[\u4E00-\u9FA5\uf900-\ufa2d]/
\w是 匹配英文,数字,下划线
匹配英文地址:/^[a-zA-Z][.a-zA-Z\s,0-9]*?[a-zA-Z]+/匹配规则:包含点,字母,空格,逗号,数字,但是开头和结尾必须为字母分析:开头必须为字母可以这样写/[a−zA−Z]/结尾必须为字母可以这样写:/[a−zA−Z]+/
中间包含点,字母,空格,逗号,数字的正则:/[.a-zA-Z\s,0-9]*?/
外面的*号是0个或者多个,后面的问号? 代表可有可无;有就匹配,没有就不匹配;
匹配价格:/^\d*(.\d{0,2})?$/
匹配规则: 开头有0个或者多个数字,中间可能有一个小数点,后面有可能有0-2位小数
单词的首字母大写:/\b(\w)|\s(\w)/g
验证日期格式:/^\d{4}[-\/]\d{1,2}[-\/]\d{1,2}$/
日期格式有2种 第一种是yyyy-mm-dd 或 yyyy/mm/dd
这篇关于常见的HTML事件与正则表达式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-15AntDesign项目实战:新手入门与初级应用教程
- 2024-11-15AntDesign-Form-rules项目实战:新手指南
- 2024-11-14ESLint课程:初学者指南
- 2024-11-14Form.List 动态表单课程:新手入门教程
- 2024-11-14Redux课程:新手入门完全指南
- 2024-11-13MobX 使用入门教程:轻松掌握前端状态管理
- 2024-11-12前端编程资料:新手入门指南与初级教程
- 2024-11-12前端开发资料入门指南
- 2024-11-12前端培训资料:适合新手与初级用户的简单教程
- 2024-11-12前端入门资料:新手必读指南