js正则表达式入门

时间:2023-03-09 00:48:00
js正则表达式入门
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title> javascript 正则表达式 </title>
  5. <meta name="Generator" content="EditPlus">
  6. <meta name="Author" content="">
  7. <meta name="Keywords" content="">
  8. <meta name="Description" content="">
  9. <script type="text/javascript">
  10. //javascript正则表达式的基本知识
  11. //声明javascript 正则表达式
  12. var reCat = new RegExp("cat");
  13. //你也可以
  14. var reCat = /cat/;      //Perl 风格   (推荐)
  15. //学习最常用的 test exec match search  replace  split 6个方法
  16. //1) test  检查指定的字符串是否存在
  17. var data = "123123";
  18. var reCat = /123/gi;
  19. alert(reCat.test(data));  //true
  20. //检查字符是否存在  g 继续往下走  i 不区分大小写
  21. //2) exec 返回查询值
  22. var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
  23. var reCat = /cat/i;
  24. alert(reCat.exec(data));  //Cat
  25. //3)match  得到查询数组
  26. var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
  27. var reCat = /cat/gi;
  28. var arrMactches = data.match(reCat)
  29. for (var i=0;i < arrMactches.length ; i++)
  30. {
  31. alert(arrMactches[i]);   //Cat  cat
  32. }
  33. //4) search  返回搜索位置  类似于indexof
  34. var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
  35. var reCat = /cat/gi;
  36. alert(data.search(reCat));  //23
  37. //5) replace  替换字符  利用正则替换
  38. var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
  39. var reCat = /cat/gi;
  40. alert(data.replace(reCat,"libinqq"));
  41. //6)split   利用正则分割数组
  42. var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
  43. var reCat = /\,/;
  44. var arrdata = data.split(reCat);
  45. for (var i = 0; i < arrdata.length; i++)
  46. {
  47. alert(arrdata[i]);
  48. }
  49. //学习下  简单类   负向类  范围类  组合类
  50. //简单类
  51. var data = "1libinqq,2libinqq,3libinqq,4libinqq";
  52. var reCat = /[123]libinqq/gi;
  53. var arrdata = data.match(reCat);
  54. for (var i = 0; i < arrdata.length; i++)
  55. {
  56. alert(arrdata[i]);  // 1libinqq 2libinqq  3libinqq
  57. }
  58. //负向类
  59. var data = "alibinqq,1libinqq,2libinqq,3libinqq,4libinqq";  //\u0062cf
  60. var reCat = /[^a123]libinqq/gi;
  61. var arrdata = data.match(reCat);
  62. for (var i = 0; i < arrdata.length; i++)
  63. {
  64. alert(arrdata[i]);  //4libinqq
  65. }
  66. //范围类
  67. var data = "libinqq1,libinqq2,libinqq3,libinqq4,libinqq5";  //\u0062cf
  68. var reCat = /libinqq[2-3]/gi;
  69. var arrdata = data.match(reCat);
  70. for (var i = 0; i < arrdata.length; i++)
  71. {
  72. alert(arrdata[i]);   // libinqq2  libinqq3
  73. }
  74. //组合类
  75. var data = "a,b,c,w,1,2,3,5";  //\u0062cf
  76. var reCat = /[a-q1-4\n]/gi;
  77. var arrdata = data.match(reCat);
  78. for (var i = 0; i < arrdata.length; i++)
  79. {
  80. alert(arrdata[i]);  // a b c 1 2 3
  81. }
  82. //以上为 js正则 最基本的使用方法
  83. </script>
  84. </head>
  85. <body>
  86. <!-- javascript正则表达式 进阶篇  -->
  87. <!-- javascript  正则表达式是分组知识  -->
  88. <script language="JavaScript">
  89. /*正则表达式  简单的分组
  90. 举例 我们要查找字符串 MouseMouse
  91. var reCat = /MouseMouse/gi;
  92. 尽管这是可以的,但是有点浪费。如果不知道Mouse 在字符串中到底出现几次时该怎么办,如果重复多次呢。
  93. var reCat = /(mouse){2}/gi;    括号的意思列Mouse 将在一行连续出现2次。
  94. */
  95. var data = "Ah-mousemouse";
  96. var reCat = /(mouse){2}/gi;
  97. var arrdata = data.match(reCat);
  98. for (var i = 0; i < arrdata.length; i++)
  99. {
  100. alert(arrdata[i]);
  101. }
  102. </script>
  103. <script language="JavaScript">
  104. /*正则表达式  复杂的分组
  105. ?   零次 或 一次
  106. *   零次 或 多次
  107. +   最少一次 或 多次
  108. */
  109. var data = "bb ba da bad dad aa ";
  110. var reCat = /([bd]ad?)/gi;   // 匹配出 ba da bad  dad
  111. var arrdata = data.match(reCat);
  112. for (var i = 0; i < arrdata.length; i++)
  113. {
  114. alert(arrdata[i]);
  115. }
  116. // 同时 也不介意将分组放在分组中间
  117. // var re = /(mom( and dad)?)/;    匹配出 mom  或  mon and daa
  118. </script>
  119. <script language="JavaScript">
  120. /*正则表达式  反向引用*/
  121. var sToMatch = "#123456789";
  122. var reNumbers = /#(\d+)/;
  123. reNumbers.test(sToMatch);
  124. alert(RegExp.$1);
  125. /*
  126. 这个例子尝试匹配后面跟着几个或多个数字的镑符合,并对数字进行分组
  127. 以存储他们。在调用 test 方法后,所有的反向引用都保存到了 RegExp 构造函数中
  128. 从 RegExp.$1(它保存了第一个反向引用)开始,如果还有第二个反向引用,就是
  129. RegExp.$2,如果还有第三个反向引用存在,就是 RegExp.$3.依此类推。因为该组
  130. 匹配了 “123456780”,所以 RegExp.$1 中就存储了这个字符串。
  131. */
  132. var sToChange = "1234 5678";
  133. var reMatch = /(\d{4}) (\d{4})/;
  134. var sNew = sToChange.replace(reMatch,"$2 $1");
  135. alert(sNew);
  136. /*
  137. 在这个例子中,正则表达式有两个分组,每一个分组有四个数字。在 replace() 方法的第二个参数
  138. 中,$2 等同于 “5678” ,而 $1 等同于 “1234”,对应于它们在表达式中的出现顺序。
  139. */
  140. </script>
  141. <script language="JavaScript">
  142. /*正则表达式  候选 */
  143. var sToMatch1 = "red";
  144. var sToMatch2 = "black";
  145. var reRed = /red/;
  146. var reBlack = /black/;
  147. alert(reRed.test(sToMatch1) || reBlack.test(sToMatch1));
  148. alert(reRed.test(sToMatch2) || reBlack.test(sToMatch2));
  149. /*
  150. 这虽然能完成任务,但是十分沉长,还有另一种方式就是正则表达式的候选操作符。
  151. */
  152. var sToMatch1 = "red";
  153. var sToMatch2 = "black";
  154. var reRedOrBlack = /(red|black)/;
  155. alert(reRedOrBlack.test(sToMatch1));
  156. alert(reRedOrBlack.test(sToMatch2));
  157. </script>
  158. <script language="JavaScript">
  159. /*正则表达式  非捕获性分组
  160. 如果要创建一个非捕获性分组,只要在左括号的后面加上一个问号和一个紧跟的冒号:
  161. */
  162. var sToMatch = "#123456789";
  163. var reNumbers = /#(?:\d+)/;
  164. reNumbers.test(sToMatch);
  165. alert(RegExp.$1);
  166. /*
  167. 这个例子的最后一行代码输出一个空字符串,因为该组是非捕获性的,
  168. */
  169. var sToMatch = "#123456789";
  170. var reNumbers = /#(?:\d+)/;
  171. alert(sToMatch.replace(reNumbers,"abcd$1"));
  172. /*
  173. 正因如此,replace()方法就不能通过 RegExp.$x 变量来使用任何反向引用,这段代码
  174. 输出的“abcd$1”而不是abcd123456789, 因为$1 在这里并不被看成是一个反向引用。
  175. */
  176. </script>
  177. <script language="JavaScript">
  178. /*正则表达式  前瞻
  179. 前瞻 就和它名字一样,它告诉正则表达式运算器向前看一些字符而不是移动位置
  180. */
  181. var sToMatch1 = "bedroom";
  182. var sToMatch2 = "bedding";
  183. var reBed = /bed(?=room)/;
  184. alert(reBed.test(sToMatch1));  //true
  185. alert(reBed.test(sToMatch2));  //false
  186. //负向前瞻
  187. var sToMatch1 = "bedroom";
  188. var sToMatch2 = "bedding";
  189. var reBed = /bed(?!room)/;
  190. alert(reBed.test(sToMatch1)); //false
  191. alert(reBed.test(sToMatch2)); //true
  192. </script>
  193. <script language="JavaScript">
  194. /*正则表达式  边界
  195. ^     行开头
  196. $     行结尾
  197. \b    单词的边界
  198. \B    非单词的边界
  199. */
  200. var sToMatch = "Important word is the last one.";
  201. var reLastWord = /(\w+)\.$/;
  202. reLastWord.test(sToMatch);
  203. alert(RegExp.$1);  //one
  204. /*
  205. 假如想查找一个单词,但要它只出现在行尾,则可以使用美元符号 ($)来表示它:
  206. */
  207. var sToMatch = "Important word is the last one.";
  208. var reLastWord = /^(\w+)/;
  209. reLastWord.test(sToMatch);
  210. alert(RegExp.$1);  //Important
  211. /*
  212. 在这个例子中,正则表达式查找行起始位置后的一个或多个单词字符。如果遇到非单词字符
  213. 匹配停止,返回 Important。 这个例子也可以用单词边界实现。
  214. */
  215. var sToMatch = "Important word is the last one.";
  216. var reLastWord = /^(.+?)\b/;
  217. reLastWord.test(sToMatch);
  218. alert(RegExp.$1);  //Important
  219. /*
  220. 这里,正则表达式用惰性量词来制定在单词边界之前可以出现任何字符,且可以出现一次或
  221. 多次(如果使用贪婪性量词,表达式就匹配整个字符串)。
  222. */
  223. var data = " First second thind fourth fifth sixth ";
  224. var reCat = /\b(\S+?)\b/g;
  225. var arrdata = data.match(reCat);
  226. for (var i = 0; i < arrdata.length; i++)
  227. {
  228. alert(arrdata[i]);
  229. }
  230. /*
  231. 使用单词边界可以方便地从字符串中抽取单词。
  232. */
  233. </script>
  234. <script language="JavaScript">
  235. /*正则表达式  多行模式
  236. 要制定多行模式,只要在正则表达式想要匹配的行末的一个单词
  237. */
  238. var data = " First second\n thind fourth\n fifth sixth";
  239. var reCat = /(\w+)$/g;
  240. var arrdata = data.match(reCat);
  241. for (var i = 0; i < arrdata.length; i++)
  242. {
  243. alert(arrdata[i]);
  244. }
  245. /*
  246. 上面只返回一个单词 sixth,因为换行符阻挡了匹配,只能匹配行末的一个单词,
  247. 当然也可以使用 split() 方法将字符串分割成数组,但就得对每一行进行单独匹配。
  248. 以前不好好看书经常半吊子,看一半就仍了,导致用了好多 split, 其实很简单如下面
  249. 例子 只需要 m 参数进行多行匹配。
  250. */
  251. var data = " First second\n thind fourth\n fifth sixth";
  252. var reCat = /(\w+)$/gm;
  253. var arrdata = data.match(reCat);
  254. for (var i = 0; i < arrdata.length; i++)
  255. {
  256. alert(arrdata[i]);
  257. }
  258. </script>
  259. </body>
  260. </html>