正则表达式基础

正则表达式

Regular Expression用于匹配字符串中的组合
正则表达式也是对象
应用:
    1.匹配 想要的内容
    2.替换 关键词
    3.提取 提取相关的作用
灵活，极其简单的方式

实际开发:一般用复制好的正则

1.js中的使用:

创建正则表达式
1.通过Regexp对象创建
var regexp = new Regexp(/表达式/);

2.通过字面量创建 
var rg = /表达式/;

3.test()方法:检测是否符号规范,正则专用，用于检测文本是否符号正则表达式规范,
符合返回true，不符合返回false
regexObj.test(str) str是要检测的文本，regexObj是正则表达式

2.正则表达式特殊字符:

正则表达式不需要加"",不管是字符还是数字型
1.边界符(限定符):
    ^ :以什么开头
    $ :以什么结尾
    精确匹配: /^表达式$/
2.字符类:
    [ ]表示只要有括号内一个就行，就返回true
    用法:/[abc]/
    加入限定符:
    /^[表达式]&/只能是表达式的一个字符
    [-]表示一个范围:如[a-z]只a-z
 3.字符组合:
    /^[a-zA-Z0-9_-]$/多个选择一个
    []内的^表示取反:即不能包含括号内的字符:用法/[^0-9]/即不包含数字
4..量词符:
    1.符号:
        *:表示可以表达式可以出现0或者很多次 >=0，其余都返回false
        如:/^表达式*$/    /^a*$/表示a可以出现0次或者多次

        +:表示表达式可以出现1次或者多次，其余都返回false
        如:/^表达式+$/    /^a+$/表示a可以出现1次或者多次

        ?: 重复1次或者0次，其余都返回false
        如:/^表达式?$/    /^a?$/表示a可以出现1次或者0次
    2.精确选择
        1.{n}重复n次
            {3}重复3次
        2.{n,}表示n次以上的
            {3,}重复三次以上
        3.{n,m}表示n次以上，小于m次
            {3,6}在大于等于3到小于等于6之间的次数
        {}中间不能有空格
5.基础表单验证:
    /^[a-zA-Z0-9_-]{6,16}$/

6.括号总结:
    1.中括号 字符集合，匹配方括号中的任意字符
    如/^[abc]$/ 表示a,b,c都可以即:a||b || c

    2.大括号 量词符，里面表示重复次数,前面没有加其他的括号，则是让最后一个字符重复
    /^abc{3}$/ 只是让c重复三次

    3.小括号 表示优先级 权重最高
        /^(abc){3}$/让()内的重复三次
7.预定义类:
    1.\d 相对于[0-9]
    2.\D 相当于[^0-9]
    3.\w 相当于[A-Z0-9_]
    4.\W 相当于[^A-Z0-9_]
    5.\s 匹配空格(包括换行、制表、空格) 相当与[\t\r\n\v\f]
    6.\S 匹配非空格字符,相当于[^\t\r\n\v\f]是否返回空
8.正则中或者符号: |
9.正则替换:
    字符串.replace(被替换的字符串或者正则表达式，新字符串);
    正则表达式参数:
        /表达式/[swich]
        swich有三种值:
            g:全局匹配
            i:忽略大小写
            gi:全局匹配忽略大小

3.正则表达式实例:

1.简单的验证表单

<style>
       .span {
           color: #ccc;
           font-size: 16px;
       }

       .red {
           color: red;
       }

       .green {
           color: green;
       }
   </style>

html以及js
  <input type="text" class="uname" placeholder="请输入用户名">
  <span>请输入用户名</span>
  <script>
      var reg = /^[a-zA-Z0-9_-]{6,16}$/;
      var input = document.querySelector('input')
      var span = document.querySelector('span')
      input.addEventListener('blur', function () {
          if (reg.test(this.value)) {
              span.className = 'green'
              span.innerHTML = '符合验证规范'
          }
          else {
              span.className = 'red'
              span.innerHTML = '不符合验证规范'
          }
      })
  </script>

2.验证号码:

<script>
        // 座机号码验证: 全国座机号码 两种格式: 010-12345678 或者 0530-1234567
        var reg = /^(\d{3}-\d{8})|(\d{4}-\d{7})$/
        console.log(reg.test('010--12345678'));
        console.log(reg.test('0530-1234567'));
    </script>