一、字符类别与集合

字符类别

好处：有效的使用字符类别可以使正则表达式更加简洁，便于阅读。

举例1：大写字母、小写字母和数字可以使用“\w”直接表示。

案例2：若要匹配0到9之间的数字可以使用“\d”表示。

下面为了方便读者理解字符类别的使用，以“.”和“\s”为例进行演示.

正则对象reg用于匹配空白符后的任意两个字符（除换行外）。
因此在控制台查看到的结果中，id前有一个空格。

字符集合

字符集合的表示方式：“[]”可以实现一个字符集合。

字符范围：与连字符“-”一起使用时，表示匹配指定范围内的字符。

反义字符：元字符“^”与“[]”一起使用时，称为反义字符。

不在某范围内： “^”与“[]”一起使用，表示匹配不在指定字符范围内的字符。

以字符串 'get好TB6'.match(/pattern/g) 为例演示其常见的用法。

注意

字符“-”在通常情况下只表示一个普通字符，只有在表示字符范围时才

作为元字符来使用。“-”连字符表示的范围遵循字符编码的顺序，如“a-Z”、“z-a”、“a-9”都是不合法的范围。

【案例】限定输入内容

代码实现思路：

编写HTML，设置一个年（份）和月（份）的文本框，以及一个查询按钮。

获取操作的元素对象，对表单的提交进行验证。

验证年份，正则：/^\d{4}$/。验证月份，正则： /^((0?[1-9])|(1[012]))$/ 。

文本框获取焦点，去除提示框的颜色。文本框失去焦点，去除输入内容的两端的空白，并进行验证。

代码实现

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>限定输入内容</title>
    <style>
    input[type=text]{width: 40px;border-color: #bbb;height: 25px;font-size: 14px;border-radius: 2px;outline: 0;border: #ccc 1px solid;padding: 0 10px;-webkit-transition: box-shadow .5s;margin-bottom: 15px;}
    input[type=text]:hover, input[type=text]:focus,input[type=submit]:hover{border: 1px solid #56b4ef; box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6); -webkit-transition: box-shadow .5s;}
    input::-webkit-input-placeholder {color: #999; -webkit-transition: color .5s;}
    input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder {color: #c2c2c2; -webkit-transition: color .5s;}
    input[type=submit]{height: 30px; width: 80px; background: #4393C9; border:1px solid #fff;color: #fff;font:14px bolder; }
    </style>
    </head>
    <body>
    <form id="form">
    年份 <input type="text" name="year">
    月份 <input type="text" name="month">
    <input type="submit" value="查询">
    </form>
    <div id="result"></div>
    <script>
    function checkYear(obj) {
    if (!obj.value.match(/^\d{4}$/)) {
    obj.style.borderColor = 'red';
    result.innerHTML = '输入错误，年份为4位数字表示';
    return false;
    }
    result.innerHTML = '';
    return true;
    }
    function checkMonth(obj) {
    if (!obj.value.match(/^((0?[1-9])|(1[012]))$/)) {
    obj.style.borderColor = 'red';
    result.innerHTML = '输入错误，月份为1~12之间';
    return false;
    }
    result.innerHTML = '';
    return true;
    }
    var form = document.getElementById('form'); // <form>元素对象
    var result = document.getElementById('result'); // <div>元素对象
    var inputs = document.getElementsByTagName('input'); // <input>元素集合
    form.onsubmit = function() {
    return checkYear(inputs.year) && checkMonth(inputs.month);
    };
    inputs.year.onfocus = function() {
    this.style.borderColor = '';
    };
    inputs.month.onfocus = function() {
    this.style.borderColor = '';
    };
    if (!String.prototype.trim) {
    String.prototype.trim = function() {
    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
    // \uFEFF字节顺序标记；\xA0不换行空白
    };
    }
    inputs.year.onblur = function() {
    this.value = this.value.trim();
    checkYear(this);
    };
    inputs.month.onblur = function() {
    this.value = this.value.trim();
    checkMonth(this);
    };
    </script>
    </body>
    </html>