正則表達式學習(驗證輸入是否顏色值)


 

 

最近項目中需要開發一個顏色選擇控件,我做了一個支持選擇也支持手動輸入的顏色選擇控件,支持手動輸入必然要驗證一下是否是正確的顏色格式,一開始

我通過

這種方式去驗證,異常了自然就不是正確的格式嘛,感覺挺好用

后來發現在谷歌瀏覽器行不通,谷歌瀏覽器不會異常,不是正確格式就處理為#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

 

最后給大家一個學習文檔吧,我就看的這個東東。。

 

正則表達式30分鍾入門教程doc

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM