企业官网建设流程全解析

自己做视频网站犯法,珠海集团网站建设,个人品牌打造方案,自建商城正则表达式一般用于模式匹配#xff0c;搜索#xff0c;替换等。一、创建两种方式// 字面量 const emailPattern /^[^\s][^\s]\.[^\s]$/;// 构造函数#xff08;模式可以动态生成#xff09; const searchTerm hello; const dynamicRegex new RegExp(\\b${s…正则表达式一般用于模式匹配搜索替换等。一、创建两种方式// 字面量 const emailPattern /^[^\s][^\s]\.[^\s]$/; // 构造函数模式可以动态生成 const searchTerm hello; const dynamicRegex new RegExp(\\b${searchTerm}\\b, gi);二、flags标志的含义粘性匹配要求匹配必须从目标字符串的lastindex位置开始要求连续匹配成功时更新失败时重置为0三、常用模式语法1、字符类\d数字[0-9]\D非数字\w数字字母下划线[a-zA-Z0-9_]\W非单词字符\s空白字符\S非空白字符.出换行外的任何字符[a-z]自定义字符类[^a-z]否定字符类2、量词a*0个或多个aa一个或多个aa?0个或一个aa{3}三个aa{2,4}2-4个aa{2,}至少两个a3、锚点和边界^字符串开始^test$字符串结束test$\b单词边界\btest\b\B非单词边界\Btest\B4、分组和捕获// 捕获组 const phoneRegex /(\d{3})-(\d{3})-(\d{4})/; const match phoneRegex.exec(123-456-7890); console.log(match[0]); // 完整匹配: 123-456-7890 console.log(match[1]); // 第一组: 123 console.log(match[2]); // 第二组: 456 console.log(match[3]); // 第三组: 7890 // 非捕获组 (?:pattern) //非捕获组只能完整匹配没有分组内容 const nonCapturing /(?:https?:\/\/)([^\/])/; // 命名捕获组 (?namepattern) const namedGroup /(?year\d{4})-(?month\d{2})-(?day\d{2})/; const dateMatch namedGroup.exec(2023-12-25); console.log(dateMatch.groups.year); // 2023 console.log(dateMatch.groups.month); // 12 console.log(dateMatch.groups.day); // 255、断言断言是正则表达式的特殊结构用于检查某个位置是否符合条件但不消耗字符。特点零宽不占用匹配位置只检查条件不消耗字符匹配后指针留在原位置纯条件检查只验证是否不实际匹配内容const text apple price: $10; // 普通匹配 - 消耗字符 const normalRegex /\$\d/; console.log(text.match(normalRegex)); // [$10] // 匹配后指针移动到0后面 // 使用断言 - 不消耗字符 const lookaheadRegex /(?\$)\d/; console.log(text.match(lookaheadRegex)); // [10] // 断言(?\$)只检查前面是否有$不匹配$1断言类型// 1. 正向肯定断言正向预查-----------匹配后面是...的位置const positiveLookahead /pattern(?condition)/;// 2. 正向否定断言负向预查-----------匹配后面不是...的位置const negativeLookahead /pattern(?!condition)/;反向断言是ES2018新增加的部分旧浏览器可能不支持// 3. 反向肯定断言正向回顾后发-----------匹配前面是...的位置const positiveLookbehind /(?condition)pattern/;// 4. 反向否定断言负向回顾后发-----------匹配前面不是...的位置const negativeLookbehind /(?!condition)pattern/;四、常用方法1、String.prototype方法1match()功能返回字符串正则表达式的结果特点包含g返回所有匹配结果的数组不包含g返回第一个匹配结果及捕获组信息// 无 g 标志 - 返回完整匹配信息 const str1 2023-12-25; const result1 str1.match(/(\d{4})-(\d{2})-(\d{2})/); console.log(result1); /* [ 2023-12-25, // 完整匹配 2023, // 第一个捕获组 12, // 第二个捕获组 25, // 第三个捕获组 index: 0, // 匹配开始的索引 input: 2023-12-25, // 原始字符串 groups: undefined // 命名捕获组如果有 ] */ // 有 g 标志 - 只返回匹配的文本数组 const str2 test1 test2 test3; const result2 str2.match(/test\d/g); console.log(result2); // [test1, test2, test3] // 匹配失败 const result3 str2.match(/abc/); console.log(result3); // null2matchAll()功能返回一个迭代器包含所有匹配结果及其捕获组特点必须使用g标志否则会抛出错误每个匹配都返回完整信息包括捕获组索引等返回的是迭代器所以可用Array.from转换为数组const emails atest.com, bexample.org, cdomain.net; const emailRegex /([a-z])([a-z])\.([a-z]{2,})/gi; for (const match of emails.matchAll(emailRegex)) { console.log(用户: ${match[1]}, 域名: ${match[2]}.${match[3]}); }3search()功能返回第一个匹配项的索引特点忽略g标志总是返回第一个匹配位置。const str Hello World! Welcome to JavaScript.; console.log(str.search(/World/)); // 6 console.log(str.search(/world/i)); // 6忽略大小写 console.log(str.search(/javascript/i)); // 25 console.log(str.search(/Python/)); // -1 // 验证是否存在数字 if (str.search(/\d/) ! -1) { console.log(包含数字); } else { console.log(不包含数字); }4replace()功能替换匹配的子字符串特点如果有g标志替换所有匹配如果无g标志替换第一个匹配替换字符串中可以包括特殊替换模式// 基本替换 const str1 Hello World World; console.log(str1.replace(/World/, JavaScript)); // Hello JavaScript World console.log(str1.replace(/World/g, JavaScript)); // Hello JavaScript JavaScript // 使用捕获组 const str2 John Smith; console.log(str2.replace(/(\w)\s(\w)/, $2, $1)); // Smith, John const str3 2023-12-25; console.log(str3.replace(/(\d{4})-(\d{2})-(\d{2})/, $3/$2/$1)); // 25/12/2023 // 使用函数进行动态替换 const str4 The price is $100 and $200; const result str4.replace(/\$(\d)/g, (match, amount) { return $${parseInt(amount) * 1.1}; // 涨价10% }); console.log(result); // The price is $110 and $220 // 命名捕获组 const str5 User: john_doe, Age: 30; console.log( str5.replace( /User: (?username\w), Age: (?age\d)/, 用户名: $username, 年龄: $age ) ); // 用户名: john_doe, 年龄: 30 // 更复杂的函数替换 const html div classold内容/div; const newHtml html.replace( /(\w)([^]*)/g, (match, tagName, attributes) { return ${tagName}${attributes}>const str a b c a b c; // 使用字符串模式 console.log(str.replaceAll(a, x)); // x b c x b c // 使用正则表达式必须有 g 标志 console.log(str.replaceAll(/[abc]/g, x)); // x x x x x x // 会抛出错误因为缺少 g 标志 try { str.replaceAll(/[abc]/, x); } catch (e) { console.log(e.message); // replaceAll must be called with a global RegExp } // 使用函数 const result str.replaceAll(/[abc]/g, (match) { return match.toUpperCase(); }); console.log(result); // A B C A B C6split()功能使用正则表达式分割字符串特点如果正则包含捕获组捕获组的内容也会包含在结果数组中可以限制返回的数组长度。// 基本分割 const str1 a,b,c; console.log(str1.split(/,/)); // [a, b, c] // 包含捕获组 const str2 a,b,c; console.log(str2.split(/(,)/)); // [a, ,, b, ,, c] // 复杂分割 const str3 Hello, World! Welcome to JavaScript.; console.log(str3.split(/[,\s!]/)); // [Hello, World, Welcome, to, JavaScript, ] // 限制返回长度 const str4 a,b,c,d,e; console.log(str4.split(/,/, 3)); // [a, b, c] // 提取特定部分 const logLine 2023-12-25 10:30:15 INFO User logged in; const parts logLine.split(/\s/); console.log({ date: parts[0], time: parts[1], level: parts[2], message: parts.slice(3).join( ) }); // { date: 2023-12-25, time: 10:30:15, level: INFO, message: User logged in }2、RegExp方法1test()功能测试字符串是否匹配正则表达式特点如果正则中包含g标志会更新lastindex属性// 基本用法 const emailRegex /^[^\s][^\s]\.[^\s]$/; console.log(emailRegex.test(testexample.com)); // true console.log(emailRegex.test(invalid-email)); // false // 包含 g 标志时的行为 const regex /test/g; const str test test test; console.log(regex.test(str)); // true console.log(regex.lastIndex); // 4 console.log(regex.test(str)); // true console.log(regex.lastIndex); // 9 console.log(regex.test(str)); // true console.log(regex.lastIndex); // 14 console.log(regex.test(str)); // false console.log(regex.lastIndex); // 0重置 // 重置 lastIndex regex.lastIndex 0; // 实用验证函数 function validateInput(input, regex) { if (!regex.test(input)) { console.log(验证失败: ${input}); return false; } return true; } const phoneRegex /^1[3-9]\d{9}$/; console.log(validateInput(13800138000, phoneRegex)); // true console.log(validateInput(123456, phoneRegex)); // false2exec()功能执行正则表达式匹配返回详细信息特点没有g标志总返回第一个匹配有g每次调用返回下一个匹配直到返回null返回结果包含完整匹配信息比match灵活。// 无 g 标志 const regex1 /(\d{4})-(\d{2})-(\d{2})/; const result1 regex1.exec(今天是2023-12-25); console.log(result1); /* [ 2023-12-25, 2023, 12, 25, index: 3, input: 今天是2023-12-25, groups: undefined ] */ // 有 g 标志遍历所有匹配 const regex2 /\b\w\b/g; const str Hello World JavaScript; let match; while ((match regex2.exec(str)) ! null) { console.log(找到 ${match[0]} 在位置 ${match.index}); console.log(下次搜索从位置 ${regex2.lastIndex} 开始); } // 输出 // 找到 Hello 在位置 0 // 下次搜索从位置 5 开始 // 找到 World 在位置 6 // 下次搜索从位置 11 开始 // 找到 JavaScript 在位置 12 // 下次搜索从位置 22 开始 // 使用命名捕获组 const dateRegex /(?year\d{4})-(?month\d{2})-(?day\d{2})/; const dateMatch dateRegex.exec(2023-12-25); console.log(dateMatch.groups.year); // 2023 console.log(dateMatch.groups.month); // 12 console.log(dateMatch.groups.day); // 25 // 解析复杂结构 const logRegex /(\d{4}-\d{2}-\d{2})\s(\d{2}:\d{2}:\d{2})\s(\w)\s(.)/; const logLine 2023-12-25 10:30:15 ERROR Database connection failed; const logMatch logRegex.exec(logLine); if (logMatch) { console.log({ timestamp: ${logMatch[1]} ${logMatch[2]}, level: logMatch[3], message: logMatch[4] }); }3、总结