[JavaScript] 用Regular Express比對出單引號及雙引號
http://www.blueshop.com.tw/board/FUM20141202112221MW3/BRD20141200000014900.html
【用Regular Express比對出單引號及雙引號】
在程式中,字串通常用單引號(")或雙引號(')來表達,欲使用Regular Express比對出單引號及雙引號,是無法用逸出字元\或非^或直接寫上"或'的,必須用字碼來比對。
也就是用\x加上16進位碼的ASCII Code, 或用\u加上unicode
【範例】
下面的例子說明如何用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字符。例如,\u
Unicode字符代碼:
半形雙引號: 0022
半形單引號: 0027
【Regular Expression延伸:JavaScript的Trim()】
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();" />
<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》
《MySQL + Regular Expression》
http://essoduke.org/2008/07/14/602
《一輩子受用的 Regular Expressions -- 兼談另類的電腦學習態度》
http://www.cyut.edu.tw/~ckhung/b/gnu/regexp.php
留言
張貼留言