有部分和 DOM 相关的例题，可以等后续学习了相关知识点后再刷。

匹配座机号

规则：

  1. 开始是 1 到 3 个数字
  2. 接着是一个减号 -
  3. 最后是 4 到 8 个数字
  1. var reg = /^\d{1,3}-\d{4,8}$/;
  3. console.log(reg.test('021-12345678'));    // true
  4. console.log(reg.test('21-12345678'));     // true
  5. console.log(reg.test('021-1234'));        // true
  6. console.log(reg.test('1-12345678'));      // true
  7. console.log(reg.test('021-1234567890'));  // false，因为最后的数字部分超过8个
  8. console.log(reg.test('021-123'));         // false，因为最后的数字部分少于4个
  9. console.log(reg.test('02112345678'));     // false，因为没有减号
  10. console.log(reg.test('01234-12345678'));  // false，因为开始部分的数字超过3个

匹配手机号

规则：

  1. 手机号码总共 11 位
  2. 第一位固定为 1
  3. 第二位是 3、4、5、6、7、8 或 9
  1. var reg = /^1[3-9]\d{9}$/;
  3. console.log(reg.test('13800138000'));  // true，这是一个有效的手机号码
  4. console.log(reg.test('23800138000'));  // false，因为手机号码的第一位必须为1
  5. console.log(reg.test('1580013800'));   // false，因为手机号码必须是11位
  6. console.log(reg.test('15800138000a')); // false，因为手机号码必须全部由数字构成
  7. console.log(reg.test('12000138000'));  // false，因为手机号码的第二位数字必须在3-9之间

匹配中国人的姓名

规则：两到四个汉字

  1. var reg = /^[\u4e00-\u9fa5]{2,4}$/;
  3. console.log(reg.test('张三'));      // true
  4. console.log(reg.test('李四五六七')); // false, 因为超过4个汉字
  5. console.log(reg.test('老王'));      // true
  6. console.log(reg.test('小明1'));     // false, 因为包含数字
  7. console.log(reg.test('赵'));       // false, 因为少于2个汉字

匹配密码

规则：

  1. 必须是 6-12 位的字符
  2. 只能包含数字、字母、下划线
  1. var reg = /^\w{6,12}$/;
  2. // 等同于：
  3. // var reg = /^[0-9a-zA-Z_]{6,12}$/
  5. console.log(reg.test('abcdef'));    // true
  6. console.log(reg.test('123456'));    // true
  7. console.log(reg.test('abc123_'));   // true
  8. console.log(reg.test('abc123__'));  // true
  9. console.log(reg.test('abc123__!')); // false, 因为包含除数字、字母、下划线之外的字符
  10. console.log(reg.test('a1_'));       // false, 因为少于6个字符
  11. console.log(reg.test('1234567890123456')); // false, 因为超过12个字符

匹配邮箱

规则：

  1. 电子邮件地址开始必须是一个或多个字母、数字、点、下划线、百分号、加号或减号
  2. 接着是一个 @ 符号
  3. 接下来是一个或多个字母、数字、点或短划线（域名）
  4. 然后是一个点
  5. 电子邮件地址结束必须是两个或更多字母（顶级域）
  1. var reg = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
  3. console.log(reg.test('john.doe@example.com'));      // true
  4. console.log(reg.test('john@example.com'));          // true
  5. console.log(reg.test('j@example.co.uk'));           // true
  6. console.log(reg.test('john.doe@exa_mple.com'));     // false, 因为域名部分包含了下划线
  7. console.log(reg.test('john.doe@.com'));             // false, 因为域名部分以点开始
  8. console.log(reg.test('john.doe@example'));          // false, 因为没有顶级域
  9. console.log(reg.test('john.doe@example.c'));        // false, 因为顶级域只有一个字符

匹配一个正数

规则：

  1. 开始是一个或多个数字
  2. 接着可能有小数点也可能没有
  3. 如果有小数点，则小数点后面必须还有一个或多个数字
  1. var regex = /^\d+(\.\d+)?$/;
  3. console.log(regex.test('123')); // true
  4. console.log(regex.test('0.123')); // true
  5. console.log(regex.test('123.0')); // true
  6. console.log(regex.test('123.456')); // true
  7. console.log(regex.test('.123')); // false, 必须有整数部分
  8. console.log(regex.test('123.')); // false, 如果有小数点，小数点后面必须有数字
  9. console.log(regex.test('-123')); // false, 不匹配负数
  10. console.log(regex.test('abc')); // false, 不匹配非数字字符
  11. console.log(regex.test('123abc')); // false, 不匹配数字后面带有非数字字符的情况
  12. console.log(regex.test(' ')); // false, 不匹配空格等非数字字符

匹配一个小数

规则：

  1. 开始是一个负号 -，也可以没有
  2. 然后是一个或多个数字
  3. 然后是小数点 .
  4. 然后是一个或多个数字
  1. var reg = /^-?\d+\.\d+$/;
  2. // var reg = /^-?\d+\.{1}\d+$/;
  4. console.log(reg.test('123.456')); // true
  5. console.log(reg.test('-123.456')); // true
  6. console.log(reg.test('.123')); // false, 必须有整数部分
  7. console.log(reg.test('123.')); // false, 如果有小数点，小数点后面必须有数字

匹配一个整数

规则：

  1. 开始是一个负号 -，也可以没有
  2. 然后是一个或多个数字
  3. 然后是一个小数点，也可以没有
  4. 如果有小数点的话，则后续必须出现一个或多个 0
  1. var reg = /^-?\d+(\.0+)?$/;
  3. console.log(reg.test('123')); // true
  4. console.log(reg.test('-123')); // true
  5. console.log(reg.test('-123.00')); // true
  6. console.log(reg.test('-123.0')); // true
  7. console.log(reg.test('-123.0001')); // false，小数点后只能出现 0
  8. console.log(reg.test('123.456')); // false, 有小数部分
  9. console.log(reg.test('abc')); // false, 不是数字

匹配连续数字

现在存在一个字符串："433afdsaf34542fsdssfsd234"，要求找出这段字符串中连续 3 个字符都是数字的所有字串，参考输出：["433", "345", "234"]。

  1. var str = "433afdsaf34542fsdssfsd234";
  2. var regex = /\d{3}/g;
  4. var matches = str.match(regex);
  6. if (matches) {
  7.   console.log("匹配结果: ", matches);
  8. } else {
  9.   console.log("没有匹配项");
  10. }
  11. // 匹配结果:  [ '433', '345', '234' ]
  1. var str = "433afdsaf34542fsdssfsd234";
  2. var regex = /\d{3}/g;
  4. var matches;
  5. var results = [];
  7. while ((matches = regex.exec(str)) !== null) {
  8.   results.push(matches[0]);
  9. }
  11. if (results.length > 0) {
  12.   console.log("匹配结果: ", results);
  13. } else {
  14.   console.log("没有匹配项");
  15. }
  16. // 匹配结果:  [ '433', '345', '234' ]

获取所有中文字符，并计算数量

测试字符串："一个包含中、英、数字 abc123 的字符串。"

  1. var str = "一个包含中、英、数字 abc123 的字符串。";
  3. var reg = /[\u4e00-\u9fa5]/g;
  5. var matches = str.match(reg);
  7. if (matches) {
  8.   console.log(matches)
  9.   console.log("中文字符的数量: ", matches.length);
  10. } else {
  11.   console.log("没有中文字符");
  12. }
  13. // [
  14. //   '一', '个', '包',
  15. //   '含', '中', '英',
  16. //   '数', '字', '的',
  17. //   '字', '符', '串'
  18. // ]
  19. // 中文字符的数量:  12

找出连续字符

测试字符串："aaaaaaaabbbbbbbbbccccccdefgggggggg"
期望输出的结果：a``b``c``g

  1. var s = "aaaaaaaabbbbbbbbbccccccdefgggggggg";
  3. var reg = /(\w)\1+/g;
  4. // var reg = /(?<char>\w)\1+/g;
  5. // var reg = /(?<char>\w)\k<char>+/g;
  7. while (result = reg.exec(s)) {
  8.   console.log(result[1])
  9. }
  10. // a
  11. // b
  12. // c
  13. // g
  1. var str = "aaaaaaaabbbbbbbbbccccccdefgggggggg";
  3. var regex = /(.)\1*/g;
  5. var matches = str.match(regex);
  7. console.log(matches)
  8. // [ 'aaaaaaaa', 'bbbbbbbbb', 'cccccc', 'd', 'e', 'f', 'gggggggg' ]
  10. var result = matches.filter(s => s.length > 1).map(s => s[0]).join('');
  12. console.log(result)
  13. // abcg
  1. var str = "aaaaaaaabbbbbbbbbccccccdefgggggggg";
  3. var regex = /(.)\1+/g;
  5. var matches = str.match(regex);
  7. console.log(matches)
  8. // [ 'aaaaaaaa', 'bbbbbbbbb', 'cccccc', 'gggggggg' ]
  10. var result = matches.map(s => s[0]).join('');
  12. console.log(result)
  13. // abcg

过滤敏感词

有一个敏感词数组，需要将字符串中出现的敏感词替换为四个星号

敏感词数组：["小逗逼", "捣蛋鬼"]

示例：

  • 输入："A：男孩子和女孩子之间有什么区别？B：男孩子长大叫小逗逼，女孩子长大叫捣蛋鬼。"
  • 输出："A：男孩子和女孩子之间有什么区别？B：男孩子长大叫****，女孩子长大叫****。"
  1. function removeSensitiveWords(senWords, s, rep) {
  2.   var reg = new RegExp(`(${senWords.join("|")})`, "g")
  3.   return s.replace(reg, rep)
  4. }
  6. var result = removeSensitiveWords(
  7.   ["小逗逼", "捣蛋鬼"],
  8.   "A：男孩子和女孩子之间有什么区别？B：男孩子长大叫小逗逼，女孩子长大叫捣蛋鬼。",
  9.   "****"
  10. )
  12. console.log(result)
  13. // A：男孩子和女孩子之间有什么区别？B：男孩子长大叫****，女孩子长大叫捣蛋鬼。

解析日期信息

输入：'2015-05-01, 2019-06-19, 2000-04-28'
输出：

  1. [
  2.   {
  3.     "y": 2015,
  4.     "m": 5,
  5.     "d": 1
  6.   },
  7.   {
  8.     "y": 2019,
  9.     "m": 6,
  10.     "d": 19
  11.   },
  12.   {
  13.     "y": 2000,
  14.     "m": 4,
  15.     "d": 28
  16.   }
  17. ]
  1. var s = '2015-05-01, 2019-06-19, 2000-04-28';
  3. var reg = /(\d{4})-(\d{1,2})-(\d{1,2})/g;
  5. var result = []
  7. s.replace(reg, (_, g1, g2, g3) => {
  8.   result.push({
  9.     y: +g1,
  10.     m: +g2,
  11.     d: +g3
  12.   })
  13. })
  15. console.log(result)
  16. // [
  17. //   { y: 2015, m: 5, d: 1 },
  18. //   { y: 2019, m: 6, d: 19 },
  19. //   { y: 2000, m: 4, d: 28 }
  20. // ]

解析 html 标题

题目描述：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>23.08.01</title>
  8. </head>
  10. <body>
  11.   <div class="container">
  12.     <!-- Emmet 速写：
  13.       (h2{第$章}+p*5>lorem5)*10 -->
  14.     <h2>第1章</h2>
  15.     <p>Lorem ipsum dolor sit amet.</p>
  16.     <p>Vitae sequi aspernatur a reiciendis.</p>
  17.     <p>Recusandae ullam consequatur aut repellendus.</p>
  18.     <p>Sit id debitis laborum quasi.</p>
  19.     <p>Unde laborum ipsam eaque omnis!</p>
  20.     <h2>第2章</h2>
  21.     <p>Lorem ipsum dolor sit amet.</p>
  22.     <p>Reiciendis quia iste illo inventore!</p>
  23.     <p>Ad enim porro molestiae qui?</p>
  24.     <p>Aperiam magni possimus officia iste.</p>
  25.     <p>Unde dolores repudiandae optio odit.</p>
  26.     <h2>第3章</h2>
  27.     <p>Lorem ipsum dolor sit amet.</p>
  28.     <p>Voluptatem officiis esse cum officia.</p>
  29.     <p>Aut tempora nemo obcaecati vero.</p>
  30.     <p>Ab doloremque earum illo. Repudiandae.</p>
  31.     <p>Nobis ducimus quos quas similique!</p>
  32.     <h2>第4章</h2>
  33.     <p>Lorem ipsum dolor sit amet.</p>
  34.     <p>Saepe recusandae aliquam mollitia placeat.</p>
  35.     <p>Sed ex quod enim ut!</p>
  36.     <p>Ratione molestiae molestias iste temporibus.</p>
  37.     <p>In vel cupiditate quas rerum!</p>
  38.     <h2>第5章</h2>
  39.     <p>Lorem ipsum dolor sit amet.</p>
  40.     <p>Quod minima in quia atque.</p>
  41.     <p>Deserunt tempore rerum aut fuga!</p>
  42.     <p>Ratione nesciunt numquam iste eum!</p>
  43.     <p>Quidem numquam animi officia temporibus?</p>
  44.     <h2>第6章</h2>
  45.     <p>Lorem ipsum dolor sit amet.</p>
  46.     <p>Autem natus necessitatibus quos error.</p>
  47.     <p>Id vero hic at suscipit!</p>
  48.     <p>Culpa libero quibusdam est adipisci?</p>
  49.     <p>Nihil enim atque unde dolorem.</p>
  50.     <h2>第7章</h2>
  51.     <p>Lorem ipsum dolor sit amet.</p>
  52.     <p>Saepe magnam fugiat voluptate illum.</p>
  53.     <p>Dolor explicabo tenetur iste quae.</p>
  54.     <p>Ab natus maxime suscipit eaque.</p>
  55.     <p>Possimus soluta aperiam voluptatem quia.</p>
  56.     <h2>第8章</h2>
  57.     <p>Lorem ipsum dolor sit amet.</p>
  58.     <p>Tenetur mollitia maiores adipisci eveniet!</p>
  59.     <p>Quam adipisci laborum doloribus in.</p>
  60.     <p>Expedita architecto eos id vitae!</p>
  61.     <p>Neque similique in excepturi aperiam.</p>
  62.     <h2>第9章</h2>
  63.     <p>Lorem ipsum dolor sit amet.</p>
  64.     <p>Natus quisquam rerum doloribus ex.</p>
  65.     <p>Veritatis minus suscipit nihil repudiandae.</p>
  66.     <p>Soluta exercitationem aspernatur doloribus impedit?</p>
  67.     <p>Tempore eveniet perferendis quasi quae.</p>
  68.     <h2>第10章</h2>
  69.     <p>Lorem ipsum dolor sit amet.</p>
  70.     <p>Voluptate aperiam est dolorem maxime.</p>
  71.     <p>Porro aut dolorem magnam consectetur?</p>
  72.     <p>Dolor quas impedit dolorum molestias!</p>
  73.     <p>Incidunt sapiente expedita blanditiis nesciunt.</p>
  74.   </div>
  75.   <script>
  76.     // 请在这里编码，使用正则，解析出 div.container 中的所有 h2 元素，按照如下格式返回：
  77.     // [
  78.     //   "<h2>第1章</h2>", "<h2>第2章</h2>", "<h2>第3章</h2>",
  79.     //   "<h2>第4章</h2>", "<h2>第5章</h2>", "<h2>第6章</h2>",
  80.     //   "<h2>第7章</h2>", "<h2>第8章</h2>", "<h2>第9章</h2>",
  81.     //   "<h2>第10章</h2>"
  82.     // ]
  83.   </script>
  84. </body>
  86. </html>

参考代码：

  1. <script>
  2.   // 1. 获取 div.container 的 HTML 内容
  3.   var containerHTML = document.querySelector(".container").innerHTML;
  5.   // 2. 编写正则表达式来匹配所有的 h2 元素
  6.   var reg = /<h2>.*?<\/h2>/g;
  8.   // 3. 使用 match 方法来获取所有的匹配项
  9.   var h2Matches = containerHTML.match(reg);
  11.   console.log(h2Matches);
  12. </script>

image.png

补充：

就此 demo 而言，因其 HTML 结构比较单一，并没有多么复杂，所以直接通过正则的方式来匹配字符串是没问题的。

但一般来说，使用正则表达式解析 HTML 是一个很糟糕的主意，因为 HTML 的复杂性使得很难编写一个既正确又完整的正则表达式来匹配所有可能的 HTML 变体。一个更好的做法通常是使用一个完整的 HTML 解析器，或者使用浏览器提供的 DOM API。

通过这个 demo，我们需要有这样一个意识：HTML 字符串，在必要的时候也是可以尝试将其转为字符串，然后通过 JS 的正则来处理的。

预查练习：封装判断密码强度的方法

规则：

  1. 密码长度必须是 6-12 位，如果长度不满足要求，则返回 false
  2. 强度判断规则：
    • 出现小写字母、大写字母 -> 弱
    • 出现小写字母、大写字母、数字 -> 中
    • 出现小写字母、大写字母、数字、特殊字符(!@#_,.) -> 强
  3. 若所有字符都是非法字符，则返回 false
  1. /**
  2.  * 判断密码强度
  3.  * @param {String} pwd 密码
  4.  * @returns "强" | "中" | "弱" | false
  5.  */
  6. function judgePwd(pwd) {
  7.   var len = pwd.length;
  8.   var reg_valid = /^[a-zA-Z\d!@#_,.]+$/; // 只允许大小写字母、数字、特殊字符
  10.   if (len < 6 || len > 12 || !reg_valid.test(pwd)) return false; // 不满足要求
  12.   var reg_part1 = "(?=.*[a-zA-Z])"; // 预查大小写字母
  13.   var reg_part2 = "(?=.*\\d)"; // 预查数字
  14.   var reg_part3 = "(?=.*[!@#_,.])"; // 预查特殊字符
  16.   if (new RegExp(`${reg_part1}${reg_part2}${reg_part3}`).test(pwd)) return "强"
  17.   else if (new RegExp(`${reg_part1}${reg_part2}`).test(pwd)) return "中"
  18.   else if (new RegExp(`${reg_part1}`).test(pwd)) return "弱"
  19.   else return false
  20. }
  22. console.log(judgePwd('123')); // => false
  23. console.log(judgePwd('asdfgh')); // => 弱
  24. console.log(judgePwd('asd123')); // => 中
  25. console.log(judgePwd('asd123!!!')); // => 强
  26. console.log(judgePwd('asd123!!!asd123!!!')); // => false
  27. console.log(judgePwd('♉♉♉♋♋♋')) // => false
  28. console.log(judgePwd('abcABC1!汉字')); // => false

面试题：金额格式化输出

123456789-> 123,456,789
12345678 -> 12,345,678
12345678.123 -> 12,345,678.123

  1. function formatMoney(num) {
  2.   // 将输入的数字转化为字符串，并将此字符串拆分为整数部分和小数部分
  3.   var parts = num.toString().split(".");
  5.   // 对整数部分进行格式化
  6.   parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  7.   // parts[0] = parts[0].replace(/\B(\d(?=(\d{3})+(?!\d)))/g, "$1,");
  9.   // 将格式化后的整数部分和小数部分重新拼接
  10.   return parts.join(".");
  11. }
  13. console.log(formatMoney(123456789));    // 123,456,789
  14. console.log(formatMoney(12345678));     // 12,345,678
  15. console.log(formatMoney(12345678.123)); // 12,345,678.123