JavaScript面试篇之正则表达式:“get-element-by-id”如何转化成驼峰,常用邮箱、身份证、QQ号等信息如何校验等等
JavaScript面试篇之正则表达式:“get-element-by-id”如何转化成驼峰,常用邮箱、身份证、QQ号等信息如何校验等等
- 前言
- 一、简介
- 二、匹配规则
- 1.修饰符
- 2.括号
- 3.元字符
- 4.量词
- 三、正则截取、替换字符串等操作
- 1.split
- 2.replace
- 3.match
- 四、正则校验字符串场景
- (一)、校验数字
- (二)、校验字符
- (三)、实际中特殊场景
前言
正则表达式(Regular Expression)是一种文本模式,用于匹配字符串。其包括修饰符、方括号、括号、元字符、量词。
正则表达式使用复杂的、带有含义的正则字符串,来匹配某句法规则的目标字符串。
一、简介
创建正则有两种方式:
直接量语法 | RegExp 对象的语法 |
---|---|
/pattern/attributes | new RegExp(pattern, attributes) |
参数 pattern —— 是一个字符串,指定了正则表达式的模式或其他正则表达式。
参数 attributes ——是一个可选的字符串,包含属性 “g”、“i” 和 “m”,分别用于指定全局匹配、区分大小写的匹配和多行匹配。
返回值——一个新的 RegExp 对象,具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串,那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。
如果不用 new 运算符,而将 RegExp() 作为函数调用,那么它的行为与用 new 运算符调用时一样,只是当 pattern 是正则表达式时,它只返回 pattern,而不再创建一个新的 RegExp 对象。
说明:
SyntaxError - 如果 pattern 不是合法的正则表达式,或 attributes 含有 “g”、“i” 和 “m” 之外的字符,抛出该异常。
TypeError - 如果 pattern 是 RegExp 对象,但没有省略 attributes 参数,抛出该异常
var reg=/^a/;
typeof reg // "object"
正则实质是一个对象,其属性如下:
属性 | 描述 |
---|---|
global | RegExp 对象是否具有标志 g。 |
ignoreCase | RegExp 对象是否具有标志 i。 |
lastIndex | 一个整数,标示开始下一次匹配的字符位置。 |
multiline | RegExp 对象是否具有标志 m。 |
source | 正则表达式的源文本。 |
二、匹配规则
1.修饰符
修饰符 | 描述 |
---|---|
i | 执行对大小写不敏感的匹配。 |
g | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 |
m | 执行多行匹配。 |
2.括号
括号用于查找某个范围内的字符:
表达式 | 描述 |
---|---|
[abc] | 查找方括号之间的任何字符。 |
[^abc] | 查找任何不在方括号之间的字符。 |
[0-9] | 查找任何从 0 至 9 的数字。 |
[a-z] | 查找任何从小写 a 到小写 z 的字符。 |
[A-Z] | 查找任何从大写 A 到大写 Z 的字符。 |
[A-z] | 查找任何从大写 A 到小写 z 的字符。 |
[adgk] | 查找给定集合内的任何字符。 |
[^adgk] | 查找给定集合外的任何字符。 |
(red|blue|green) | 查找任何指定的选项。 |
方括号和括号的差别
/[ad]/.test('abs') // true
/(ad)/.test('abs') // false
/(a|d)/.test('abs') // true
/(^ab)/.test("ab") //true
/[^ab]/.test("ab") // false
方括号有着特殊的含义,如上表格里的;而括号代表里面的整体是一个匹配的字符,方括号里的特殊意义则在括号里失效。
3.元字符
元字符(Metacharacter)是拥有特殊含义的字符:
元字符 | 描述 |
---|---|
. | 查找单个字符,除了换行和行结束符。 |
\w | 查找单词字符。 |
\W | 查找非单词字符。 |
\d | 查找数字。 |
\D | 查找非数字字符。 |
\s | 查找空白字符。 |
\S | 查找非空白字符。 |
\b | 匹配单词边界。 |
\B | 匹配非单词边界。 |
\0 | 查找 NUL 字符。 |
\n | 查找换行符。 |
\f | 查找换页符。 |
\r | 查找回车符。 |
\t | 查找制表符。 |
\v | 查找垂直制表符。 |
\xxx | 查找以八进制数 xxx 规定的字符。 |
\xdd | 查找以十六进制数 dd 规定的字符。 |
\uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
4.量词
量词 | 描述 |
---|---|
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 的字符串。 |
?!n | 匹配任何其后没有紧接指定字符串 n 的字符串。 |
三、正则截取、替换字符串等操作
1.split
语法:stringObject.split(separator,howmany)
separator 必需。字符串或正则表达式,从该参数指定的地方分割 stringObject。
howmany 可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。
"2:3:4:5".split(":") //将返回["2", "3", "4", "5"]
"|a|b|c".split("|") //将返回["", "a", "b", "c"]
// 把单词分割为字母,或者把字符串分割为字符
"hello".split("") //可返回 ["h", "e", "l", "l", "o"]
// 只需要返回一部分字符,请使用 howmany 参数:
"hello".split("", 3) //可返回 ["h", "e", "l"]// 特例
"2:3:4:5".split("a") //["2:3:4:5"]
"".split("a") // [""]
"".split("") // []
"2:3:4:5".split("") // ["2", ":", "3", ":", "4", ":", "5"]
说明:
返回值,是一个字符串数组,若separator没有匹配上,则返回一元本身字符串数组
2.replace
语法:stringObject.replace(regexp/substr,replacement)
regexp/substr 必需。规定子字符串或要替换的模式的 RegExp 对象。
replacement 必需。一个字符串值。规定了替换文本或生成替换文本的函数。
// $1 $2 $3的妙用
"Doe, John".replace(/(\w+)\s*, \s*(\w+)/, "$2 $1"); // "John Doe"
//花引号替换为直引号:
'"a", "b"'.replace(/"([^"]*)"/g, "'$1'"); // "'a', 'b'"
// 把字符串中所有单词的首字母都转换为大写:
'aaa bbb ccc'.replace(/\b\w+\b/g, function(word){return word.substring(0,1).toUpperCase()+word.substring(1);});// Aaa Bbb Ccc
var str = "get-element-by-id";
var reg = /-\w/g; // 匹配横杆以及之后的一个字符,全局匹配
str.replace(reg,function($0){return $0.slice(1).toUpperCase();// 匹配到到是-e -b -i 形式截取后一个字符转成大写
}); //"getElementById"
3.match
语法: stringObject.match(searchvalue)
stringObject.match(regexp)
searchvalue 必需。规定要检索的字符串值。
regexp 必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象,则需要首先把它传递给 RegExp 构造函数,将其转换为 RegExp 对象
"1 plus 2 equal 3".match(/\d+/g) // ["1", "2", "3"]
"1 plus 2 equal 3".match(/\d+/) // ["1", index: 0, input: "1 plus 2 equal 3", groups: undefined]
说明
match() 方法将检索字符串 stringObject,以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。
如果 regexp 没有标志 g,那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本, match() 将返回 null。否则,它将返回一个数组,其中存放了与它找到的匹配文本有关的信息。该数组的第 0 个元素存放的是匹配文本,而其余的元素存放的是与正则表达式的子表达式匹配的文本。除了这些常规的数组元素之外,返回的数组还含有两个对象属性。index 属性声明的是匹配文本的起始字符在 stringObject 中的位置,input 属性声明的是对 stringObject 的引用。
如果 regexp 具有标志 g,则 match() 方法将执行全局检索,找到 stringObject 中的所有匹配子字符串。若没有找到任何匹配的子串,则返回 null。如果找到了一个或多个匹配子串,则返回一个数组。不过全局匹配返回的数组的内容与前者大不相同,它的数组元素中存放的是 stringObject 中所有的匹配子串,而且也没有 index 属性或 input 属性。
注意:在全局检索模式下,match() 即不提供与子表达式匹配的文本的信息,也不声明每个匹配子串的位置。如果您需要这些全局检索的信息,可以使用 RegExp.exec()。
四、正则校验字符串场景
(一)、校验数字
描述 | 表达式 |
---|---|
数字 | ^[0-9]*$ |
n位的数字 | ^\d{n}$ |
至少n位的数字 | ^\d{n,}$ |
m-n位的数字 | ^\d{m,n}$ |
零和非零开头的数字 | ^(0|[1-9][0-9]*)$ |
非零开头的最多带两位小数的数字 | ^([1-9][0-9]*)+(.[0-9]{1,2})?$ |
带1-2位小数的正数或负数 | ^(-)?\d+(\.\d{1,2})?$ |
正数、负数、和小数 | ^(-|+)?\d+(\.\d+)?$ |
有两位小数的正实数 | ^[0-9]+(\.[0-9]{2})?$ |
有1~3位小数的正实数 | ^[0-9]+(\.[0-9]{1,3})?$ |
非零的正整数 | ^[1-9]\d*$ 或 ^([1-9][0-9]){1,3}$ 或 ^\+?[1-9][0-9]$ |
非零的负整数 | ^\-[1-9][]0-9"$ 或 ^-[1-9]\d$ |
非负整数 | ^\d+$ 或 ^[1-9]\d*|0$ |
非正整数 | ^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$ |
非负浮点数 | ^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$ |
非正浮点数 | ^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$ |
正浮点数 | ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9][1-9][0-9])|([0-9][1-9][0-9]\.[0-9]+)|([0-9][1-9][0-9]))$ |
负浮点数 | ^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9][1-9][0-9])|([0-9][1-9][0-9]\.[0-9]+)|([0-9][1-9][0-9])))$ |
浮点数 | ^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$ |
(二)、校验字符
描述 | 表达式 |
---|---|
汉字 | ^[\u4e00-\u9fa5]{0,}$ |
英文和数字 | ^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$ |
长度为3-20的所有字符 | ^.{3,20}$ |
由26个英文字母组成的字符串 | ^[A-Za-z]+$ |
由26个大写英文字母组成的字符串 | ^[A-Z]+$ |
由26个小写英文字母组成的字符串 | ^[a-z]+$ |
由数字和26个英文字母组成的字符串 | ^[A-Za-z0-9]+$ |
由数字、26个英文字母或者下划线组成的字符串 | ^\w+$ 或 ^\w{3,20}$ |
中文、英文、数字包括下划线 | ^[\u4E00-\u9FA5A-Za-z0-9_]+$ |
中文、英文、数字但不包括下划线等符号 | ^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$ |
可以输入含有^%&’,;=?$\"等字符 | [^%&’,;=?$\x22]+ |
禁止输入含有~的字符 | [^~\x22]+ |
(三)、实际中特殊场景
描述 | 表达式 |
---|---|
Email地址 | ^\w+([-+.]\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)*$ |
域名 | [a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.? |
InternetURL | [a-zA-z]+://[^\s]* 或 ^http://([\w-]+.)+[\w-]+(/[\w-./?%&=]*)?$ |
手机号码 | ^(13[0-9]|14[5|7]|15[0|\1|\2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$ |
电话号码(“XXX-XXXXXXX”、“XXXX-XXXXXXXX”、“XXX-XXXXXXX”、“XXX-XXXXXXXX”、"XXXXXXX"和"XXXXXXXX) | ^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$ |
国内电话号码(0511-4405222、021-87888822) | \d{3}-\d{8}、|\d{4}-\d{7} |
电话号码正则表达式(支持手机号码,3-4位区号,7-8位直播号码,1-4位分机号) | ((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$) |
身份证号(15位、18位数字),最后一位是校验位,可能为数字或字符X | (^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$) |
帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线) | ^[a-zA-Z][a-zA-Z0-9_]{4,15}$ |
密码(以字母开头,长度在6~18之间,只能包含字母、数字和下划线) | ^[a-zA-Z]\w{5,17}$ |
强密码(必须包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间) | ^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,10}$ |
日期格式 | ^\d{4}-\d{1,2}-\d{1,2} |
一年的12个月(01~09和1~12) | ^(0?[1-9] |
一个月的31天(01~09和1~31) | ^((0?[1-9]) |
xml文件 | ^([a-zA-Z]±?)+[a-zA-Z0-9]+\.[x|X][m|M][l|L]$ |
中文字符的正则表达式 | [\u4e00-\u9fa5] |
双字节字符 | [^\x00-\xff] (包括汉字在内,可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)) |
空白行的正则表达式 | \n\s*\r (可以用来删除空白行) |
HTML标记的正则表达式 | <(\S*?)[^>]*>.*?|<.*? /> ( 首尾空白字符的正则表达式:^\s*|\s*$或(^\s*)|(\s*$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等),非常有用的表达式) |
腾讯QQ号 | [1-9][0-9]{4,} (腾讯QQ号从10000开始) |
中国邮政编码 | [1-9]\d{5}(?!\d) (中国邮政编码为6位数字) |
IP地址 | ((?:\(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d)) |
钱的输入格式 | 例如:最大13位整数,2位小数 包含千分位 ^\d{1,13}(\.\d{1,2})?$ 且 ^\d{1,3}(,\d{3})*(\.\d{1,2})?$ |
JavaScript面试篇之正则表达式:“get-element-by-id”如何转化成驼峰,常用邮箱、身份证、QQ号等信息如何校验等等相关推荐
- JavaScript面试的完美指南(开发者视角)
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 面试季手册. 原文:javascript 面试的完美指南(开发者视角) 作者:前端小智 Fundebug经授权转载,版 ...
- JavaScript 面试知识点总结
1.介绍 js 的基本数据类型. js 一共有六种基本数据类型,分别是 Undefined.Null.Boolean.Number.String,还有在 ES6 中新增的 Symbol 和 ES10 ...
- 174道JavaScript 面试知识点总结(上)
关注 前端瓶子君,回复"交流" 加入我们一起学习,天天进步 来源 | https://github.com/CavsZhouyou/ 1.介绍 js 的基本数据类型. js 一共有 ...
- javascript面试_在编码面试中需要注意的3个JavaScript问题
javascript面试 JavaScript is the official language of all modern web browsers. As such, JavaScript que ...
- 如何在 JavaScript 面试中过五关斩六将?
JavaScript 面试不容易.我觉得难,你也觉得不容易,大家的意见不谋而合.在 JavaScript 面试中被问问题的概率通常很高.那么该如何破解 JS 面试?突破口在哪儿?本文旨在通过学习基本概 ...
- 前端面试题汇总(JavaScript面试纯干货)
前端面试题汇总(JavaScript面试纯干货) 1 闭包 闭包就是能够读取其他函数内部变量的函数 闭包是指有权访问另⼀个函数作⽤域中变量的函数,创建闭包的最常⻅的⽅式就是在⼀个函数内创建另⼀个函数, ...
- JavaScript—进阶篇
JavaScript-进阶(笔记) 第1章 系好安全带,准备启航 1-1 让你认识JS 第二章 你要懂的规则(JS基础语法) 2-1 什么是变量 2-2 给变量取个名字(变量命名) 2-3 确定你的存 ...
- JavaScript 进阶篇的学习~
---恢复内容开始--- 让你认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面, ...
- javaScript面试高频技术点(多为原生基础+框架集合)
此文章为面试准备 1.数据类型的分类和判断 一:JS数据类型的分类 (1)基本数据类型(值类型) String.Boolean.Number.Undefined.Null.Symbol(ES6引入) ...
最新文章
- java 远程查看电脑磁盘,请问你如何在Java中监视计算机的CPU、内存和磁盘使用情况?...
- 利用MS17-010渗透win7(64位)
- 移动办公计算机,最适合移动办公的三款掌上电脑点评
- php 商城套餐搭配功能,速卖通商品搭配套餐功能已上线!设置速卖通搭配套餐仅需三步...
- Who Gets the Most Candies? POJ - 2886 (线段树)
- C#链接mysql 新手容易出错的问题
- 电路板上的插头怎么拔下来_空调维修排查电路板内外原因
- OpenCV 发起 Spatial AI挑战赛
- 使用Visual Studio 2017/C#开始使用Selenium 3.7
- WireMock.NET如何帮助进行.NET Core应用程序的集成测试
- 【牛客网】:数据结构——时间复杂度,算法复杂度
- Remote Desktop Manager for Mac(远程桌面管理工具)
- 椭圆曲线方程加解密算法研究(一)
- 【计量经济学论文】近十年烟台港发展情况的计量分析(节选)
- 梦之光芒黑客小游戏攻略
- 怎样获得淘宝/天猫淘口令真实url
- 调侃物联网开源框架,我们什么时候也来开源一个?
- StringBuffer讲解及StringBuffer和String之间的关系
- IDEA上传项目到GitHub
- HTML制作个人网页制作(简单静态HTML个人博客网页作品)
热门文章
- 手机密码锁机的朋友不用再去营业厅解锁.自己搞定(未测试)
- 嵌入式Linux系统 TCP数据转发服务器
- JavaWeb图书管理系统 图书借阅系统项目源码附带视频部署演示教程
- Android 打开拨号界面
- US5M-ASEMI贴片快恢复二极管US5M
- raid读写速度对比_[转载]各个raid对比:性能和运行速度和读写方面(RAID1读和单个磁盘无区别)...
- 黄聪:Fiddler对安卓应用手机抓包图文教程
- word替换使用通配符_在Word 2016中搜索时如何使用通配符
- 浮躁的原罪-兼答网友留言
- 从足球看--主主、主从、主备