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号等信息如何校验等等相关推荐

  1. JavaScript面试的完美指南(开发者视角)

    2019独角兽企业重金招聘Python工程师标准>>> 摘要: 面试季手册. 原文:javascript 面试的完美指南(开发者视角) 作者:前端小智 Fundebug经授权转载,版 ...

  2. JavaScript 面试知识点总结

    1.介绍 js 的基本数据类型. js 一共有六种基本数据类型,分别是 Undefined.Null.Boolean.Number.String,还有在 ES6 中新增的 Symbol 和 ES10 ...

  3. 174道JavaScript 面试知识点总结(上)

    关注 前端瓶子君,回复"交流" 加入我们一起学习,天天进步 来源 | https://github.com/CavsZhouyou/ 1.介绍 js 的基本数据类型. js 一共有 ...

  4. javascript面试_在编码面试中需要注意的3个JavaScript问题

    javascript面试 JavaScript is the official language of all modern web browsers. As such, JavaScript que ...

  5. 如何在 JavaScript 面试中过五关斩六将?

    JavaScript 面试不容易.我觉得难,你也觉得不容易,大家的意见不谋而合.在 JavaScript 面试中被问问题的概率通常很高.那么该如何破解 JS 面试?突破口在哪儿?本文旨在通过学习基本概 ...

  6. 前端面试题汇总(JavaScript面试纯干货)

    前端面试题汇总(JavaScript面试纯干货) 1 闭包 闭包就是能够读取其他函数内部变量的函数 闭包是指有权访问另⼀个函数作⽤域中变量的函数,创建闭包的最常⻅的⽅式就是在⼀个函数内创建另⼀个函数, ...

  7. JavaScript—进阶篇

    JavaScript-进阶(笔记) 第1章 系好安全带,准备启航 1-1 让你认识JS 第二章 你要懂的规则(JS基础语法) 2-1 什么是变量 2-2 给变量取个名字(变量命名) 2-3 确定你的存 ...

  8. JavaScript 进阶篇的学习~

    ---恢复内容开始--- 让你认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面, ...

  9. javaScript面试高频技术点(多为原生基础+框架集合)

    此文章为面试准备 1.数据类型的分类和判断 一:JS数据类型的分类 (1)基本数据类型(值类型) String.Boolean.Number.Undefined.Null.Symbol(ES6引入) ...

最新文章

  1. java 远程查看电脑磁盘,请问你如何在Java中监视计算机的CPU、内存和磁盘使用情况?...
  2. 利用MS17-010渗透win7(64位)
  3. 移动办公计算机,最适合移动办公的三款掌上电脑点评
  4. php 商城套餐搭配功能,速卖通商品搭配套餐功能已上线!设置速卖通搭配套餐仅需三步...
  5. Who Gets the Most Candies? POJ - 2886 (线段树)
  6. C#链接mysql 新手容易出错的问题
  7. 电路板上的插头怎么拔下来_空调维修排查电路板内外原因
  8. OpenCV 发起 Spatial AI挑战赛
  9. 使用Visual Studio 2017/C#开始使用Selenium 3.7
  10. WireMock.NET如何帮助进行.NET Core应用程序的集成测试
  11. 【牛客网】:数据结构——时间复杂度,算法复杂度
  12. Remote Desktop Manager for Mac(远程桌面管理工具)
  13. 椭圆曲线方程加解密算法研究(一)
  14. 【计量经济学论文】近十年烟台港发展情况的计量分析(节选)
  15. 梦之光芒黑客小游戏攻略
  16. 怎样获得淘宝/天猫淘口令真实url
  17. 调侃物联网开源框架,我们什么时候也来开源一个?
  18. StringBuffer讲解及StringBuffer和String之间的关系
  19. IDEA上传项目到GitHub
  20. HTML制作个人网页制作(简单静态HTML个人博客网页作品)

热门文章

  1. 手机密码锁机的朋友不用再去营业厅解锁.自己搞定(未测试)
  2. 嵌入式Linux系统 TCP数据转发服务器
  3. JavaWeb图书管理系统 图书借阅系统项目源码附带视频部署演示教程
  4. Android 打开拨号界面
  5. US5M-ASEMI贴片快恢复二极管US5M
  6. raid读写速度对比_[转载]各个raid对比:性能和运行速度和读写方面(RAID1读和单个磁盘无区别)...
  7. 黄聪:Fiddler对安卓应用手机抓包图文教程
  8. word替换使用通配符_在Word 2016中搜索时如何使用通配符
  9. 浮躁的原罪-兼答网友留言
  10. 从足球看--主主、主从、主备