jquery正则

jQuery 正则表达式基础

jQuery 本身不直接提供正则表达式功能，但可以通过 JavaScript 的正则表达式对象（RegExp）结合 jQuery 的方法实现字符串匹配、替换等操作。

创建正则表达式

// 字面量方式
var regex = /pattern/flags;

// 构造函数方式
var regex = new RegExp("pattern", "flags");

常用标志（flags）包括：

• i：不区分大小写
• g：全局匹配
• m：多行匹配

常用正则方法

test() 方法 检查字符串是否匹配模式，返回布尔值。

var str = "hello world";
var pattern = /hello/;
console.log(pattern.test(str)); // true

exec() 方法 执行搜索匹配，返回结果数组或 null。

var result = /world/.exec(str);
console.log(result[0]); // "world"

字符串方法结合正则

// match()
"abc123".match(/\d+/); // ["123"]

// replace()
"foo bar".replace(/bar/, "baz"); // "foo baz"

// search()
"hello".search(/ell/); // 1 (返回匹配位置索引)

jQuery 结合正则的常见场景

表单验证

$("#email").on("blur", function() {
  var email = $(this).val();
  var pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!pattern.test(email)) {
    alert("Invalid email");
  }
});

动态过滤元素

$("div").filter(function() {
  return /warning/.test($(this).text());
}).css("color", "red");

属性选择器增强

$("input[name^='user_']") // 选择name以"user_"开头的input

实用正则模式示例

数字验证

/^\d+$/ // 纯数字
/^-?\d+$/ // 可选负号数字
/^\d+\.\d{2}$/ // 两位小数

常用字符串匹配

/^[a-zA-Z]+$/ // 仅字母
/^[a-z0-9_-]{3,16}$/ // 用户名（3-16字符）
/^#?([a-f0-9]{6}|[a-f0-9]{3})$/i // 十六进制颜色代码

URL 解析

var urlPattern = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;

性能优化建议

• 对于重复使用的正则表达式，建议预先编译（存储在变量中）
• 避免在循环内创建新的正则对象
• 复杂的正则表达式可以拆分为多个简单匹配
• 使用非捕获组 (?:...) 提升性能

通过结合 jQuery 的 DOM 操作和 JavaScript 的正则表达式，可以实现强大的文本处理功能。注意浏览器兼容性问题，现代浏览器均支持 ES5 正则特性。