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

 

 

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

我通过

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