<script>
// 正则表达式
// 下面是一些核心的正则表达式语法元素：
// 1字符匹配:
// . (点): 匹配除了换行符之外的任意单个字符。
// \d: 匹配任何数字（等同于 [0-9]）。
// \D: 匹配任何非数字字符。
// \w: 匹配任何字母数字字符，包括下划线（等同于 [A-Za-z0-9_]）。
// \W: 匹配任何非字母数字字符。
// \s: 匹配任何空白字符（如空格、制表符、换页符）。
// \S: 匹配任何非空白字符
//2量词:
// *: 匹配前面的元素零次或多次。
// +: 匹配前面的元素一次或多次。
// ?: 匹配前面的元素零次或一次。
// {n}: 匹配前面的元素恰好n次。
// {n,}: 匹配前面的元素至少n次。
// {n,m}: 匹配前面的元素至少n次，但不超过m次
// 3定位符:
// ^: 匹配字符串的开始位置。
// $: 匹配字符串的结束位置。
// \b: 匹配单词边界。
// \B: 匹配非单词边界。
// 4字符集:
// [abc]: 匹配字符集中的任意一个字符。
// [^abc]: 匹配不在字符集中的任意一个字符。
// [a-z], [A-Z], [0-9]: 匹配指定范围内的字符。
// 5转义字符:
// \: 用于转义特殊字符，使其作为普通字符处理，如 \. 匹配点字符。
// 6预定义字符类:
// 除了上述提到的 \d, \w, \s 等，正则表达式还可能支持其他预定义类，具体取决于所使用的编程语言或工具。
// 正则表达式在JavaScript中应用非常广泛，以下是一些常见的应用场景：
// 1.表单验证:
// 在网页表单中验证用户输入的数据格式，
// 如邮箱地址(^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$),电话号码、密码强度等。
// 我们来翻译一下这个正则表达式()
// 第一组^\w+ : ^(开始符号),\w((小写的w)匹配以字母、数字、下划线开头的字符串)+(匹配前面的元素一次或多次)
// 第一组连起来读 匹配以字母、数字、下划线开头的字符串一次或多次
// 第二组([\.-]?\w+)*:匹配[\.-]?中的.或-零次或1次,\w+,匹配以字母、数字、下划线开头的字符串一次或多次,*: 匹配前面的元素零次或多次。
// 第二组连起来为:匹配一个或多个单词字符构成的字符串零次或多次，这个字符串前面可能有一个可选的点或破折号。
// 第三组@\w+ :@：直接匹配字符 @ 本身，无特殊意义，就是查找该字符。\w+匹配以字母、数字、下划线开头的字符串一次或多次
// 第四组([\.-]?\w+)*:匹配[\.-]?中的.或-零次或1次,\w+,匹配以字母、数字、下划线开头的字符串一次或多次,*: 匹配前面的元素零次或多次。
// 第四组连起来为:匹配一个或多个单词字符构成的字符串零次或多次，这个字符串前面可能有一个可选的点或破折号。
// 第五组(\.\w{2,3}):匹配\.，\w{2,3}匹配以字母、数字、下划线开头的字符串一次或多次，{2,3}匹配前面的元素至少2次，不超过3次。
// 第五组连起来为:匹配一个或多个单词字符构成的字符串至少2次，不超过3次，这个字符串前面必须有一个点。
// 第六组+: +表示前面的元素至少一次。 表示字符串的结束位置。
// 2文本搜索与替换:
// 在大量文本数据中查找特定模式的字符串，如日志分析中寻找错误信息，或在文档编辑器中批量替换特定词汇。
// 3数据提取:
// 从HTML、XML等标记语言中提取链接、图片URL、标签内容等特定信息。
// 分析日志文件，提取时间戳、IP地址等有用信息。
// 4字符串格式化:
// 根据规则清理或格式化文本数据，如统一邮箱地址的大小写，或去除多余的空白字符。
// 5URL解析:
// 分析URL路径，提取域名、协议、查询参数等部分。
// 安全过滤:
</script> -->
<!-- // 现在我们来写一个正则表达式
// 以QQ邮箱为示例：1111111111@qq.com,验证输入的这个QQ邮箱是否正确
var reg=/^[0-9]+@(qq)\.com$/;
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证输入的这个QQ邮箱是否正确</title>
</head>
<body>
<form id="emailForm">
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<button type="button" onclick="validateEmail()">Submit</button>
<p id="message"></p>
</form>
</body>
</html>
<script>
function validateEmail() {
const emailInput = document.getElementById('email');
const message = document.getElementById('message');
const email = emailInput.value.trim();
// .trim()：这是一个字符串方法，用于移除字符串两端的空白字符（包括空格、制表符等）。通过调用.trim()，可以确保从emailInput
// 获取的值在进行后续处理前，其首尾不会有多余的空白字符，这对于邮箱地址的格式验证非常重要，因为多余的空白可能导致验证失败。
const emailPattern = /^[0-9]+@(qq)\.com$/;
if (emailPattern.test(email)) {
message.style.color = 'green';
message.textContent = '邮箱格式正确！';
} else {
message.style.color = 'red';
message.textContent = '邮箱格式不正确，请输入有效的QQ邮箱地址。';
}
// test()函数是JavaScript中正则表达式对象的方法。它的作用是检查一个字符串是否符合某个正则表达式的规则，返回一个布尔值：
// 如果字符串符合正则表达式的规则，test()方法返回true。
// 如果不符合，则返回false。
}
</script>
输入1111111111@qq.com
输入其他
