iT邦幫忙

7

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

jQuery Source code裏很多正規表示式,如

41: quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,

,

51: rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/,

,

55: rvalidescape = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,
56: rvalidtokens = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,
57: rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g,

,
不過大家在用jQuery時,少用到正規表示式。
從wiki來看,Historically, the concept of regular expressions is associated with Kleene's formalism of regular sets, introduced in the 1950s.
1950年代就介紹了,中文維基,說:

1940年代,Warren McCulloch與Walter Pitts將神經系統中的神經元描述成小而簡單的自動控制元。

,在6歲的jQuery裏 ,有著60歲的靈魂。大約是這種意思。

因為筆者太少用到正規式了,所以總是很好奇,SQL裏,就只是用LIKE來過濾資料

可參考JavaScript 教學 24,http://ithelp.ithome.com.tw/question/10095577,快速上手。
在JS裏,用**/樣式 /,一開始以為少了字串引號,結果//**就像引號的效果,不用再加上,加上反而是另外的意思。上面節錄自源碼,都是這種寫法。

這裏舉一些例子來練習。

算是入門篇,都是擷取自jQuery裏的最簡單範例,方便自己熟悉這些符號。

/^-ms-/.test("ms123");
false         //減號不是保留子
/^-ms-/.test("ab-ms123");
false         //^是一開頭就要匹配
/^-ms-/.test("-ms123");
false         //兩個減號都要 
/^-ms-/.test("-ms-er123");
true          
/^-ms-/.test("-ms-xxer123");
true
/^-ms-/.test("-ms-");
true
/^-ms-/.test("-45ms-");
false         //一開頭要匹配
/-([a-z]|[0-9])/ig.test("-1234");
true          //| 是或者
/-([a-z]|[0-9])/ig.test("-stuv");
true          //[]中括號是有相符即可
/-([a-z]|[0-9])/ig.test("-1234stuv");
true          //數字符號一起出現,也可,因為是或者
/-([a-z]|[0-9])/ig.test("1234stuv");
false          //沒有減號
/-([a-z]|[0-9])/ig.test("1234stuv-");
false            //樣式不符,先減號
/-([a-z]|[0-9])/ig.test("1234-stuv");
true             //減號不必在最左邊,沒有^限定符號
/-([a-z]|[0-9])/ig.test("12-34-stuv");
true             //多次匹配也可
/\S/.test(" ");
false            //\S表示任一字元(可參考https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions)
/\S/.test("a");  
true
/\S/.test("ABC");
true
/\S/.test("\n");
false          //逃脫字元不行
/\S/.test("\t");
false          //逃脫字元不行 
/\S/.test("fghij");
true
/\s/.test("fghij");
false          //小s是大S的相反
/\s/.test("\t");
true          
/\s/.test("\n");
true
/^\s+/.test(" ");
true          //^表一開頭就要出現
/^\s+/.test(" ");
true          //加號表示多個,1 or more times
/^\s+/.test(" ");
true          //3個空白
/^\s+/.test(" ");
true           //4個空白,jQuery是要匹配左邊的不限個數的空白
/^\s+/.test("1 ");
false          //1是一般字元
/^\s+/.test("a ");
false           
/^\s+/.test(" 234 ");
true            //左邊有空白
/^\s+/.test("\n\n ");
true            //左邊有2個逃脫字元
/\s+$/.test(" ");
true            //$號表示結尾,後面(右邊)不能再加字元了
/\s+$/.test(" 123");
false           //用逃脫字元結尾 
/\s+$/.test(" 123 ");
true             
/\s+$/.test("123 ");
true
/\s+$/.test("123 456");
false
/\s+$/.test("123 456 "); 
true                   //可看出,jQuery利用這個樣式得到右邊的不定個數的空白
/\s+$/.test("123 456 \n\n\n");
true                   //可看出,jQuery利用這個樣式得到右邊的不定個數的逃脫字元
/\s+$/.test("123 456bbaa\n\n\n");
true
/\w/.test("aa");
true                   //也是保留字
/\w/.test("__");
true                   //含底線
/\w/.test("_");
true                     
/\w/.test(",");
false                  //不是字,是標點符號的逗點
/\w/.test(".");
false                  //是句號
/\w/.test("@");
false                  //可看出\w裏的字元比\S範圍還小
/\w/.test("WQ");
true          
/\w./.test("WQ");
true
/\w./.test("W");      
false                 //點.是保留字 
/\w./.test("abb");
true                  //理解成一個位置
/\w./.test("a bb");
true                  //
/\w./.test("a\n bb");
true
/\w./.test("a\n bb");
true
/\w./.test("a\\n bb");
true
/\w./.test("abbbb");
true
/\w./.test("\nabbbb");
true
/\w./.test("\tabbbb");
true
/\w./.test("\t");
false
/\w./.test(" ");
false
/\w./.test("a ");
true
/\w./.test("\ta");
false
/\w./.test("\na");
false
/\w./.test("a\t");
true
/\w./.test("a");
false
/\w./.test("\ra");
false             //字元後要再佔一個位置
/[\w.]+/.test("a ");
true             //加上中括號,和上例做比較,
/[\w.]+/.test("b");
true             //符合中括號內,任一個樣式,
/[\w.]+/.test("bbbb");
true             //某一個符合即可
/[\w.]+/.test("__ __");
true
/[\w.]+/.test("\n");
false                 //沒有[A-Za-z0-9_]
/[\w.]+/.test("\n\t");
false                 //[A-Za-z0-9_]
/[\w.]+/.test("\n\t wer ");
true
/\s+/.test(" ");   
true
/\s+/.test("sdfe");  //逃脫字元
false
/^0.55/.test("100"); //jQuery裏的例子,真的,沒蓋你
false
/^0.55/.test("0001");
false
/^0.55/.test("0.45");
false
/^0.55/.test("0.551");
true                 //開頭一開始要完全相符
/^0.55/.test("abcd");
false
/^0.55/.test("0.55abcd");
true                 //不是有效的小數也相符
/^0.55/.test("0.5");
false   
/<h1>.*<\/h1>/.test("<h1>This is a heading.</h1>");
true                      //大於,小於符號不是逃脫字元
/<h1>.*<\/h1>/.test("<h1></h1>");
true
/<h1>.*<\/h1>/.test("<h1>\n\n</h1>");
false                     //點號是任何單字元(matches any single character except the newline character.)
/<h1>.*<\/h1>/.test("<h1>\r\r</h1>");
false                     //*星號表示0或多次 
/<h1>.*<\/h1>/.test("<h1>y</h1>");
true                      //加號表示1或多次,符合這些實務情況
/(tim)/.test("hellotim");
true                      //基本,可看泰哥分享影片
/(tim)/.test("hello tim,what is tim doing");
true
/(tim)/.test("hello ti m,what is tim doing");
true
/(tim)/.test("hello ti m,what is ti m doing");
false
/(tim)/.test("123timefg,what is ti m doing");
true
/(tim)/.test("how many times");
true
/(?:tim)/.test("how many times");
true                         //問號是個讓筆者頭痛的正規式
/(?:tim)/.test("hello ti m,what is ti m doing");
false                        //定義是Matches 'tim' but does not remember the match. These are called non-capturing parentheses.不知邦友做何理解
/(?:abc){3}/.test("aaabbbccc");
false                         //大括號出現了
/(?:abc){3}/.test("abcbbbabc");
false                         //{3}表示只3次
/(?:abc){3}/.test("abcabcabc");
true
/(?:abc){3}/.test("abc abc abc"); //這樣不算3次
false
/(?:abc){3}/.test("abcabcabcabc"); //4包含3
true
/(?:abc){3}/.test("abcabc");    //2不到3
false
/(?:abc){3}/.test("abc");     
false
/(?:abc){3}/.test("xxxabcabcabczzzzzzzzzz");
true
/(?:abc){3}/.test("xxxabc abcabczzzzzzzzzz");
false
/^(?:button|input)$/i.test("my button is not clicked");
false                 //來自jQuery的樣式
/^(?:button|input)$/i.test("This is my button");
false                 //注意開頭結尾符號
/^(?:button|input)$/i.test("button");
true                   
/^(?:button|input)$/i.test("buttoninput");
false                 //管線號是或者
/^(?:button|input)$/i.test("input");
true
/^(?:button|input)$/i.test("Input");
true
/^(?:button|input)$/i.test("INput");
true                  //泰哥有提到的不分大小寫i
/^a(?:rea)?$/i.test("area");
true                  
/^a(?:rea)?$/i.test("Area");
true
/^a(?:rea)?$/i.test("ArEa");
true
/^a(?:rea)?$/i.test("bArEab");
false              //這是jQuery裏的例子,你覺得有必要這樣寫嗎?
/^area$/i.test("bArEab");
false               //筆者細看原樣式還有另一個問號(?)是 0 or 1 time. Equivalent to {0,1}.所以
/^a(?:rea)?$/i.test("a");  //jQuery裏的例子有兩種可能
true

網路上分享,正規式不是寫程式的人才須要會的技能,洪朝貴教授更視為比MS OFFICE更基本的技能,筆者只是覺得jQuery裏用在好多地方,不這樣用,會不會CODE早就超過1萬行,沒法維持這麼小巧。偶爾會有邦友問到資料解析的問題,看到邦上PHP高手WISEGUY,直覺反應的寫出正則式,
這回就下定決心要來用力練習一下。
雖然這和JS沒有多大關係,哈哈!!
很多語言不是原生支持正規式,就是有類別庫支持。正規式並不是JS專有。
中年人就是喜歡老東西,尤其是這老古董竟然比自已年紀還大。出生前就發展的很詳盡了,
真讓人覺得不可思議。


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

1 則留言

0
ted99tw
iT邦高手 1 級 ‧ 2012-07-27 00:43:07

吃follow Tim大,向"那個聰明的傢伙"嚴重看齊~~吃

我要留言

立即登入留言