js进阶正则表达式实现过滤字符串(RegExp对象操作正则表达式)(正则:regular)(表达式:expression)

时间:2023-01-03 12:20:47

js进阶正则表达式实现过滤字符串(RegExp对象操作正则表达式)(正则:regular)(表达式:expression)

一、总结

1、str_replace:正则作用:高效快速匹配

2、break关键字

3、RegExp对象操作正则表达式

 

(正则:regular)

  • ['regjʊlə]

(表达式:expression)

  •  [ɪkˈspreʃn]

 

 

二、js进阶正则表达式实现过滤字符串

js进阶正则表达式实现过滤字符串(RegExp对象操作正则表达式)(正则:regular)(表达式:expression)

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4   <meta charset="utf-8">
 5   <title>课堂演示</title>
 6   <style type="text/css">
 7     div{
 8             background: rgba(30,100,30,0.2);
 9             width: 800px;
10             margin:20px auto;
11             padding: 15px;
12             text-align: center;
13         }
14         h2{
15             text-align: center;
16         }
17         input[type=text]{
18             height: 30px;
19             font-size: 20px;
20             width: 600px;
21             padding: 10px;
22         };    
23   </style>
24 </head>
25 <body>
26 <h2>正则表达式示例演示</h2>
27 <div>
28     <p>示例字符串:<input type="text" id="str" name="str" value=""></p>
29     <p>筛选部分:<input type="text" id="st" name="st" value=""></p>
30     <p>筛选结果:<input type="text" id="res" name="res" value=""></p>
31     <input type="button" value="测试按钮" onclick="resplace()">
32 </div>
33   <script type="text/javascript">
34     function  resplace(){
35         var str=document.getElementById('str').value;
36         var  st=document.getElementById('st').value;
37         var res=document.getElementById('res');
38         /*
39         for(var i=0;i<str.length;i++){
40             if (str.indexOf(st)>-1){
41                 str=str.replace(st,'') //1、str_replace:正则作用:高效快速匹配 42                 //把包含特定字符串转换成空字符
43             }else{break}//如果没有了,退出循环 //2、break关键字 44         }
45         res.value=str;
46         */
47         res.value=str.replace(new RegExp(st,'g'),''); //3、RegExp对象操作正则表达式 48     }
49   </script>
50 
51 </body>
52 </html>