iT邦幫忙

5

javascript的範例學習:以jQuery為例(五)

  • 分享至 

  • xImage
  •  

JS有其方便性,在CHROME 瀏覽器是直接內建,而firefox也只有裝個外掛就可以有consloe的指令列環境。如果不是很挑,覺得是目前為止,幾乎是免安裝的綠色軟體。不必為了JS特別裝一些整合的編輯環境。

不少網友使用jsfiddle這個易用的雲端環境,除了方便測試,和別人分享CODE特別容易。
JS是得天獨厚的語言。

本篇繼續練習正規式。
筆者試了不少次,一直沒法精準的把jQuery裏的所有正規式出現的行數,擷取出來,總是會擷取到註解的行。雖然不到一萬行的CODE,把空白去掉,把註解去掉,可能不到7千行(這也是正規式很好的練習題,而且好像也是將JS減肥的前置作業),而且正規式顯然和很多語言一樣,也有國際組織在訂ISO規範,可見也是有跨平台,跨語言的相容性標準的需求。

像這種有半世紀以上歲數的語言,顯然也是一個生態圈,或是有一些故事可講,大半出現在WIKI百科裏面,其豐富的內含,筆者覺得不下於SQL, 甚至還遠遠的超越,只是SQL可能較易入門,而正規式較難入門,且入門後,精進也困難,而且用的符號比較多,一段時間沒用,又忘了。

其實jQuery的正規式使用,還是在短字段的使用,對HTML標籤,CSS選擇器的正確識別,
但是因為筆者對一些著名源碼庫涉獵的不多,所以看到正規式被大量應用,還是很感興趣。
大概ERP相關工作,又無關HR人資出勤系統,不用到正規式,工作還是應付的去。
總是會覺得在程式領域中缺了一些基礎的了解。

扯遠了,回到練習。

/\D/g.test("1234");  //非0~9的字元,等同於[^0-9]
false
/\D/g.test("abcd");  //文字不是數字
true
/\D/g.test("\n\t\r"); //脫逃字也不是數字
true
/\D/g.test("1234\n\t\r");//同上
true
/(?:\{.*\})/.test("{}"); //大括號{是正規式的保留符號,要匹配大括號{,要加上\
true
/(?:\{.*\})/.test("{ab}");//點心.*表示0到多個字元,點心.*蠻常出現的
true
/(?:\{.*\})/.test("{abcd+1234}");//同上
true
/(?:\{.*\})/.test("{abcd+1234"); //
false
/(?:\{.*\})/.test("{{abcd+1234}");//沒規定出現的次數
true
/(?:\{.*\})/.test("{{{abcd+1234}");
true
/(?:\{.*\})/.test("efgh{{{abcd+1234}");//沒規定開頭就要放
true
/(?:\{.*\})/.test("[abcd+1234}");
false
/(?:\{.*\})/.test("{abcd+1234]");
false
/(?:\{.*\})/.test("{abcd+1234}}");
true
/(?:\{.*\})/.test("{}}");
true
/^(?:\{.*\}|\[.*\])$/.test("12{34}");//稍長的綜合練習,一般看到會難以理解
false
/^(?:\{.*\}|\[.*\])$/.test("{34}");//|是或者的意思,所以可拆成兩部分
true
/^(?:\{.*\}|\[.*\])$/.test("{34}st");//一部分是{.*\},另一部分是\[.*\]
false
/^(?:\{.*\}|\[.*\])$/.test("{34]");//大括號對大括號
false
/^(?:\{.*\}|\[.*\])$/.test("[34]");//
true
/^(?:\{.*\}|\[.*\])$/.test("(34)");//沒規範小括號
false
/^(?:\{.*\}|\[.*\])$/.test("( 34 + 78 - a +n)");
false
/^(?:\{.*\}|\[.*\])$/.test("{ 34 + 78 - a +n}");//要接頭,接尾,頭尾要緊鄰
true
/^(?:\{.*\}|\[.*\])$/.test("{ 34 + 78 - a +n} ");
false
/([A-Z])/g.test("fgh");//只能大寫字母,就像字面上的樣式
false
/([A-Z])/g.test("A");//小括號是capturing parentheses的意思,中文不好翻譯
true
/([A-Z])/g.test("ABCD EFG HIJ");//中括號是有比對到即可
true
/([A-Z])/g.test("()");//小括號()不是拿來比對的樣式。
false
/^key/.test(" key"); //基本樣式簡單型
false
/^key/.test("keyboard A");
true
/^key/.test("KEYboard A");
false
/^key/.test("key value");
true
/\bn\w/.test("noonday");//\b是Matches a word boundary,英文的一個字
true
/\bn\w/.test("n");//n不是一個詞,是一個字母
false
/\bn\w/.test("no");
true
/\bn\w/.test("on");//不是n開頭的單字
false
/\bn\w/.test("now");//是n開頭的單字
true
/\bn\w/.test("go ahead now");//
true
/\bn\w/.test("go ahead ");//沒有n開頭的單字
false
/\bn\w/.test("go ahead one min");
false
/\bn\w/.test("next");
true
/\bn\w/.test("I am a nurse");
true
/\bn\w/.test("nurse\n");\\ \w是[A-Za-z0-9_]的意思
true
/\bn\w/.test("n\n\r");
false
/(?:\.(.+))/.test(".(.");\\這個例子比較特例,\. 是指點號.拿來比對
true
/(?:\.(.+))/.test(".((");\\ (.+)要一起看,要有某字元1個以上
true
/(?:\.(.+))/.test(".(((");
true
/(?:\.(.+))/.test(".((()");\\
true
/(?:\.(.+))/.test(".");\\後面一定要接1個以上的字元,沒接不行
false
/(?:\.(.+))/.test(".(");
true
/(?:\.(.+))/.test(".123(");
true
/(?:\.(.+))/.test(".123(456");
true
/(?:\.(.+)/.test(".123(456");這是之前不知道(.+)要視為一體
SyntaxError: Invalid regular expression: /(?:\.(.+)/: Unterminated group

有了這兩次的練習
看到這樣的句子還是很頭大,

51:	rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/,
55:	rvalidescape = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,

直接投降了,筆者想到,就是信用卡號,身分証號,電話號碼,出身年月日,EMAIL,IP網址這些常用樣式,已經由前人種樹,貢獻出範例,所以jQuery幾乎不對正則式做註解,
而確保jQuery高品質的單元測試專案裏,也很少對這些樣式是否正確,做一些測試案例,
表示這些樣式已經很成熟了,不知道jQuery作者是從何截取的,莫非是功力太深厚了。


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
ted99tw
iT邦高手 1 級 ‧ 2012-07-29 07:21:12

頭號粉絲報到~~臉紅

Tim大的練習題,一字排開,真適合咱這些凡事希望“一目了然”的老頭子們~~

所以....不僅給您按讚,這圖中一排MM,隨便Tim大要“練習”那一位....

0
timloo
iT邦研究生 2 級 ‧ 2012-07-30 00:00:57

這個利害,謝謝,

覺得,純粹是混混版面,及一段時間後,再回來看時,容易看懂

ted99tw iT邦高手 1 級 ‧ 2012-07-30 00:04:56 檢舉

timloo提到:
及一段時間後,再回來看時,容易看懂

所以...Tim大您的帖絕對是不能刪的啦~~~XD

我要留言

立即登入留言