JavaScript之正则表达式

JavaScript之正则表达式

search()方法&replace()

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>JavaScript 正则表达式啊</title>
 6     </head>
 7     <body>
 8         <p style="font-size: large; color: crimson;">JavaScript 正则表达式</p>
 9         <p>
10             正则表达式（regular expression，代码中常简写为regex，regexp或RE）
11             搜索模式可用于文本搜索和替换
12         </p>
13         <p style="font-size: medium; color: crimson;">什么是正则表达式</p>
14         <p>
15             表达式是有由一个字符形成的搜索序列<br>
16             当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。<br>
17             正则表达式可以是一个简单的字符，或一个更复杂的模式。<br>
18             正则表达式可用于所有文本搜索和文本替换的操作。<br>
19         </p>
20         <p>
21             语法：
22             /正则表达式主体/修饰符（可选）
23             Eg：
24             var patt = /runoob/i
25             解析：
26             /runoob/i 是一个正则表达式
27             runoob 是一个正则表达式主体 用于检索
28             i是一个修饰符，搜索不区分大小写   
29         </p>
30         <p style="font-size: medium; color: crimson;">
31             使用字符串方法
32         </p>
33         <p>
34             javascript中，正则表达式通常用两个方法：search()和replace()
35             search()方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回字串的起始位置。
36             replace()方法用于在字符串中用一些字串替换另一些字符串，或替换一个匹配到的字串。
37         </p>
38         <p>
39             search()方法使用正则表达式：
40             eg：
41             使用正则表达式搜索"Runoob",且不区分大小写
42         </p>
43         <p>当前有字符串“Visit Runoob”，搜索"runoob"，并显示起始位置</p>
44         
45         <button onclick="myFunction()" style="color: crimson;">点击这里搜索</button>
46         <p id="demo"></p>
47         <script>
48             var str = "Visit Runoob"
49             function myFunction(){
50                 var n = "起始位置为："+str.search(/runoob/i)
51                 document.getElementById("demo").innerHTML=n
52             }
53         </script>
54         <p>
55             字符串也可以作为search()方法的参数，并且自动转换为正则表达式<br>
56             eg:当前有字符串"Visit Runoob",将字符串作为参数搜索
57         </p>
58         <button onclick="myFunction1()">点击这里搜索</button>
59         <p id="demo1"></p>
60         <script>
61             var mystr = "Visit Runoob"
62             function myFunction1(){
63                 document.getElementById("demo1").innerHTML="起始位置是"+mystr.search("Runoob")
64             }
65         </script>
66         <p style="font-size: medium; color: crimson;">replace()方法使用正则表达式</p>
67         <p>
68             实例：使用正则表达式且不区分大小写将字符串中的Microsoft替换为Runoob
69         </p>
70         <button onclick="myFunction2()">点击这里替换</button>
71         <p id="demo2"></p>
72         <script>
73             var mystr = "Visit Microsoft"
74             function myFunction2(){
75                 txt = mystr.replace(/microsoft/i, "Runoob")
76                 // console.log(txt)
77                 document.getElementById("demo2").innerHTML=txt
78             }
79         </script>
80         <p>
81             那么，和search()方法一样，replace()方法肯定也可以将字符串作为参数，并且自动转换为正则表达式<br>
82             eg:使用replace将字符串中的Microsoft替换为Runoob
83         </p>
84         <button onclick="myFunction3()">点击这里将字符串作为参数替换</button>
85         <p id="demo3"></p>
86         <script>
87             var mystr3="Visit Microsoft"
88             function myFunction3(){
89                 txt1 = mystr3.replace("Microsoft", "Runoob")
90                 console.log(txt1)
91                 document.getElementById("demo3"),innerHTML=txt1
92             }
93         </script>
94     </body>
95 </html>

 正则表达式修饰符

修饰符：可以在全局搜索中不区分大小写

修饰符 描述
i ignore：执行对大小写不敏感的匹配
g global：执行全局匹配（匹配所有值并返回）
m 执行多行匹配

 

 

 

 

正则表达式模式

表达式 描述
[abc]　 匹配方括号内的所有字符
[0-9] 匹配0-9的所有数字
(x|y)

匹配所有以|分割的选项

 

 

 

 

 

元字符

元字符　 描述
\d　 查找数字
\s　 查找空白字符
\b　 匹配单词边界
\uxxxx 查找以十六进制规定的Unicode字符

 

 

 

 

 

量词

量词　　 描述
n+ 匹配任何包含至少一次n的字符串
n* 匹配任何包含零个或多个n的字符串
n?

匹配任何包含零个或一个n的字符串

 

 

 

 

 

test()方法

test()方法是一个正则表达式方法

用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，返回true，否则返回false

eg：

搜索字符串中的字符“e”

1 var patt = /e/;
2 patt.test("The best things in life are free")
3 字符串中包含"e"，则返回true
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" content="text/html">
 5         <title>JavaScript 正则表达式啊</title>
 6     </head>
 7     <body>
 8         <p>test()方法</p>
 9         <a href="http://www.baidu.com">点击这里跳转</a>
10         <p>如果字符串包含e返回true，否则返回false</p>
11         <button onclick="myFunction()">点击这里匹配</button>
12         <p id="demo"></p>
13         <script>
14             var patt = /e/;
15             function myFunction(){
16                 document.getElementById("demo").innerHTML=patt.test("The best things in life is free")
17             }
18         </script>
19     </body>
20 </html>

 

posted @ 2023-01-05 16:05  H年轻的心  阅读(25)  评论(0)    收藏  举报