jquery正则表达式
jQuery 正则表达式使用指南
jQuery 本身并不直接提供正则表达式功能,但可以通过 JavaScript 原生正则表达式结合 jQuery 的选择器和 DOM 操作来实现相关功能。以下是常见的使用场景和方法。
基本正则表达式语法
JavaScript 正则表达式通过 /pattern/flags 或 new RegExp("pattern", "flags") 创建:
pattern是正则表达式模式flags是匹配标志(如i不区分大小写,g全局匹配)
示例:
var regex = /test/i; // 不区分大小写匹配 "test"
var dynamicRegex = new RegExp("^" + userInput + "$", "g");
jQuery 结合正则的常见用法
1. 表单验证
通过正则验证输入内容,例如邮箱格式:
$("#email").on("blur", function() {
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test($(this).val())) {
$(this).addClass("error");
}
});
2. 筛选元素
用正则匹配元素属性或内容:
$("div[id^='section-']").css("background", "yellow"); // 匹配ID以'section-'开头的div
3. 动态内容替换
结合 replace() 方法修改文本:
$(".content").text(function(i, text) {
return text.replace(/\b(\w+)\b/g, function(match) {
return match.toUpperCase();
});
});
4. 数据提取
从字符串中提取符合规则的部分:
var text = $("#log").text();
var matches = text.match(/\d{4}-\d{2}-\d{2}/g); // 提取日期格式
常用正则模式参考
- 数字:
/^\d+$/ - 字母数字:
/^[a-zA-Z0-9]+$/ - URL:
/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/ - 手机号(中国):
/^1[3-9]\d{9}$/
注意事项
- 动态构建正则时需转义特殊字符:
new RegExp("\\d+")等效于/\d+/ - jQuery 的
:contains()选择器不支持正则,需通过filter()实现:$("p").filter(function() { return /特定文本/i.test($(this).text()); });
通过结合 JavaScript 原生正则能力与 jQuery 的 DOM 操作,可以高效处理各种文本匹配和验证需求。







