正则表达式学习（验证输入是否颜色值）

 

 

最近项目中需要开发一个颜色选择控件，我做了一个支持选择也支持手动输入的颜色选择控件，支持手动输入必然要验证一下是否是正确的颜色格式，一开始

我通过

try {                document.getElementById('ColorChooseControlText').style.backgroundColor = document.getElementById('ColorChooseControlText').value;                args.IsValid = true;            } catch (err) {                args.IsValid = false;            }

这种方式去验证，异常了自然就不是正确的格式嘛，感觉挺好用

后来发现在谷歌浏览器行不通，谷歌浏览器不会异常，不是正确格式就处理为#FFFFFF

没办法，想到了正则表达式，学习了一下

写了一个，支持#FFFFFF格式或者RGB（255,255,255）格式

function CheckIsColor(colorValue) {    var type = "^#[0-9a-fA-F]{6}{1}$" ;    var re = new RegExp(type);    if (colorValue.match(re) == null) {        type = "^[rR][gG][Bb][\(]((2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),){2}(2[0-4]\\d|25[0-5]|[01]?\\d\\d?)[\)]{1}$";        re = new RegExp(type);        if (colorValue.match(re) == null) {            alert("no");        } else {            alert("yes");        }    } else {        alert("yes");    }}

 测试过程中发现在RGB（255 ， 234 ， 123 )，这种数字前后有空格的格式依旧可以被浏览器所认识，而且谷歌浏览器通过

document.getElementById(“xxx”).style.backgroundColor

方法获取到的值就是有空格的，所以进行了一下升级

function CheckIsColor(colorValue) {    var type = "^#[0-9a-fA-F]{6}{1}$";    var re = new RegExp(type);    if (colorValue.match(re) == null) {        type = "^[rR][gG][Bb][\(]([\\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?)[\\s]*,){2}[\\s]*(2[0-4]\\d|25[0-5]|[01]?\\d\\d?)[\\s]*[\)]{1}$";        re = new RegExp(type);        if (colorValue.match(re) == null) {            return false;        } else {            return true;        }    } else {        return true;    }}

 

附上一个常用正则表达式字符的说明

表1.常用的元字符

代码

说明

.

匹配除换行符以外的任意字符

\w

匹配字母或数字或下划线或汉字

\s

匹配任意的空白符

\d

匹配数字

\b

匹配单词的开始或结束

^

匹配字符串的开始

$

匹配字符串的结束

 

表2.常用的限定符

代码/语法

说明

*

重复零次或更多次

+

重复一次或更多次

?

重复零次或一次

{n}

重复n次

{n,}

重复n次或更多次

{n,m}

重复n到m次

 

表3.常用的反义代码

代码/语法

说明

\W

匹配任意不是字母，数字，下划线，汉字的字符

\S

匹配任意不是空白符的字符

\D

匹配任意非数字的字符

\B

匹配不是单词开头或结束的位置

[^x]

匹配除了x以外的任意字符

[^aeiou]

匹配除了aeiou这几个字母以外的任意字符

 

表4.分组语法

捕获

(exp)

匹配exp,并捕获文本到自动命名的组里

(?<name>exp)

匹配exp,并捕获文本到名称为name的组里，也可以写成(?'name'exp)

(?:exp)

匹配exp,不捕获匹配的文本，也不给此分组分配组号

零宽断言

(?=exp)

匹配exp前面的位置

(?<=exp)

匹配exp后面的位置

(?!exp)

匹配后面跟的不是exp的位置

(?<!exp)

匹配前面不是exp的位置

注释

(?#comment)

这种类型的组不对正则表达式的处理产生任何影响，用于提供注释让人阅读

 

表5.懒惰限定符

*?

重复任意次，但尽可能少重复

+?

重复1次或更多次，但尽可能少重复

??

重复0次或1次，但尽可能少重复

{n,m}?

重复n到m次，但尽可能少重复

{n,}?

重复n次以上，但尽可能少重复

 

表6.常用的处理选项

名称

说明

IgnoreCase(忽略大小写)

匹配时不区分大小写。

Multiline(多行模式)

更改^和$的含义，使它们分别在任意一行的行首和行尾匹配，而不仅仅在整个字符串的开头和结尾匹配。(在此模式下,$的精确含意是:匹配\n之前的位置以及字符串结束前的位置.)

Singleline(单行模式)

更改.的含义，使它与每一个字符匹配（包括换行符\n）。

IgnorePatternWhitespace(忽略空白)

忽略表达式中的非转义空白并启用由#标记的注释。

RightToLeft(从右向左查找)

匹配从右向左而不是从左向右进行。

ExplicitCapture(显式捕获)

仅捕获已被显式命名的组。

ECMAScript(JavaScript兼容模式)

使表达式的行为与它在JavaScript里的行为一致。

 

表7.尚未详细讨论的语法

\a

报警字符(打印它的效果是电脑嘀一声)

\b

通常是单词分界位置，但如果在字符类里使用代表退格

\t

制表符，Tab

\r

回车

\v

竖向制表符

\f

换页符

\n

换行符

\e

Escape

\0nn

ASCII代码中八进制代码为nn的字符

\xnn

ASCII代码中十六进制代码为nn的字符

\unnnn

Unicode代码中十六进制代码为nnnn的字符

\cN

ASCII控制字符。比如\cC代表Ctrl+C

\A

字符串开头(类似^，但不受处理多行选项的影响)

\Z

字符串结尾或行尾(不受处理多行选项的影响)

\z

字符串结尾(类似$，但不受处理多行选项的影响)

\G

当前搜索的开头

\p{name}

Unicode中命名为name的字符类，例如\p{IsGreek}

(?>exp)

贪婪子表达式

(?<x>-<y>exp)

平衡组

(?im-nsx:exp)

在子表达式exp中改变处理选项

(?im-nsx)

为表达式后面的部分改变处理选项

(?(exp)yes|no)

把exp当作零宽正向先行断言，如果在这个位置能匹配，使用yes作为此组的表达式；否则使用no

(?(exp)yes)

同上，只是使用空表达式作为no

(?(name)yes|no)

如果命名为name的组捕获到了内容，使用yes作为表达式；否则使用no

(?(name)yes)

同上，只是使用空表达式作为no

 

最后给大家一个学习文档吧，我就看的这个东东。。

 

正则表达式30分钟入门教程doc