[JavaScript] 用Regular Express比對出單引號及雙引號

 http://www.blueshop.com.tw/board/FUM20141202112221MW3/BRD20141200000014900.html


Regular Express比對出單引號及雙引號

在程式中,字串通常用單引號(")或雙引號(')來表達,欲使用Regular Express比對出單引號及雙引號,是無法用逸出字元\或非^或直接寫上"'的,必須用字碼來比對。

也就是用\x加上16進位碼的ASCII Code, 或用\u加上unicode4的字碼。 

【範例】

下面的例子說明如何用JavaScript防止輸入【[開頭,]結尾,【任何位置出現[,【任何位置出現],【任何位置出現"雙引號【任何位置出現'單引號

<input id="txt" type="text" onkeyup="value=value.replace(/^\[+|\]+$|[\[\]\x22\x27]+/ig,'');" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/^\[+|\]+$|[\[\]\x22\x27]+/ig,''));" />

<input id="txt" type="text" onkeyup="value=value.replace(/^\[+|\]+$|[\[\]\u0022\u0027]+/ig,'');" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/^\[+|\]+$|[\[\]\u0022\u0027]+/ig,''));" />

【說明】

1. onkeyup按鍵彈起時的事件。在例子中,輸入'"[aaa]"'會立即變成aaa

2. onbeforepaste從剪貼簿貼上前的事件。在例子中,貼上'"[aaa]"'會立即變成aaa

3. /..../ig中間的...是要比對文字用的正則表達式末尾的i表示不區分大小寫末尾的g表示global(這個我也還沒弄懂意思可參見http://help.adobe.com/zh_TW/AS3LCR/Flash_10.0/RegExp.html)

4. ^\[+|\]+$|[\[\]\x22\x27]+: ^若出現在正則表達式的第一個字位置,意思是"...為開頭"

5. ^\[+|\]+$|[\[\]\x22\x27]+: \[表示[這個符號。在正則表達式裡[被視為"集合的開頭",所以想要比對[這個符號時,前面必須加\(逸出字元)

6. ^\[+|\]+$|[\[\]\x22\x27]+: +表示前述字元[出現或多次

7. ^\[+|\]+$|[\[\]\x22\x27]+: |表示或

8. ^\[+|\]+$|[\[\]\x22\x27]+: \]同第5點,表示]這個符號

9. ^\[+|\]+$|[\[\]\x22\x27]+: +同第6點,表示]這個符號出現或多次

10. ^\[+|\]+$|[\[\]\x22\x27]+: $表示以前述字元]做結尾

11. ^\[+|\]+$|[\[\]\x22\x27]+: |表示或

12. ^\[+|\]+$|[\[\]\x22\x27]+: [...]表示字元集合,意思是"在這個方括號裡的任何一個字元"

13. ^\[+|\]+$|[\[\]\x22\x27]+: \[同第5點,表示[這個符號

14. ^\[+|\]+$|[\[\]\x22\x27]+: \]同第5點,表示]這個符號

15. ^\[+|\]+$|[\[\]\x22\x27]+: \x(小寫)表示用接下來的ASCII 16位元字碼來表示一個字元

16. ^\[+|\]+$|[\[\]\x22\x27]+22是半形雙引號的ASCII 16位元字碼

17. ^\[+|\]+$|[\[\]\x22\x27]+: \x22是半形雙引號

18. ^\[+|\]+$|[\[\]\x22\x27]+: \x27是半形單引號

19. ^\[+|\]+$|[\[\]\x22\x27]+: +同第6點,表示[...]裡的任一字元([,],",')出現或多次

20. ^\[+|\]+$|[\[\]\u0022\u0027]+: \u(小寫)表示用接下來的unicode字碼來表示一個字元

21. ^\[+|\]+$|[\[\]\u0022\u0027]+: 0022是半形雙引號的unicode字碼

22. ^\[+|\]+$|[\[\]\u0022\u0027]+: 0027是半形單引號的unicode字碼

23. ^\[+|\]+$|[\[\]\u0022\u0027]+: \u0022是半形雙引號

24. ^\[+|\]+$|[\[\]\u0022\u0027]+: \u0027是半形雙引號

 

進一步說明字碼的用法:

(text).replace(/^\[+|\]+$|[\[\]\x22\x27]+/ig,'')

 1. "\X 以十六進位字元碼代表某個字元例如 [\x21-\x7E] 可代表所有看得到的字元 ([\x20-\x7E] 則包括空白字元)"

2. "\xn 匹配n,其中n為十六進制轉義值。十六進制轉義值必須為確定的兩個數字長。例如,「\x41」匹配「A」。「\x041」則等價於「\x04&1」。正則表達式中可以使用ASCII編碼。"

        ASCII字符代碼:

                半形雙引號: 22

                半形單引號: 27

 

 (text).replace(/^\[+|\]+$|[\[\]\u0022\u0027]+/ig,'') 

        "\un 匹配n,其中n是一個用四個十六進制數字表示的Unicode字符。例如,\u00A9匹配版權符號(©)。"

        Unicode字符代碼:

                半形雙引號: 0022

                半形單引號: 0027

 

Regular Expression延伸JavaScriptTrim()

        JavaScript的字串函式裡沒有Trim自己做一個吧 

function Trim(asStringToTrim)

{

    return asStringToTrim.replace(/^\s+|\s+$/g,"");

} 

        用法

                var mystring = Trim(' a aa '); 

        結果

                'a aa'

 【演進】

寫成function才是省code王道 

HTML

      <input id="txt1" type="text" onkeyup="InputValidate(this);" onbeforepaste="PastValidate();" />

      <input id="txt2" type="text" onkeyup="InputValidate(this);" onbeforepaste="PastValidate();" />

 JavaScript

    <script type="text/javascript">

    <!--

    // <!CDATA[

        //檢查含有[]"'RegularExpression

                //注意: Regular Expression不能寫成字串("/..../ig")

        var oRexp = /^\[+|\]+$|[\[\]\x22\x27]+/ig;

       

        //禁止輸入[]"'

        function InputValidate(obj)

        {

            obj.value = obj.value.replace(oRexp,'');

        }

       

        //禁止貼上[]"'

        function PastValidate()

        {

            clipboardData.setData('text',clipboardData.getData('text').replace(oRexp,''));

        }

    // ]]>

    // -->

    </script>

    <noscript>

        您的瀏覽器不支援Script或是把該功能關閉了!這裡是替代文字。

    </noscript>

  

【工具】

        有許多工具能幫助我們編寫Regular Expression

        可以參考http://blog.roodo.com/emisjerry/archives/3010673.html

       

        Visual Studio拉一個RegularExpressionValidator控制項到form在屬性編輯器按下ValidationExpression這一項旁的"..."按鈕有常用的幾個Regular Expression可以直接使用或是研究一下Regular Expression語法做修改。

       

 

 

【參考】

         正則表達式(Regular Expression)

        http://zh.wikipedia.org/zh-hant/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F

        

        /g/i等選項說明

        http://help.adobe.com/zh_TW/AS3LCR/Flash_10.0/RegExp.html

 

         unicode字符列表

     http://zh.wikipedia.org/wiki/Unicode%E5%AD%97%E7%AC%A6%E5%88%97%E8%A1%A8

 

         ASCII字符列表

        http://zh.wikipedia.org/wiki/ASCII

 

         JavaScript + Regular Expression

     http://faq.csdn.net/read/217127.html

  

        .NET + Regular Expression

     http://blog.darkthread.net/blogs/darkthreadtw/archive/2007/06/30/introduction-to-net-regular-expression.aspx

        

        MySQL + Regular Expression

     http://essoduke.org/2008/07/14/602

        

        《一輩子受用的 Regular Expressions -- 兼談另類的電腦學習態度》

        http://www.cyut.edu.tw/~ckhung/b/gnu/regexp.php

 











留言

這個網誌中的熱門文章

[Angular] 閒置登出作法

[Angular Materail] 檔案上傳範例

[Angular Material] 搜尋式下拉選單範例