正则表达式

Q&A

1. \d，\w,\s,[a-zA-Z0-9],\b,.,*,+,?,x{3},^$分别是什么?

符号	含义
\d	数字
\w	单词型字符
\s	空格
[a-zA-Z0-9]	范围类，从a到z，从A到Z，0到9
\b	字母边界
.	除回车和换行的单个字符
*	0个或多个任意字符
+	至少一个字符
?	至多一个字符
x{3}	3个x
^	以...开始
$	以...结束

---

2. 贪婪模式和非贪婪模式指什么?

• 贪婪模式类似于“贪吃蛇”，即尽可能多地匹配，直到无法匹配为止；
• 非贪婪模式与贪婪模式相反，即尽可能少地匹配，在正则表达式的量词后面添加个“?”即可，eg：

贪婪模式和非贪婪模式

---

Code

1. 写一个函数trim(str)，去除字符串两边的空白字符

  <script>
    function trim(str) {
      return str.replace(/^\s+|\s+$/g, "");
    }
    var str1 = " 123 ";
    console.log(trim(str1));
  </script>

代码1

2. 使用实现 addClass(el, cls)、hasClass(el, cls)、removeClass(el,cls)，使用正则

  <script>
    function addClass(el, cls) {
      el.className += " " + cls;
    }
    function hasClass(el, cls) {
      var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)", "g");
      return reg.test(el.className);
    }
    function removeClass(el, cls) {
      var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)", "g");
      return el.className.replace(reg, "");  
    }
  </script>

3. 写一个函数isEmail(str)，判断用户输入的是不是邮箱

  <script>
    function isEmall(str) {
      var reg = /^[\w\.-]+@{1}[\w-]+\.[\w\.-]+$/;
      return reg.test(str);
    }
    var str1 = "af1_zhao@qq.com.ck",
        str2 = "1235!~@163.com";
    console.log(isEmall(str1));
    console.log(isEmall(str2));
  </script>

判断是否为邮箱

4. 写一个函数isPhoneNum(str)，判断用户输入的是不是手机号

  <script>
    function isPhoneNum(str) {
      var reg = /^1\d{10}$/;
      return reg.test(str);
    }
    var str1 = "13204380438",
        str2 = "123456";
    console.log(isPhoneNum(str1));
    console.log(isPhoneNum(str2));
  </script>

代码4

5. 写一个函数isValidUsername(str)，判断用户输入的是不是合法的用户名（长度6-20个字符，只能包括字母、数字、下划线）

  <script>
    function isValidUsername(str) {
      var reg = /^\w{6,20}$/;
      return reg.test(str);
    }
    var str1 = "ab645651_";
        str2 = "djsklf!-";
    console.log(isValidUsername(str1));
    console.log(isValidUsername(str2));
  </script>

代码5

6. 写一个函数isValidPassword(str), 判断用户输入的是不是合法密码（长度6-20个字符，包括大写字母、小写字母、数字、下划线至少两种）

  <script>
    function isValidPassword(str) {
      var reg = /^\w{6,20}$/;
      if(reg.test(str)) {
        if(/(^\d+$)|(^_+$)|(^[a-z]+$)|(^[A-Z]+$)/.test(str)) {
          return false;
        }
        return true;
      }
      return false;
    }
    console.log(isValidPassword("123456"));  // false
    console.log(isValidPassword("abcdef"));  // false
    console.log(isValidPassword("ABCDEF"));  // false
    console.log(isValidPassword("______"));  // false
    console.log(isValidPassword("abcAVB"));  // true
    console.log(isValidPassword("abc123"));  // true
    console.log(isValidPassword("abc___"));  // true
    console.log(isValidPassword("abc_2_"));  // true
    console.log(isValidPassword("dfghjkhgfdsfghjkl34223423645")); // false
    console.log(isValidPassword("sad"));     // false
  </script>

代码6

7. 写一个正则表达式，得到如下字符串里所有的颜色（#121212）

  <script>
    var reg = /#\w{6}/g,
        subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 ";
    alert( subj.match(reg) );
  </script>

代码7

8. 下面代码输出什么? 为什么? 改写代码，让其输出hunger, world.

  <script>
  var str = 'hello  "hunger" , hello "world"';
  var pat =  /".*"/g;
  console.log(str.match(pat));
  </script>

效果

可以看出，匹配为最边上的""，是贪婪模式，可以通过加上？变为非贪婪模式：

  <script>
  var str = 'hello  "hunger" , hello "world"';
  var pat =  /".*?"/g;
  console.log(str.match(pat));
  </script>

非贪婪模式

9. 补全如下正则表达式，输出字符串中的注释内容. (可尝试使用贪婪模式和非贪婪模式两种方法)

• 非贪婪模式：

  <script>
    str = '.. <!-- My -- comment \n test --> .. <!----> .. ';
    reg = /<!--[\w\W]*?-->/g;
    str.match(reg);
  </script>

代码9-非贪婪模式

• 贪婪模式：

  <script>
    str = '.. <!-- My -- comment \n test --> .. <!----> .. ';
    reg = /<!--[^>]*-->/g;
    str.match(reg);
  </script>

代码9-贪婪模式

10. 补全如下正则表达式

• 非贪婪模式：

    reg = /<[a-z].*?>/g;
    var str = '<> <a href="/"> <input type="radio" checked> <b>';
    str.match(reg);

代码10-非贪婪模式

• 贪婪模式：

<script>
    reg = /<[^>]+>/g;
    var str = '<> <a href="/"> <input type="radio" checked> <b>';
    str.match(reg);
  </script>

代码10-贪婪模式

---

本文归本人和饥人谷所有，如需转载请注明来源，谢谢