掌握jQuery必备：20个实用正则表达式解析与应用

正则表达式是处理字符串的一种强大工具，尤其在jQuery中，它们可以极大地提高我们选择元素和处理数据的效率。以下是20个实用的正则表达式及其解析和应用场景。

1. 匹配数字

var regex = /^\d+$/;

解析：\d 表示匹配任何数字，+ 表示匹配前面的子表达式一次或多次。

应用：检查用户输入的是否为纯数字。

var input = "12345";
if (regex.test(input)) {
    alert("输入的是数字");
} else {
    alert("输入的不是数字");
}

2. 匹配邮箱地址

var regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

解析：此表达式匹配常见的邮箱地址格式。

应用：验证用户输入的邮箱地址是否正确。

var input = "example@example.com";
if (regex.test(input)) {
    alert("邮箱地址正确");
} else {
    alert("邮箱地址不正确");
}

3. 匹配电话号码

var regex = /^(\+\d{1,2}\s)?\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$/;

解析：此表达式支持国际电话号码格式。

应用：验证用户输入的电话号码格式。

var input = "+1 (123) 456-70";
if (regex.test(input)) {
    alert("电话号码格式正确");
} else {
    alert("电话号码格式不正确");
}

4. 匹配URL

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

解析：此表达式匹配大多数URL格式。

应用：验证用户输入的URL是否正确。

var input = "http://www.example.com";
if (regex.test(input)) {
    alert("URL格式正确");
} else {
    alert("URL格式不正确");
}

5. 匹配IP地址

var regex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;

解析：此表达式匹配标准的IPv4地址格式。

应用：验证用户输入的IP地址是否正确。

var input = "192.168.1.1";
if (regex.test(input)) {
    alert("IP地址格式正确");
} else {
    alert("IP地址格式不正确");
}

6. 匹配日期（YYYY-MM-DD）

var regex = /^\d{4}-\d{2}-\d{2}$/;

解析：此表达式匹配格式为YYYY-MM-DD的日期。

应用：验证用户输入的日期格式。

var input = "2023-01-01";
if (regex.test(input)) {
    alert("日期格式正确");
} else {
    alert("日期格式不正确");
}

7. 匹配时间（HH:MM）

var regex = /^\d{2}:\d{2}$/;

解析：此表达式匹配格式为HH:MM的时间。

应用：验证用户输入的时间格式。

var input = "12:34";
if (regex.test(input)) {
    alert("时间格式正确");
} else {
    alert("时间格式不正确");
}

8. 匹配日期时间（YYYY-MM-DD HH:MM）

var regex = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/;

解析：此表达式匹配格式为YYYY-MM-DD HH:MM的日期时间。

应用：验证用户输入的日期时间格式。

var input = "2023-01-01 12:34";
if (regex.test(input)) {
    alert("日期时间格式正确");
} else {
    alert("日期时间格式不正确");
}

9. 匹配身份证号码

var regex = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i;

解析：此表达式匹配中国的身份证号码格式。

应用：验证用户输入的身份证号码是否正确。

var input = "11010519880605002X";
if (regex.test(input)) {
    alert("身份证号码格式正确");
} else {
    alert("身份证号码格式不正确");
}

10. 匹配密码（至少8位，包含字母、数字和特殊字符）

var regex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;

解析：此表达式确保密码至少8位，包含字母、数字和特殊字符。

应用：验证用户设置的密码是否符合要求。

var input = "Password123!";
if (regex.test(input)) {
    alert("密码符合要求");
} else {
    alert("密码不符合要求");
}

11. 匹配HTML标签

var regex = /<([a-z]+)[^>]*>(.*?)<\/\1>/i;

解析：此表达式匹配HTML标签及其内容。

应用：提取页面中的HTML标签。

var input = "<div>Hello, <b>world</b>!</div>";
var matches = regex.exec(input);
if (matches) {
    alert(matches[0]); // <div>Hello, <b>world</b>!</div>
}

12. 匹配URL链接

var regex = /http(s)?:\/\/[^\s]+/gi;

解析：此表达式匹配文本中的URL链接。

应用：提取页面中的URL链接。

var input = "Check out this website http://www.example.com";
var links = input.match(regex);
if (links) {
    alert(links[0]); // http://www.example.com
}

13. 匹配HTML属性

var regex = /(\w+)=["']?((?:(?:(?<!["']|\s))[\s\S])*?)["']?/gi;

解析：此表达式匹配HTML属性及其值。

应用：解析HTML标签的属性。

var input = "<a href='http://www.example.com' class='link'>Click me</a>";
var attributes = input.match(regex);
if (attributes) {
    alert(attributes[0]); // href="http://www.example.com"
}

14. 匹配HTML标签属性值

var regex = /"([^"]*)"/gi;

解析：此表达式匹配双引号内的属性值。

应用：提取HTML标签属性值。

var input = "<a href='http://www.example.com' class='link'>Click me</a>";
var values = input.match(regex);
if (values) {
    alert(values[0]); // "http://www.example.com"
}

15. 匹配HTML标签属性名

var regex = /(\w+)=["']?((?:(?:(?<!["']|\s))[\s\S])*?)["']?/gi;

解析：此表达式匹配HTML标签属性名。

应用：提取HTML标签属性名。

var input = "<a href='http://www.example.com' class='link'>Click me</a>";
var names = input.match(regex);
if (names) {
    alert(names[0]); // href="http://www.example.com"
}

16. 匹配HTML标签内容

var regex = /<([a-z]+)[^>]*>(.*?)<\/\1>/gi;

解析：此表达式匹配HTML标签及其内容。

应用：提取HTML标签内容。

var input = "<div>Hello, <b>world</b>!</div>";
var contents = input.match(regex);
if (contents) {
    alert(contents[0]); // <div>Hello, <b>world</b>!</div>
}

17. 匹配HTML标签内容（去除HTML标签）

var regex = /<[^>]*>(.*?)<\/[^>]*>/gi;

解析：此表达式匹配HTML标签内容，并去除标签。

应用：提取HTML标签内容，并去除标签。

var input = "<div>Hello, <b>world</b>!</div>";
var content = input.replace(regex, "$1");
alert(content); // Hello, world!

18. 匹配HTML标签属性

var regex = /(\w+)=["']?((?:(?:(?<!["']|\s))[\s\S])*?)["']?/gi;

解析：此表达式匹配HTML标签属性。

应用：提取HTML标签属性。

var input = "<a href='http://www.example.com' class='link'>Click me</a>";
var attributes = input.match(regex);
if (attributes) {
    alert(attributes[0]); // href="http://www.example.com"
}

19. 匹配HTML标签属性值

var regex = /"([^"]*)"/gi;

解析：此表达式匹配双引号内的属性值。

应用：提取HTML标签属性值。

var input = "<a href='http://www.example.com' class='link'>Click me</a>";
var values = input.match(regex);
if (values) {
    alert(values[0]); // "http://www.example.com"
}

20. 匹配HTML标签属性名

var regex = /(\w+)=["']?((?:(?:(?<!["']|\s))[\s\S])*?)["']?/gi;

解析：此表达式匹配HTML标签属性名。

应用：提取HTML标签属性名。

var input = "<a href='http://www.example.com' class='link'>Click me</a>";
var names = input.match(regex);
if (names) {
    alert(names[0]); // "href"
}

以上是20个实用的正则表达式及其解析和应用场景。希望这些表达式能帮助你更好地处理字符串，提高你的jQuery编程能力。