jquery 正则
jQuery 正则表达式使用指南
jQuery 本身并未提供专门的正则表达式方法,但可以结合 JavaScript 原生正则表达式功能实现文本匹配、验证等操作。以下是常见场景的实现方法:
正则表达式基础语法
JavaScript 正则表达式通过 /pattern/flags 语法或 RegExp 构造函数创建:
// 字面量形式
var regex = /abc/gi;
// 构造函数形式
var regex = new RegExp("abc", "gi");
字符串匹配与替换
使用 jQuery 选择元素后,通过 JavaScript 正则方法处理内容:
// 匹配文本
$("p").text().match(/\d+/g);
// 替换文本
$("div").text(function(i, text) {
return text.replace(/old/g, "new");
});
表单验证示例
结合 jQuery 事件和正则验证输入:
$("#email").on("blur", function() {
var email = $(this).val();
var pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!pattern.test(email)) {
alert("Invalid email format");
}
});
常用正则模式
-
数字验证
/^\d+$/ -
邮箱验证
/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/ -
URL验证
/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/ -
密码强度(至少8位,含大小写和数字)
/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/
动态生成正则表达式
当需要变量插入正则时,使用 RegExp 构造函数:
var searchTerm = "dynamic";
var regex = new RegExp(searchTerm, "i");
$("body").html().replace(regex, "<b>$&</b>");
注意事项
- 特殊字符需转义:
[ \ ^ $ . | ? * + ( )等字符需用\转义 - 性能考虑:复杂正则可能导致性能问题,避免在循环中重复创建
- 浏览器兼容性:部分新特性如 lookbehind 可能不被旧浏览器支持
通过结合 jQuery 的 DOM 操作和 JavaScript 原生正则能力,可以实现高效的前端文本处理。







