最近項目中需要開發一個顏色選擇控件,我做了一個支持選擇也支持手動輸入的顏色選擇控件,支持手動輸入必然要驗證一下是否是正確的顏色格式,一開始
我通過
這種方式去驗證,異常了自然就不是正確的格式嘛,感覺挺好用
后來發現在谷歌瀏覽器行不通,谷歌瀏覽器不會異常,不是正確格式就處理為#FFFFFF
沒辦法,想到了正則表達式,學習了一下
寫了一個,支持#FFFFFF格式或者RGB(255,255,255)格式
測試過程中發現在RGB(255 , 234 , 123 ),這種數字前后有空格的格式依舊可以被瀏覽器所認識,而且谷歌瀏覽器通過
document.getElementById(“xxx”).style.backgroundColor
方法獲取到的值就是有空格的,所以進行了一下升級
附上一個常用正則表達式字符的說明
| 表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 |
最后給大家一個學習文檔吧,我就看的這個東東。。
