首页技术为王JavascriptJS入门到精通 第7章 正则表达式

JS入门到精通 第7章 正则表达式

分类Javascript时间2026-06-16 13:02:11发布信义之树浏览98
导读：一、练习 1. 练习1 （1）源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>字符^的使用</title> &...

一、练习

1. 练习1

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符^的使用</title>
</head>
<body>
<h3>行首匹配字符^的使用</h3>
<script type="text/javascript">    

var reg_expression=/^ming/;
var textString="mingrisoft";
var result=reg_expression.test(textString);

document.write("<font size='+1'>"+result+"<br>");

if(result){
    
    document.write("正则表达式/^ming/匹配字符串\""+ textString +"\".<br>");
    
}else{
          alert("未找到匹配的模式!");
      }

    
</script>    
</body>
</html>


 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/7_1/

 （3）Tips

   这个知道。


2. 练习2

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>匹配字符$的使用</title>
</head>
<body>
<h3>行尾匹配字符$的使用</h3>
<script type="text/javascript">    
var reg_expression=/ft$/;    
var textString="mingrisoft";
var result=reg_expression.test(textString);

document.write("<font size='+1'>"+result+"<br>");
    
if(result){
          document.write("正则表达式/ft$/匹配字符串\""+ textString +"\".<br>");
      }
      else{
          alert("未找到匹配的模式!");
   }    
    
    
    
    
</script>    
</body>
</html>


 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/7_2/

 （3）Tips

   这么少，正则复杂的多了去了。


3. 练习3

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>匹配字符\b的使用</title>
</head>
<body>
<h3>字符\b的使用</h3>
<script type="text/javascript">    
var reg_expression = /\bming\b/;    
var textString="ming ri soft";
var result=reg_expression.test(textString);     
    
document.write("<font size='+1'>"+result+"<br>");    

if(result){
        document.write("正则表达式 /\\bming\\b/匹配字符串\""+ textString +"\".<br>");
    }
else{
        alert("未找到匹配的模式!");
    }    
    
</script>    
</body>
</html>


 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/7_3/

 （3）Tips

   开头也是单词。


4. 练习4

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>匹配大小写字母</title>
</head>
<body>
    <h3>匹配大小写字母</h3>
<script type="text/javascript">    
var reg_expression = /[A-Z][a-z]soft/;    
var textString="Xysoft";
var result=reg_expression.test(textString);     
    
document.write("<font size='+1'>匹配结果为："+result+"<br>");    
    
if(result){
       document.write("在“"+textString+"”中找到了正则表达/[A-Z][a-z]soft/的匹配。<br>");
   }
   else{
       document.write("未找到匹配的模式！");
   }    
    
    
</script>    
</body>
</html>


 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/7_4/

 （3）Tips

   只是一个字母。


5. 练习5

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圆点(.)元字符</title>
</head>
<body>
<h3>圆点(.)元字符的使用</h3>
<script type="text/javascript">    
var textString="明日科技 mingri 有限公司 mr";
var reg_expression = /明....m/;    
var result=reg_expression.test(textString);    
document.write("<font size='+1'>匹配结果为："+result+"<br>");    
    
if(result){
       document.write("在“"+textString +"”中找到正则表达式/明....m/的匹配。<br>");
   }
else{
       document.write("未找到匹配的模式！");
}    
</script>    
</body>
</html>


 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/7_5/

 （3）Tips

   只代表单个字符。


6. 练习6

  （1）源代码 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建正则表达式</title>
</head>
<body>
<script type="text/javascript">    
var myString="如何创建正则表达式";    
var myregex=new RegExp("创建");

var result=myregex.test(myString);    
document.write("<font size='+1'>匹配结果为："+result+"<br>");     
    
if(myregex.test(myString)){
     alert("已创建正则表达式，并找到了指定的模式！");
      }
else{
     alert("已创建正则表达式，但未找到匹配的模式。");
}

    
</script>    
</body>
</html>


 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/7_6/

 （3）Tips

   new regexp()。


二、编程训练

1. 训练1

 （1）源代码 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>匹配</title>
</head>
<body>
<script type="text/javascript">    
function TestDemo(pattern, str){
    var result;                                 
    if (pattern.test(str)){                        
        result = "匹配";                         
    }else{
         result = "不匹配";                 
    }
    document.write("正则表达式"+pattern+result+"字符串\""+str+"\""); 
}    

TestDemo(/[A-Z][a-z]/,"JavaScript从入门到精通");    
    
    
</script>    
</body>
</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/7_7/

  （3）Tips

   这不跟前面的一样。


2. 训练2

 （1）源代码 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数字和花括号的表示</title>
</head>
<body>
<script type="text/javascript">    
var str="123-45";
var pattern=/^\d{3}-\d{2}$/;
    
    
if(pattern.test(str)){
    alert("字符串符合指定的格式");
}else{
    alert("字符串不符合指定的格式");
}    
    
</script>    
</body>
</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/7_8/

  （3）Tips

   还停留在皮毛。


3. 训练3

 （1）源代码 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>替换语法</title>
</head>
<body>
<script type="text/javascript">    

var str="aA12cD34eF56";            
var pattern=/[a-z]/gi;        
    
var newstr=str.replace(pattern,"*");    
    
document.write("字符串"+str+"被转换为："+newstr);
    
</script>    
</body>
</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/7_9/

  （3）Tips

   global，ignore，全局，忽略大小写。按指定规则替换。


4. 训练4

 （1）源代码 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按正则规则替换</title>
</head>
<body>
<script type="text/javascript">    
var arr=new Array();
var str="一1按3我5帮8您";
var pattern=/\d/;

arr=str.split(pattern);
    
for(i=0;i<arr.length;i++){
    document.write(arr[i]);
}    
    
    
</script>    
</body>
</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/7_10/

  （3）Tips

    这回知道点了。


三、实践与练习

1. 实践1

 （1）源代码 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>都用上了</title>
</head>
<body>
邮箱：<input type="text" name="email" id="email" onblur="checkinput()">

<span id="emailbox"></span>
    
    
<script type="text/javascript">    
function checkinput(){
    var email=document.getElementById("email").value;
    var checkemail=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
    
if(checkemail.test(email)){//用正则表达式进行判断
    emailbox.innerHTML="邮箱符合要求";
}else{
    emailbox.innerHTML="请使用正确的邮箱格式";
}    
    
}
</script>    
</body>
</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/7_11/

  （3）Tips

     [ ]表示里面的字符其中之一，.就是.，+就是+。( )表示一组。*表示0次或多次。+表示1次或多次。


2. 实践2

 （1）源代码 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
    
<style type="text/css">

body,td,th {font-size: 12px;}
.red{color: red;}
.green{color: green;}

</style>    
    
</head>
<body>
<script type="text/javascript">    
function checkinput(){

    //pwdbox.innerHTML="哪个";
    
    var user=form.user.value;
    var checkuser=/^[a-zA-Z]\w{4,15}$/;
    
    if(checkuser.test(user)){
        userbox.innerHTML="<span>用户名符合要求</span>";
    }else{
        userbox.innerHTML="<span>执行了没</span>";
    }
    
    var pwd=form.pwd.value;
    var checkpwd=/^[a-zA-Z0-9]{6,12}$/;
    
    if(checkpwd.test(pwd)){
        pwdbox.innerHTML="<span>密码符合要求</span>";
    }else{
        pwdbox.innerHTML="<span>哪个</span>";
    }    
    
    
    
}
    
</script>    
    
<form name="form" method="post" action="#">    
    
用户名：<input type="text" name="user" id="user">    
<span id="userbox">*必须是以字母开头，可包含字母、数字或下划线，长度5-16个字节</span><br>    
    
密&emsp;码：<input type="password" name="pwd" id="pwd">    
<span id="pwdbox">*可包含字母、数字，长度6-12个字节</span><br>
<input type="button" name="button" value="测试" onclick="checkinput()">    
        
</form>    

    
    
</body>
</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/7_12/

  （3）Tips

     还行。


3. 实践3

 （1）源代码 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>应用</title>
    
<style type="text/css">

body,td,th {font-size: 12px;}
.red{color: red;}

</style>
    
</head>
<body>
<script type="text/javascript">    
function checkuser(form){
    var user=form.user.value;
    var Expression1=/^[\u4e00-\u9fa5]{2,4}$/;
    var objExp1=new RegExp(Expression1);
    if(user==""){
      showuser.innerHTML="请输入姓名！";
      return false;
    }else if(objExp1.test(user)==true){
      showuser.innerHTML="";
      return true;
    }else{
      showuser.innerHTML="姓名格式不正确！";
      return false;
    }
}    
    
  function checktel(form){
    var tel=form.tel.value;
    var Expression4=/^13(\d{9})$|^18(\d{9})$|^15(\d{9})$/;
    var objExp2=new RegExp(Expression4);
    if(tel==""){
      showtel.innerHTML="请输入移动电话号码！";
      return false;
    }else if(objExp2.test(tel)==true){
      showtel.innerHTML="";
      return true;
    }else{
      showtel.innerHTML="移动电话号码格式不正确！";
      return false;
    }
  }    
    
 function checkinput(form){
    if(checkuser(form) && checktel(form)){
      alert("提交成功！");
    }else{
      return false;
    }
 }    
    
</script>
    
    
<form name="form" method="post" action="#" onsubmit="return checkinput(form)">
姓&emsp;&emsp;名：<input type="text" name="user" size="20" onBlur="checkuser(form)">
    
  <span id="showuser"></span><br>
移动电话：<input type="text" name="tel" size="20" onBlur="checktel(form)">
  <span id="showtel"></span><br>
<input type="submit" name="sub" value="提交">
    
</form>    
    
    
</body>
</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/7_13/

  （3）Tips

     比较熟。

















JS入门到精通 第6章 字符串与数值数组 JS入门到精通 第8章 程序调试与错误处理

相关内容

更多

游客 回复需填写必要信息
↑