首页 >> js开发 >> jsJS使用正则表达式实现常用的表单验证功能分析js大全
jsJS使用正则表达式实现常用的表单验证功能分析js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文实例讲述了JS使用正则表达式实现常用的表单验证功能。分享给大家供大家参考，具体如下：表单验证是一个网站或应用的重点，一条合适的错误提示不仅可以减少无效信息录入，更会给用户留下良好的使用体验。但表单设计千差万别，用户输入更不可控。一方面，我们要减少出错提示（这会引起用户反感），而另一方面，我们则希望得到足够多的有效信息。鱼和熊掌如何兼得？写一个简单的表单验证:https:///article/185782.htmhttps:///article/185782.htm从Google中，我们可以找到一些实用的方法：
设计合适的提示信息；
正则表达式筛选错误输入。
设计合适的提示信息；正则表达式筛选错误输入。如何将错误信息合适的展示给用户，我想是见仁见智，需要根据具体项目具体分析（参考淘宝、京东等电商设计）。这里主要讨论第二种方案：通过正则表达式最大限度的过滤用户输入通过正则表达式最大限度的过滤用户输入这里先列出我自己常用的正则表达式，然后在深入全面的学习它！常用正则表达式文本输入（拒绝表情）：/^[\u4e00-\u9fa5\w]+.*$/gi文本输入（拒绝表情）：/^[\u4e00-\u9fa5\w]+.*$/gi密码： /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/密码：/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/中文地址（以中文开始，包含英文字符、数字、括号）：/^([\u4e00-\u9fa5])+[\u4e00-\u9fa5a-zA-Z0-9()（）]*$/中文地址/^([\u4e00-\u9fa5])+[\u4e00-\u9fa5a-zA-Z0-9()（）]*$/身份证：/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i身份证/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i电子邮箱：/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/电子邮箱/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/传真：/^(\d{3,4}-)?\d{7,8}$/传真/^(\d{3,4}-)?\d{7,8}$/网址：/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)*(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/网址/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)*(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/座机：/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/座机/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/手机：/^1[34578]\d{9}$/手机/^1[34578]\d{9}$/邮编：/^[1-9][0-9]{5}$/邮编/^[1-9][0-9]{5}$/通用验证信息提示函数
/**
* @param {Object} $input 需要验证的输入项
* @param {String} reg
正则表达式
* @param {String} tips 提示信息
*/
function isInfoValid($input, reg, tips) {
var val = $input.val().trim();
if(val == '') {
$input.next().remove();
$input.after('*'+$input.siblings("label").text().trim()+'不能为空！')
}
else if(reg && tips && !reg.test(val)) {
$input.next().remove();
$input.after(''+ tips +'')
}else {
$input.next().remove();
}
}
// 可以这样使用
isInfoValid($zipCode, /^[1-9][0-9]{5}$/, '*请输入正确的邮编！');
/**
* @param {Object} $input 需要验证的输入项
* @param {String} reg
正则表达式
* @param {String} tips 提示信息
*/
function isInfoValid($input, reg, tips) {
var val = $input.val().trim();
if(val == '') {
$input.next().remove();
$input.after('*'+$input.siblings("label").text().trim()+'不能为空！')
}
else if(reg && tips && !reg.test(val)) {
$input.next().remove();
$input.after(''+ tips +'')
}else {
$input.next().remove();
}
}
// 可以这样使用
isInfoValid($zipCode, /^[1-9][0-9]{5}$/, '*请输入正确的邮编！');
深入学习正则表达式1. RegExp对象RegExp有两种方法实例化RegExp对象RegExp
字面量
var reg = /\bis\b/g; // 全局匹配单词is
构造函数
var reg = new RegEXP('\\bis\\b',g)
字面量
var reg = /\bis\b/g; // 全局匹配单词is
字面量var reg = /\bis\b/g; // 全局匹配单词isvar reg = /\bis\b/g; // 全局匹配单词is
构造函数
var reg = new RegEXP('\\bis\\b',g)
构造函数var reg = new RegEXP('\\bis\\b',g)var reg = new RegEXP('\\bis\\b',g)2. 修饰符
g：global全文搜索，不添加，搜索到第一个匹配停止 默认false，只读
i：ignore case 忽略大小写， 默认false，只读
m：multiple lines 多行搜索 默认false，只读
lastIndex： 是当前表达式匹配内容的最后一个字符的下一个位置
source：正则表达式的文本字符串
> var reg1 = /\w/gim;
> reg1.source
< "\w"
g：global全文搜索，不添加，搜索到第一个匹配停止 默认false，只读
g：global全文搜索，不添加，搜索到第一个匹配停止 默认false，只读
i：ignore case 忽略大小写， 默认false，只读
i：ignore case 忽略大小写， 默认false，只读
m：multiple lines 多行搜索 默认false，只读
m：multiple lines 多行搜索 默认false，只读
lastIndex： 是当前表达式匹配内容的最后一个字符的下一个位置
lastIndex： 是当前表达式匹配内容的最后一个字符的下一个位置
source：正则表达式的文本字符串
> var reg1 = /\w/gim;
> reg1.source
< "\w"
source：正则表达式的文本字符串> var reg1 = /\w/gim;
> reg1.source
< "\w"
> var reg1 = /\w/gim;
> reg1.source
< "\w"
3. 元字符正则表达式由两种基本字符类型组成：
原义文本字符
a,b,c,d..
元字符
*+？$ ^ . | \ （ ）{ } [ ]
\t
水平制表符
\v
垂直制表符
\n
换行符
\r
回车符
\0
空字符
\f
换页符
原义文本字符
a,b,c,d..
原义文本字符a,b,c,d..
元字符
*+？$ ^ . | \ （ ）{ } [ ]
\t
水平制表符
\v
垂直制表符
\n
换行符
\r
回车符
\0
空字符
\f
换页符
元字符*+？$ ^ . | \ （ ）{ } [ ]
\t
水平制表符
\v
垂直制表符
\n
换行符
\r
回车符
\0
空字符
\f
换页符
\t
水平制表符
\t
水平制表符
\t水平制表符
\v
垂直制表符
\n
换行符
\r
回车符
\0
空字符
\f
换页符
\v
垂直制表符
\v垂直制表符
\n
换行符
\n换行符
\r
回车符
\r回车符
\0
空字符
\0空字符
\f
换页符
\f换页符4. 字符类
我们可以使用元字符 [] 来构建一个简单的类
我们可以使用元字符 [] 来构建一个简单的类[]
所谓类是指符合某些特征的对象，一个泛指，不是特指某个字符
表达式[abc]把字符a或b或c归为一类，表达式可以匹配这类字符
所谓类是指符合某些特征的对象，一个泛指，不是特指某个字符表达式[abc]把字符a或b或c归为一类，表达式可以匹配这类字符[abc]
字符取反（^）
字符取反（^）
使用元字符 ^ 创建反向类
表达式[^abc] 表示 不是字符a或b或c的内容
使用元字符 ^ 创建反向类表达式[^abc] 表示 不是字符a或b或c的内容[^abc]5. 范围类
使用[a-z]来连接两个字符表示从a到z的任意字符，闭区间，包含a 和 z 本身
> 'a1b2c3b4'.replace(/[a-z]/g, 'Q');
< "Q1Q2Q3Q4"
范围类可以连写 [a-zA-Z]
> '2021-11-5'.replace(/[0-9-]/g, 'A')
< "AAAAAAAAA"
使用[a-z]来连接两个字符表示从a到z的任意字符，闭区间，包含a 和 z 本身
> 'a1b2c3b4'.replace(/[a-z]/g, 'Q');
< "Q1Q2Q3Q4"
使用[a-z]来连接两个字符表示从a到z的任意字符，闭区间，包含a 和 z 本身> 'a1b2c3b4'.replace(/[a-z]/g, 'Q');
< "Q1Q2Q3Q4"
> 'a1b2c3b4'.replace(/[a-z]/g, 'Q');
< "Q1Q2Q3Q4"
范围类可以连写 [a-zA-Z]
> '2021-11-5'.replace(/[0-9-]/g, 'A')
< "AAAAAAAAA"
范围类可以连写 [a-zA-Z][a-zA-Z]> '2021-11-5'.replace(/[0-9-]/g, 'A')
< "AAAAAAAAA"
> '2021-11-5'.replace(/[0-9-]/g, 'A')
< "AAAAAAAAA"
6.预定义类及边界6.1 预定义类
字符
等价类
含义
.
[^\r\n]
除了回车符和换行符以外的所有字符
\d
[0-9]
数字字符
\D
[^0-9]
非数字字符
\s
[\t\n\x0B\f\r]
空白字符
\w
[a-zA-Z_0-9]
单词字符（字母数字下划线）
\W
[^a-zA-Z0-9_]
非单词字符
字符
等价类
含义
字符
等价类
含义
字符等价类含义
.
[^\r\n]
除了回车符和换行符以外的所有字符
\d
[0-9]
数字字符
\D
[^0-9]
非数字字符
\s
[\t\n\x0B\f\r]
空白字符
\w
[a-zA-Z_0-9]
单词字符（字母数字下划线）
\W
[^a-zA-Z0-9_]
非单词字符
.
[^\r\n]
除了回车符和换行符以外的所有字符
.[^\r\n]除了回车符和换行符以外的所有字符
\d
[0-9]
数字字符
\d[0-9]数字字符
\D
[^0-9]
非数字字符
\D[^0-9]非数字字符
\s
[\t\n\x0B\f\r]
空白字符
\s[\t\n\x0B\f\r]空白字符
\w
[a-zA-Z_0-9]
单词字符（字母数字下划线）
\w[a-zA-Z_0-9]单词字符（字母数字下划线）
\W
[^a-zA-Z0-9_]
非单词字符
\W[^a-zA-Z0-9_]非单词字符6.2 边界
字符
含义
^
以XXXXX开始
$
以xxxx结束
\b
单词边界
\B
非单词边界
字符
含义
字符
含义
字符含义
^
以XXXXX开始
$
以xxxx结束
\b
单词边界
\B
非单词边界
^
以XXXXX开始
^以XXXXX开始
$
以xxxx结束
$以xxxx结束
\b
单词边界
\b单词边界
\B
非单词边界
\B非单词边界7. 量词
字符
含义
？
出现零次或一次（最多出现1次）
+
出现一次或多次
*
出现零次或多次（任意
{n}
出现n次
{n,m}
出现n到m次
{n,}
至少出现n次
字符
含义
字符
含义
字符含义
？
出现零次或一次（最多出现1次）
+
出现一次或多次
*
出现零次或多次（任意
{n}
出现n次
{n,m}
出现n到m次
{n,}
至少出现n次
？
出现零次或一次（最多出现1次）
？出现零次或一次（最多出现1次）
+
出现一次或多次
+出现一次或多次
*
出现零次或多次（任意
*出现零次或多次（任意
{n}
出现n次
{n}出现n次
{n,m}
出现n到m次
{n,m}出现n到m次
{n,}
至少出现n次
{n,}至少出现n次8.贪婪模式与非贪婪模式8.1 贪婪模式在正则表达式中，默认尽可能多的匹配> '1234678'.replace(/\d{3,6}/g, 'X')
< "X78"
> '1234678'.replace(/\d{3,6}/g, 'X')
< "X78"
8.2 非贪婪模式让正则表达谁尽可能少的匹配，也就是说一旦成功匹配就不再继续尝试做法很简单，在量词后面加一个 ？即可做法很简单，在量词后面加一个 ？即可> '123456789'.match(/\d{3,5}?/g)
< ["123","456","789"]
> '123456789'.match(/\d{3,5}?/g)
< ["123","456","789"]
9. 分组9.1 分组使用 （）可以达到分组的功能，使量词作用于分组> 'fayfayfayfsd'.replace(/(fay){3}/g, 'X')
< "Xfsd"
> 'fayfayfayfsd'.replace(/(fay){3}/g, 'X')
< "Xfsd"
9.2 或使用 | 表示 或> 'ByronCasper'.replace(/Byron|Casper/g, 'X')
< "XX"
> 'ByronCasper'.replace(/Byron|Casper/g, 'X')
< "XX"
9.3 $引用，捕获分组
注意： 一定要加（），用$捕获分组
注意： 一定要加（），用$捕获分组> '2021-11-05'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$2-$3-$1')
< "05-11-2021"
> '2021-11-05'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$2-$3-$1')
< "05-11-2021"
忽略分组
不希望捕获某些分组，只需要在分组内加上 ？：
(?:Byron).(ok)
忽略分组
不希望捕获某些分组，只需要在分组内加上 ？：
(?:Byron).(ok)
忽略分组不希望捕获某些分组，只需要在分组内加上 ？：(?:Byron).(ok)(?:Byron).(ok)PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：JavaScript正则表达式在线测试工具：
http://tools./regex/javascriptJavaScript正则表达式在线测试工具：
JavaScript正则表达式在线测试工具：
http://tools./regex/javascript正则表达式在线生成工具：
http://tools./regex/create_reg正则表达式在线生成工具：
正则表达式在线生成工具：
http://tools./regex/create_reg关于jQuery相关内容可查看本站专题：《jQuery正则表达式用法总结》、《jQuery字符串操作技巧总结》、《jQuery操作xml技巧总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》jQuery正则表达式用法总结jQuery字符串操作技巧总结jQuery操作xml技巧总结jQuery扩展技巧总结jquery选择器用法总结jQuery常用插件及用法总结希望本文所述对大家jQuery程序设计有所帮助。
设计合适的提示信息；
正则表达式筛选错误输入。
设计合适的提示信息；正则表达式筛选错误输入。如何将错误信息合适的展示给用户，我想是见仁见智，需要根据具体项目具体分析（参考淘宝、京东等电商设计）。这里主要讨论第二种方案：通过正则表达式最大限度的过滤用户输入通过正则表达式最大限度的过滤用户输入这里先列出我自己常用的正则表达式，然后在深入全面的学习它！常用正则表达式文本输入（拒绝表情）：/^[\u4e00-\u9fa5\w]+.*$/gi文本输入（拒绝表情）：/^[\u4e00-\u9fa5\w]+.*$/gi密码： /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/密码：/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/中文地址（以中文开始，包含英文字符、数字、括号）：/^([\u4e00-\u9fa5])+[\u4e00-\u9fa5a-zA-Z0-9()（）]*$/中文地址/^([\u4e00-\u9fa5])+[\u4e00-\u9fa5a-zA-Z0-9()（）]*$/身份证：/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i身份证/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i电子邮箱：/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/电子邮箱/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/传真：/^(\d{3,4}-)?\d{7,8}$/传真/^(\d{3,4}-)?\d{7,8}$/网址：/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)*(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/网址/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)*(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/座机：/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/座机/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/手机：/^1[34578]\d{9}$/手机/^1[34578]\d{9}$/邮编：/^[1-9][0-9]{5}$/邮编/^[1-9][0-9]{5}$/通用验证信息提示函数
/**
* @param {Object} $input 需要验证的输入项
* @param {String} reg
正则表达式
* @param {String} tips 提示信息
*/
function isInfoValid($input, reg, tips) {
var val = $input.val().trim();
if(val == '') {
$input.next().remove();
$input.after('*'+$input.siblings("label").text().trim()+'不能为空！')
}
else if(reg && tips && !reg.test(val)) {
$input.next().remove();
$input.after(''+ tips +'')
}else {
$input.next().remove();
}
}
// 可以这样使用
isInfoValid($zipCode, /^[1-9][0-9]{5}$/, '*请输入正确的邮编！');
/**
* @param {Object} $input 需要验证的输入项
* @param {String} reg
正则表达式
* @param {String} tips 提示信息
*/
function isInfoValid($input, reg, tips) {
var val = $input.val().trim();
if(val == '') {
$input.next().remove();
$input.after('*'+$input.siblings("label").text().trim()+'不能为空！')
}
else if(reg && tips && !reg.test(val)) {
$input.next().remove();
$input.after(''+ tips +'')
}else {
$input.next().remove();
}
}
// 可以这样使用
isInfoValid($zipCode, /^[1-9][0-9]{5}$/, '*请输入正确的邮编！');
深入学习正则表达式1. RegExp对象RegExp有两种方法实例化RegExp对象RegExp
字面量
var reg = /\bis\b/g; // 全局匹配单词is
构造函数
var reg = new RegEXP('\\bis\\b',g)
字面量
var reg = /\bis\b/g; // 全局匹配单词is
字面量var reg = /\bis\b/g; // 全局匹配单词isvar reg = /\bis\b/g; // 全局匹配单词is
构造函数
var reg = new RegEXP('\\bis\\b',g)
构造函数var reg = new RegEXP('\\bis\\b',g)var reg = new RegEXP('\\bis\\b',g)2. 修饰符
g：global全文搜索，不添加，搜索到第一个匹配停止 默认false，只读
i：ignore case 忽略大小写， 默认false，只读
m：multiple lines 多行搜索 默认false，只读
lastIndex： 是当前表达式匹配内容的最后一个字符的下一个位置
source：正则表达式的文本字符串
> var reg1 = /\w/gim;
> reg1.source
< "\w"
g：global全文搜索，不添加，搜索到第一个匹配停止 默认false，只读
g：global全文搜索，不添加，搜索到第一个匹配停止 默认false，只读
i：ignore case 忽略大小写， 默认false，只读
i：ignore case 忽略大小写， 默认false，只读
m：multiple lines 多行搜索 默认false，只读
m：multiple lines 多行搜索 默认false，只读
lastIndex： 是当前表达式匹配内容的最后一个字符的下一个位置
lastIndex： 是当前表达式匹配内容的最后一个字符的下一个位置
source：正则表达式的文本字符串
> var reg1 = /\w/gim;
> reg1.source
< "\w"
source：正则表达式的文本字符串> var reg1 = /\w/gim;
> reg1.source
< "\w"
> var reg1 = /\w/gim;
> reg1.source
< "\w"
3. 元字符正则表达式由两种基本字符类型组成：
原义文本字符
a,b,c,d..
元字符
*+？$ ^ . | \ （ ）{ } [ ]
\t
水平制表符
\v
垂直制表符
\n
换行符
\r
回车符
\0
空字符
\f
换页符
原义文本字符
a,b,c,d..
原义文本字符a,b,c,d..
元字符
*+？$ ^ . | \ （ ）{ } [ ]
\t
水平制表符
\v
垂直制表符
\n
换行符
\r
回车符
\0
空字符
\f
换页符
元字符*+？$ ^ . | \ （ ）{ } [ ]
\t
水平制表符
\v
垂直制表符
\n
换行符
\r
回车符
\0
空字符
\f
换页符
\t
水平制表符
\t
水平制表符
\t水平制表符
\v
垂直制表符
\n
换行符
\r
回车符
\0
空字符
\f
换页符
\v
垂直制表符
\v垂直制表符
\n
换行符
\n换行符
\r
回车符
\r回车符
\0
空字符
\0空字符
\f
换页符
\f换页符4. 字符类
我们可以使用元字符 [] 来构建一个简单的类
我们可以使用元字符 [] 来构建一个简单的类[]
所谓类是指符合某些特征的对象，一个泛指，不是特指某个字符
表达式[abc]把字符a或b或c归为一类，表达式可以匹配这类字符
所谓类是指符合某些特征的对象，一个泛指，不是特指某个字符表达式[abc]把字符a或b或c归为一类，表达式可以匹配这类字符[abc]
字符取反（^）
字符取反（^）
使用元字符 ^ 创建反向类
表达式[^abc] 表示 不是字符a或b或c的内容
使用元字符 ^ 创建反向类表达式[^abc] 表示 不是字符a或b或c的内容[^abc]5. 范围类
使用[a-z]来连接两个字符表示从a到z的任意字符，闭区间，包含a 和 z 本身
> 'a1b2c3b4'.replace(/[a-z]/g, 'Q');
< "Q1Q2Q3Q4"
范围类可以连写 [a-zA-Z]
> '2021-11-5'.replace(/[0-9-]/g, 'A')
< "AAAAAAAAA"
使用[a-z]来连接两个字符表示从a到z的任意字符，闭区间，包含a 和 z 本身
> 'a1b2c3b4'.replace(/[a-z]/g, 'Q');
< "Q1Q2Q3Q4"
使用[a-z]来连接两个字符表示从a到z的任意字符，闭区间，包含a 和 z 本身> 'a1b2c3b4'.replace(/[a-z]/g, 'Q');
< "Q1Q2Q3Q4"
> 'a1b2c3b4'.replace(/[a-z]/g, 'Q');
< "Q1Q2Q3Q4"
范围类可以连写 [a-zA-Z]
> '2021-11-5'.replace(/[0-9-]/g, 'A')
< "AAAAAAAAA"
范围类可以连写 [a-zA-Z][a-zA-Z]> '2021-11-5'.replace(/[0-9-]/g, 'A')
< "AAAAAAAAA"
> '2021-11-5'.replace(/[0-9-]/g, 'A')
< "AAAAAAAAA"
6.预定义类及边界6.1 预定义类
字符
等价类
含义
.
[^\r\n]
除了回车符和换行符以外的所有字符
\d
[0-9]
数字字符
\D
[^0-9]
非数字字符
\s
[\t\n\x0B\f\r]
空白字符
\w
[a-zA-Z_0-9]
单词字符（字母数字下划线）
\W
[^a-zA-Z0-9_]
非单词字符
字符
等价类
含义
字符
等价类
含义
字符等价类含义
.
[^\r\n]
除了回车符和换行符以外的所有字符
\d
[0-9]
数字字符
\D
[^0-9]
非数字字符
\s
[\t\n\x0B\f\r]
空白字符
\w
[a-zA-Z_0-9]
单词字符（字母数字下划线）
\W
[^a-zA-Z0-9_]
非单词字符
.
[^\r\n]
除了回车符和换行符以外的所有字符
.[^\r\n]除了回车符和换行符以外的所有字符
\d
[0-9]
数字字符
\d[0-9]数字字符
\D
[^0-9]
非数字字符
\D[^0-9]非数字字符
\s
[\t\n\x0B\f\r]
空白字符
\s[\t\n\x0B\f\r]空白字符
\w
[a-zA-Z_0-9]
单词字符（字母数字下划线）
\w[a-zA-Z_0-9]单词字符（字母数字下划线）
\W
[^a-zA-Z0-9_]
非单词字符
\W[^a-zA-Z0-9_]非单词字符6.2 边界
字符
含义
^
以XXXXX开始
$
以xxxx结束
\b
单词边界
\B
非单词边界
字符
含义
字符
含义
字符含义
^
以XXXXX开始
$
以xxxx结束
\b
单词边界
\B
非单词边界
^
以XXXXX开始
^以XXXXX开始
$
以xxxx结束
$以xxxx结束
\b
单词边界
\b单词边界
\B
非单词边界
\B非单词边界7. 量词
字符
含义
？
出现零次或一次（最多出现1次）
+
出现一次或多次
*
出现零次或多次（任意
{n}
出现n次
{n,m}
出现n到m次
{n,}
至少出现n次
字符
含义
字符
含义
字符含义
？
出现零次或一次（最多出现1次）
+
出现一次或多次
*
出现零次或多次（任意
{n}
出现n次
{n,m}
出现n到m次
{n,}
至少出现n次
？
出现零次或一次（最多出现1次）
？出现零次或一次（最多出现1次）
+
出现一次或多次
+出现一次或多次
*
出现零次或多次（任意
*出现零次或多次（任意
{n}
出现n次
{n}出现n次
{n,m}
出现n到m次
{n,m}出现n到m次
{n,}
至少出现n次
{n,}至少出现n次8.贪婪模式与非贪婪模式8.1 贪婪模式在正则表达式中，默认尽可能多的匹配> '1234678'.replace(/\d{3,6}/g, 'X')
< "X78"
> '1234678'.replace(/\d{3,6}/g, 'X')
< "X78"
8.2 非贪婪模式让正则表达谁尽可能少的匹配，也就是说一旦成功匹配就不再继续尝试做法很简单，在量词后面加一个 ？即可做法很简单，在量词后面加一个 ？即可> '123456789'.match(/\d{3,5}?/g)
< ["123","456","789"]
> '123456789'.match(/\d{3,5}?/g)
< ["123","456","789"]
9. 分组9.1 分组使用 （）可以达到分组的功能，使量词作用于分组> 'fayfayfayfsd'.replace(/(fay){3}/g, 'X')
< "Xfsd"
> 'fayfayfayfsd'.replace(/(fay){3}/g, 'X')
< "Xfsd"
9.2 或使用 | 表示 或> 'ByronCasper'.replace(/Byron|Casper/g, 'X')
< "XX"
> 'ByronCasper'.replace(/Byron|Casper/g, 'X')
< "XX"
9.3 $引用，捕获分组
注意： 一定要加（），用$捕获分组
注意： 一定要加（），用$捕获分组> '2021-11-05'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$2-$3-$1')
< "05-11-2021"
> '2021-11-05'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$2-$3-$1')
< "05-11-2021"
忽略分组
不希望捕获某些分组，只需要在分组内加上 ？：
(?:Byron).(ok)
忽略分组
不希望捕获某些分组，只需要在分组内加上 ？：
(?:Byron).(ok)
忽略分组不希望捕获某些分组，只需要在分组内加上 ？：(?:Byron).(ok)(?:Byron).(ok)PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：JavaScript正则表达式在线测试工具：
http://tools./regex/javascriptJavaScript正则表达式在线测试工具：
JavaScript正则表达式在线测试工具：
http://tools./regex/javascript正则表达式在线生成工具：
http://tools./regex/create_reg正则表达式在线生成工具：
正则表达式在线生成工具：
http://tools./regex/create_reg关于jQuery相关内容可查看本站专题：《jQuery正则表达式用法总结》、《jQuery字符串操作技巧总结》、《jQuery操作xml技巧总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》jQuery正则表达式用法总结jQuery字符串操作技巧总结jQuery操作xml技巧总结jQuery扩展技巧总结jquery选择器用法总结jQuery常用插件及用法总结希望本文所述对大家jQuery程序设计有所帮助。
相关文章:
- js解决父组件将子组件作为弹窗调用只执行一次created的问题js大全
- js小程序实现简单语音聊天的示例代码js大全
- js浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法js大全
- jsvue实现用户长时间不操作自动退出登录功能的实现代码js大全
- jsJS使用Chrome浏览器实现调试线上代码js大全
- jsVue自动构建发布脚本的方法示例js大全
- js代码javascript递归函数定义和用法示例分析
- jsvue在响应头response中获取自定义headers操作js大全
- jsvue中全局路由守卫中替代this操作(this.$store/this.$vux)js大全
- jsVue 解决通过this.$refs来获取DOM或者组件报错问题js大全
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
