2.10、日期格式化
function formatDate(date, fmt) { var regexp = { "M+": date.getMonth() + 1, "d+": date.getDate(), "h+": date.getHours(), "m+": date.getMinutes(), "s+": date.getSeconds(), "q+": Math.floor((date.getMonth() + 3) / 3), "S": date.getMilliseconds() }; if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)); } for (var k in regexp) { if (new RegExp("(" + k + ")").test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (regexp[k]) : (("00" + regexp[k]).substr(("" + regexp[k]).length))); } } return fmt; } // 示例，将日期格式化为yyyy-MM-dd hh:mm:ss格式 var date = new Date(); var formattedDate = formatDate(date, 'yyyy-MM-dd hh:mm:ss'); console.log(formattedDate); // 例如：2023-07-29 18:14:07
2.11、字符串替换
可以使用字符串的 replace() 方法以及正则表达式来进行字符串替换。
代码示例
const str = "hello, world!"; const newStr = str.replace(/hello/g, "hi"); console.log(newStr); // "hi, world!"
解释
| 序号 | 正则 | 解释 |
| 1 | /hello/g |
匹配字符串中的所有 "hello"字符串，并将其替换为 "hi" |
| 2 | /g |
表示全局匹配，可以匹配字符串中的所有符合条件的子字符串 |
2.12、烤串命名风格转换为大小驼峰命名风格
示例代码
const str = "hello-world-this-is-a-test"; const newStr = str.replace(/-([a-z])/g, function(match, p1) { return p1.toUpperCase(); }); console.log(newStr); // "helloWorldThisIsATest"
解释
正则表达式 /-([a-z])/g 匹配符合烤串命名风格的字符串中的 - 后面的小写字母，并将其替换为对应的大写字母。其中 /g 表示全局匹配，可以匹配字符串中的所有符合条件的子字符串。
在 replace() 方法中，第二个参数可以是一个函数，可以在函数中对匹配到的字符串进行更复杂的处理。函数接收两个参数，第一个参数是匹配到的字符串，第二个参数是匹配到的子串中的第一个括号里的内容。
在这个例子中，我们使用匿名函数来处理匹配到的字符串，将匹配到的小写字母转换为对应的大写字母，并返回。匹配到的字符串将被替换为返回值。
2.13、蛇形命名风格（下划线分隔）转换为驼峰命名风格
示例代码
const str = "hello_world_this_is_a_test"; const newStr = str.replace(/_([a-z])/g, function(match, p1) { return p1.toUpperCase(); }); console.log(newStr.replace(/^[a-z]/, function(s) { return s.toUpperCase(); })); // "HelloWorldThisIsATest"
解释
在首先使用正则表达式 /_([a-z])/g 匹配符合蛇形命名风格的字符串中的 _ 后面的小写字母，并将其替换为对应的大写字母。其中 /g 表示全局匹配，可以匹配字符串中的所有符合条件的子字符串。
在 replace() 方法中，第二个参数可以是一个函数，可以在函数中对匹配到的字符串进行更复杂的处理。函数接收两个参数，第一个参数是匹配到的字符串，第二个参数是匹配到的子串中的第一个括号里的内容。
在这个例子中，我们使用匿名函数来处理匹配到的字符串，将匹配到的小写字母转换为对应的大写字母，并返回。匹配到的字符串将被替换为返回值。
由于在驼峰命名风格中首字母也是大写的，因此我们还需要再次使用字符串的 replace() 方法，将第一个字符转换为大写字母。
2.14、驼峰命名风格（首字母小写）转换为蛇形命名风格（下划线分隔）
示例代码
const str = "helloWorldThisIsATest"; const newStr = str.replace(/[A-Z]/g, function(match) { return "_" + match.toLowerCase(); }); console.log(newStr.replace(/^_/, "")); // "hello_world_this_is_a_test"
解释
使用正则表达式 /[A-Z]/g 匹配符合驼峰命名风格的字符串中的大写字母，并在其前面添加 _，然后将其转换为小写字母。其中 /g 表示全局匹配，可以匹配字符串中的所有符合条件的子字符串。
在 replace() 方法中，第二个参数也是一个函数，它接收一个参数，就是匹配到的字符串。我们在函数中将匹配到的大写字母转换为 _ + 对应的小写字母，并返回处理后的字符串。
由于我们添加了一个多余的 _，因此我们还需要再次使用字符串的 replace() 方法，将第一个字符的 _ 去除。
2.15、url参数解析
将 URL 中的参数解析出来可以使用正则表达式和字符串的 match() 方法实现。
示例代码
const url = "https://www.example.com/path?foo=bar&baz=qux&hello=world"; const params = url.match(/\?.+/)[0].slice(1).split("&"); const queryParams = {}; for (let i = 0; i < params.length; i++) { const param = params[i].split("="); queryParams[param[0]] = decodeURIComponent(param[1]); } console.log(queryParams); // {foo: "bar", baz: "qux", hello: "world"}
解释
使用正则表达式 /\?.+/ 匹配 URL 中的参数部分。其中 \? 匹配 ? 字符，.+ 匹配一个或多个字符。然后我们使用数组的 slice() 方法去除第一个字符 ?。再使用字符串的 split() 方法将参数字符串分割成参数名和参数值的数组。
最后，我们将参数名和参数值存储在一个对象中，使用 decodeURIComponent() 方法对参数进行解码，以避免出现转义字符的问题。
注意，在实际开发中，我们需要对 URL 参数进行一些安全性处理，例如对特殊字符进行转义，以避免 XSS 攻击等漏洞。
2.16、检验密码强度
密码强度通常是根据密码中包含的字符种类和密码长度来判断的。我们可以使用正则表达式来检验密码是否包含了足够多的字符种类和长度。
示例代码
function testPasswordStrength(password) { const strongRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/; const mediumRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d@$!%*?&]{6,}$/; if (strongRegex.test(password)) { return "strong"; } else if (mediumRegex.test(password)) { return "medium"; } else { return "weak"; } }
解释
| 序号 | 正则 | 解释 |
| 1 | ^(?=.*[a-z]) |
密码中必须至少包含一个小写字母 |
| 2 | (?=.*[A-Z]) |
密码中必须至少包含一个大写字母 |
| 3 | (?=.*\d) |
密码中必须至少包含一个数字 |
| 4 | (?=.*[@$!%*?&]) |
密码中必须至少包含一个特殊字符 |
| 5 | [A-Za-z\d@$!%*?&]{8,} |
密码必须至少包含 8 个字符，可以是大写字母、小写字母、数字和特殊字符中的任意组合 |
如果密码强度符合要求，会返回 "strong"、"medium" 或 "weak" 之一。可以根据需要进一步处理这些结果 |
||
浏览器测试
三、element ui自定义校验
const validateEmailAddress = (rule, value, callback) => { console.log('160', value) if (value === '') { callback(new Error('请输入邮箱地址')); } else { const reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@(163.){1,63}[a-z0-9]+$"); if(!reg.test(value)){ callback(new Error('请输入163邮箱地址')); } else { callback(); } } };
<form action=""> 2 输入：<input type="text" name="mazey" id="mazey" placeholder="请输入邮箱"> 3 <input type="button" value="验证" onclick="check();"> 4 </form> 5 6 <script> 7 function check(){ 8 var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式 9 var obj = document.getElementById("mazey"); //要验证的对象 10 if(obj.value === ""){ //输入不能为空 11 alert("输入不能为空!"); 12 return false; 13 }else if(!reg.test(obj.value)){ //正则验证不通过，格式不对 14 alert("验证不通过!"); 15 return false; 16 }else{ 17 alert("通过！"); 18 return true; 19 } 20 } 21 </script>
