JavaScript 正则表达式笔记

其他 2021-03-09 00:48:54 阅读次数: 0

JavaScript 正则表达式笔记

1. JavaScript 表单验证

1.1 表单基本验证

1.1.1 为什么要表单验证
  • 减轻服务器的压力
  • 保证输入的数据符合要求

在这里插入图片描述

1.1.2 表单验证的主要内容
  • 日期是否有效或日期格式是否正确
  • 表单元素是否为空
  • 用户名和密码
  • E-mail地址是否正确
  • 手机号、身份证号码等是否是数字
1.1.3 表单验证的思路
  • 当输入的表单数据不符合要求时，如何编写脚本来进行提示？
    • 获得表单元素值
    • 使用JavaScript的一些方法对数据进行判断
    • 当表单提交时，触发 onsubmit 事件，对获取的数据进行验证
<script>
	// 1. 获取表单标签
	var form = document.getElementById('loginForm')
	
	// 2. 动态绑定表单事件，onsubmit 事件可以由 submit 按钮触发
	form.onsubmit = function(){
     
     
	  // 3. 开始表单验证
	  var txtUserName = document.getElementById('userName').value  // 获取用户名
	  var txtUserPassword = document.getElementById('userPassword').value  // 获取密码
	
	  if(txtUserName == ''){
     
     
	    alert('用户名不能为空!')
	    return false
	  }
	  else if(txtUserPassword == ''){
     
     
	    alert('密码不能为空!')
	    return false
	  } else {
     
     
	    alert('表单提交')
	  }
	}
</script>
<body>
	<form class="" action="" id="loginForm">
	  用户名: <input type="text" name="userName" id="userName"><br/>
	  密码: <input type="password" name="userPassword" id="userPassword"><br/>
	  <input type="submit" name="" value="提交登陆">
	  <input type="button" name="" value="普通登陆" id="btnLogin">
	</form>
</body>
1.1.4 表单验证案例
  • 验证 Email
    • Email 不能为空
    • Email 格式不正确，必须包含@和.
<script type="text/javascript">
  window.onload = function(){
     
     
    // 1. 获取表单标签
    var form = document.getElementById('loginForm')

    // 2. 动态绑定表单事件，onsubmit 事件可以由 submit 按钮触发
    form.onsubmit = function(){
     
     
      // 3. 开始表单验证
      var UserEmail = document.getElementById('userEmail').value  // 获取用户名
      var apos = UserEmail.indexOf('@');
      var dotpos = UserEmail.lastIndexOf('.');

      if(UserEmail == ''){
     
     
        alert('邮箱不能为空!')
        return false
      }
      else if(apos<1||dotpos-apos<2){
     
     
        // 输入的邮箱必须包含“@”符号和点号“.”同时“@”不可以是邮件地址的首字符，并且“@”之后需有至少一个“.”号
        alert('格式不对')
        return false
      } else {
     
     
        alert('表单提交')
      }
    }
  }
</script>
<body>
  <form class="" action="" id="loginForm">
    邮箱: <input type="text" name="userEmail" id="userEmail"><br/>
    <input type="submit" name="" value="提交登陆">
  </form>
</body>
  • 验证文本内容
    • 姓名不能为空，并且姓名中不能有数字
    • 密码不能为空，并且密码包含的字符不能少于6个
    • 两次输入的密码必须一致
<script>
 window.onload = function(){
     
     
    // 1. 获取表单标签
    var form = document.getElementById('loginForm')

    // 2. 动态绑定表单事件，onsubmit 事件可以由 submit 按钮触发
    form.onsubmit = function(){
     
     
      // 3. 开始表单验证
      var userName = document.getElementById('userName').value  // 获取姓名
      var userPassword = document.getElementById('userPassword').value  // 获取密码
      var userRePassword = document.getElementById('userRePassword').value  // 获取确认密码

      if(userName == ''){
     
     
        alert('姓名不能为空!')
        return false
      }
      else if(userPassword == ''){
     
     
        alert('密码不能为空!')
        return false
      } else if(userPassword !== userRePassword){
     
     
        alert('确认密码不一致!')
      } else {
     
     
        alert('表单提交了')
      }
    }
  }
</script>

<body>
  <form class="" action="" id="loginForm">
    姓名: <input type="text" name="userName" id="userName"><br/>
    密码: <input type="password" name="userPassword" id="userPassword"><br/>
    确认密码: <input type="password" name="userRePassword" id="userRePassword"><br/>
    <input type="submit" name="" value="提交登陆">
  </form>
</body>

1.2 文本框对象

1.2.1 深入了解文本框对象
  • 事件
名称 描述
onblur 失去焦点，当光标离开某个文本框时触发
onfocus 获得焦点，当光标进入某个文本框时触发
onkeypress 某个键盘按键被按下并松开
  • 模拟文本框（键盘按下清除文本框内容，键盘回退显示文本框内容）
<script type="text/javascript">
  window.onload = function(){
     
     
    var myTxt = document.getElementById('myTxt')
    myTxt.onkeypress = function(){
     
     
      // alert('我按了回退键,onkeypress'),本事件针对回退键无效
      if(this.value == '请输入用户名')
        this.value = ''
    }

    // onkeyup 能准确获取当前文本框的数据，onkeydown 会获取延迟的数据
    myTxt.onkeyup = function(e){
     
     
      console.log(e.keyCode); // 获取按键具体内容
      if (this.value == '') {
     
     
        this.value = '请输入用户名'
      }
    }
  }
</script>
<body>
  <input type="text" name="" value="" placeholder="请输入用户名">
  <input type="text" name="" value="请输入用户名" id="myTxt">
</body>
  • 方法
名称 描述
blur() 从文本域中移开焦点
focus() 在文本域中设置焦点，即获得鼠标光标
select() 选取文本域中的内容
  • 属性
名称 描述
id 设置或返回文本域的 id
value 设置或返回文本域的 value 属性的值
  • 文本框对象按键提交
 <script type="text/javascript">
	window.onload = function(){
     
     
	  var txtUserName = document.getElementById('userName')
	  var txtPassword = document.getElementById('userPassword')
	  txtUserName.onkeyup = function(){
     
     
	    var keyCode = e.keyCode  // 获取按键
	    // 判断是否按键是回车键
	    if (keyCode == 13) {
     
     
	      txtPassword.focus()  // 光标聚集到密码框上
	    }
	  }
	  txtPassword.onkeyup = function(e){
     
     
	    var keyCode = e.keyCode  // 获取按键
	      if(keyCode == 13){
     
     
	        login()  // 调用提交表单的方法
	      }	
	  }
	}
	
	function login() {
     
     
	  var form = document.getElementById('loginForm')
	  form.submit()
	}
</script>

<body>
  <form class="" action="" id="loginForm">
    用户名: <input type="text" name="userName" id="userName"><br/>
    密码: <input type="password" name="userPassword" id="userPassword"><br/>
    <input type="button" name="" value="普通登陆" id="btnLogin" onclick="login()">
  </form>
</body>
1.2.2 文本框验证效果

1.3 列表框

1.3.1 深入了解列表框
  • Select对象常用事件、方法和属性
  • 事件
名称 描述
onchange 当改变选项时调用的事件
  • 方法
名称 描述
add() 向下拉列表中添加一个选项
  • 属性
名称 描述
options[] 返回包含下拉列表中的所有选项的一个数组
selectedIndex 设置或返回下拉列表中被选项目的索引号
length 返回下拉列表中的选项的数目
  • Option 对象常用属性
    • text 设置或返回某个选项的纯文本值
    • value 设置或返回被送往服务器的值
1.3.2 列表框应用
  • 下拉列表添加元素
<script type="text/javascript">
  window.onload = function(){
     
     
    var selPhone = document.getElementById('selPhone')
    var btn = document.getElementById('btnIncoming')
    btn.onclick = function(){
     
     
      // HTML DOM 的方式添加列表项
      // 获取新手机的名字
      var txtName = document.getElementById('txtName').value
      // 创建一个下拉列表项（ //参数1是可见的text，参数2是隐含的value）
      var newOption = new Option(txtName,'mobile202008031421001')
      selPhone.options.add(newOption)  // 添加列表项到 select 表单元素中
      alert('新品添加成功！')
    }
    selPhone.onchange = function(){
     
     
      alert(this.options[this.selectedIndex].text)
    }
  }
</script>

<body>
  <form class="" action="" method="post">
    <input type="text" name="phoneName" value="" id="txtName">
    <input type="button" name="" value="进货" id="btnIncoming"><br/>
    <select class="" name="" id="selPhone">
      <option value="apple001">IPoneX</option>
      <option value="huawei001">华为P40Pro</option>
    </select>
  </form>
</body>
  • 省市级联下拉列表
<script>
    var allCitys = [['南京','苏州','扬州'],['郑州','洛阳','开封'],['沈阳','长春','哈尔滨']]
    window.onload = function() {
     
     
        var sel = document.getElementById('prevNames');
        var selCity = document.getElementById('cityName')
        sel.onchange = function(){
     
     
            selCity.options.length = 0  // 数组清空
            // 1. 先确定省份
            var index = this.selectedIndex
            // 2. 获得省份对应的城市
            var citys = allCitys[index]
            // 3. 动态添加城市到第二个列表
            for(var i = 0; i<citys.length;i++){
     
     
                var city = new Option(citys[i],citys[i])
                selCity.options.add(city)
            }
        }
    }
</script>

<body>
   <form action="">
       <select name="" id="prevNames">
           <option value="">江苏</option>
           <option value="">河南</option>
           <option value="">东三省</option>
       </select>
       <select name="" id="cityName">
           <option value="">南京</option>
           <option value="">苏州</option>
           <option value="">扬州</option>
       </select>
   </form>
</body>
  • 年月日三级联下拉列表
<script>
    var year
    var month
    var day
    // 初始化年
    var currentYear = 1900, currentMonth = 1
    var monthDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
    // 根据当前选中的年和月，确定天数的范围
    function setDay(){
     
     
        // 判断是否是闰年
        if (currentYear % 4 == 0 && currentYear % 100 != 0 || currentYear % 400 == 0) {
     
     
            monthDay[1] = 29
        } else {
     
     
            monthDay[1] = 28
        }
        day.options.length = 0
        var days = monthDay[currentMonth - 1] // 获取当前月的最大天数
        for(var i = 1; i <= days; i++) {
     
     
            day.options.add(new Option(i,i))
        }
    }

    window.onload = function(){
     
     
        year = document.getElementById('selYear')
        month = document.getElementById('selMonth')
        day = document.getElementById('selDay')
        // 初始化年份下拉列表框
        for(var i = 1900; i < 2200; i++){
     
     
            year.options.add(new Option(i,i))
        }
        // 初始化月份下拉列表框
        for(var i = 1; i < 13; i++) {
     
     
            month.options.add(new Option(i,i))
        }
        // 初始化天数下拉列表框
        for(var i = 1; i <= 31; i++){
     
     
            day.options.add(new Option(i,i))
        }

        year.onchange = function(){
     
     
            // 确定选中的年份
            currentYear = year.options[year.selectedIndex].text
            // 设置天数的范围
            setDay()
        }

        month.onchange = function(){
     
     
            // 确定选中月份
            currentMonth = month.options[month.selectedIndex].text
            // 设置天数的范围
            setDay()
        }
    }
</script>

<body>
    <select name="" id="selYear"></select>年
    <select name="" id="selMonth"></select>月
    <select name="" id="selDay"></select>日
</body>

2. 正则表达式

2.1 正则表达式的作用

  • 为什么需要正则表达式
    • 简洁的代码
    • 严谨的验证文本框中的内容

2.2 正则表达式的实际应用

  • 用户名
  • 密码
  • 电子邮箱(^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$)
  • 手机号码、固定电话
  • 身份证号码
  • 邮政编码
  • ...

2.3 正则表达式的优势

  • 问题
    • 从如下的字符串中，把两位数字取出，并保存到数组中
    • “1，a h87 4-12-mm102/34”
2.3.1 传统方式
var str = '1 a h87 4-12-mm102/34'
var str1 = []
var str2 = []

for (var i = 0; i < str.length; i++) {
    
    
  var num = Number(str[i]);
  str1.push(num)
}

for (var j = 0; j < str1.length; j++) {
    
    
  if(str1[j] !== NaN && str1[j] > 0 && str1[j+1] !== NaN && str1[j+1] > 0) {
    
    
    str2.push(Number(str[j])*10+Number(str[j+1]))
  }
}
console.log(str2);
2.3.2 正则表达式方式
var str = '1 a h87 4-12-mm102/34'
var reg = /\d+/gi
var str1 = str.match(reg)
// console.log(str1)
for (var i = 0; i < str1.length; i++) {
    
    
  if (str1[i] > 9 && str1[i] < 100) {
    
    
    console.log(str1[i]);
  }
}

2.4 正则表达式的概述

  • 正则表达式是一个描述字符模式的对象
    • 定义正则表达式
    • 表达式的模式

2.5 正则表达式的对象

2.5.1 创建语法
  • 普通方式
var reg = /表达式/附加参数
var reg = /white/
var reg = /white/g
  • 构造函数方式
var reg = new RegExp("表达式","附加参数")
var reg = new RegExp("white")
var reg = new RegExp("white","g")
2.5.2 表达式模式
  • 简单模式
var reg = /china/
var reg = /abc8/
  • 复合模式
var reg = /^\w+$/
var email = '[email protected]'
'[email protected]'
var reg = /^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/
2.5.3 常用属性
  • RegExp 对象的属性
属性 描述
global RegExp 对象是否具有标志 g，全局
ignoreCase RegExp 对象是否具有标志 i ，是否区分大小写
2.5.4 常用方法
  • RegExp 对象的方法
方法 描述
exec 检索字符中是正则表达式的区配，返回找到的值，并确定其位置
test 检索字符串中指定的值，返回 true 或 false 
test 方法

var str = 'hello js,css,html,nodejs'
var reg = /js/g		// true
var reg = /JS/g		// false
var reg = /JS/gi	// true(不区分大小写)
alert(reg.test(str))// test方法用于判断字符串中是否存在正则表达式规定的模式

=======================================================================

exec 方法

var str = 'hello js,css,html,nodejs'
var reg = /js/g  // g表示全局匹配, i表示忽略大小写
// alert(reg.test(str))  // test 方法用于判断字符串中是否存在正则表达式规定的模式
var result = null
// exec 方法用于匹配字符串，并通过相关属性获取匹配的信息
while (result = reg.exec(str)) {
    
    
  console.log(result[0]);     // 匹配字符
  console.log(result.index);  // 匹配的位置
}

2.6 正则应用方法

2.6.1 String 对象的方法
方法 描述
match 找到一个或多个正则表达式的匹配
search 检索与正则表达式相匹配的值
replace 替换与正则表达式匹配的字符串，常用于过滤敏感词 
var str = 'hello js,css,html,nodejs'
var reg = /js/g  // g表示全局匹配，i表示忽略大小写
console.log(str.search(reg));  // 6 类似于 indexOf 方法
console.log(str.match(reg));   // Array(2) 字符串匹配方法，能获取所有匹配的字符串，并且用数组保存
console.log(str.replace(reg,'abc'));  // hello abc,css,html,nodeabc 过滤关键字或敏感字

3 正则表达式语法

3.1 常用匹配和定位符号

符号 描述
/…/ 代表一个模式的开始和结束
^ 匹配字符串的开始
$ 匹配字符串的结束
\b 代表字符的边界
\B 非单词边界匹配
\s 任何空白字符
\S 任何非空白字符
\d 匹配一个数字字符，等价于[0-9]
\D 除数字之外的任何字符，等价于 [^0-9]
\w 匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]
\W 任何非单字字符，等价于[^a-zA-Z0-9_]
. 除了换行符之外的任意字符 
var str = 'hello js,css,html'
var reg = /\bjs/gi  // \b 靠边是指处于边界状态，不仅限于字符串的开头和结尾
var reg = /\s/gi    // \s 表示空白字符
var reg = /\d/gi    // \d 表示数字字符
var reg = /\w/gi    // \w 表示字母数字下划线
var reg = /./gi     // . 表示除了换行符之外的任意一个字符
alert(reg.test(str))

3.2 重复限定符号与贪婪法则

  • 正则表达式重复字符（量词）
符号 描述
{n} 匹配前一项 n 次
{n,} 匹配前一项 n 次，或者多次
{n,m} 匹配前一项至少n次，但是不能超过m次
* 匹配前一项0次或多次，等价于{0,}
+ 匹配前一项1次或多次，等价于{1,}
? 匹配前一项0次或1次，也就是说前一项是可选的，等价于{0, 1} 
var str = "我的qq号码:123456myPhone13888888888,"
var reg = /\d{
    
    6}/gi  // 123456 138888
var reg = /\q+/gi	 // qq +表示至少1个
var reg = /q?/gi     // ?表示0个或1个
console.log(str.match(reg));
  • 贪婪法则
var str = "我的qq号码:123456myPhone13888888888,"
var reg = /1\w+/gi   // 贪婪法则是按匹配最大范围来执行的
var reg = /1\w+?/gi  // 贪婪法则是按匹配最大范围来执行的，?用在其他量词后面表示禁用贪婪法则
console.log(str.match(reg));
  • 正则替换两端空格练习
var str = '   I love Regexp!   '
var reg1 = /^\s*/  // 开头空格
var reg2 = /\s*$/  // 结尾空格
console.log(str.replace(reg1,'').replace(reg2,''))

3.3 其他匹配法则

  • 字符匹配符
    • [a-z][A-Z][0-9][1234][abcd]
    • [^] (取反)
  • 转义符
    • \
  • 选择匹配符
    • |
  • 注意事项
    • 中文的匹配
      • [\u4e00-\u9fa5]
    • 转义字符在Regexp对象的创建时要多转义一次
var str = '[email protected]'
var reg = /\./gi   // \.表示普通的小数点符号，不是正则表达式的匹配符
alert(reg.test(str))

var str = '   I love Regexp!   '
var reg = /^\s*|\s*$/g  // | 表示多个匹配条件都可以使用
console.log(str.replace(reg,''))

var content = '我abc'
var reg1 = /[\u4e00-\u9fa5]/g  // 中文匹配
alert(reg1.test(content))

var reg1 = new RegExp('\\.','gi') // 多转义一次
alert(reg1.test(str))

3.4 子表达式和反向引用

  • 子表达式
    • 在正则匹配模式中，使用一对括号包起来的内容
  • 反向引用
    • 子表达式匹配的内容会被系统捕获到缓冲区，可以使用”\数字”的方式来引用缓冲区内容
var str = 'abc12hhh876aas888kkk111---==='
var reg = /(\d)\1\1/g  // 找出三位相同的数字，\1表示前面的子表达式的内容
alert(str.match(reg))

3.5 特殊应用

  • 正向预查（？=）
    • 获取在指定条件前匹配成功的字符串
  • 反向预查（？！）
    • 获取在指定条件后匹配成功的字符串
var str = '我的HTML成绩是95分,CSS成绩是90分,JS成绩是80分,一课不如一课，唉'
var reg = /\d{
    
    2}(?=分,CSS)/gi  // 前向预查,提供筛选条件,获取在条件前面匹配成功字符串
var reg1 = /\d{
    
    2}(?!分,CSS)/gi // 后向预查,提供筛选条件,获取在条件后面匹配成功字符串
alert(str.match(reg))
alert(str.match(reg1))

3.6 正则表达式练习

  • 获取 HTML 标签的个数
var str = '我们在学习<div>I study JavaScript </div><p>今天你学习了嘛</p>'
// var reg = /<[a-zA-Z]+>/gi              // 1.设置 html 开始标签的匹配模式
var reg = /<([a-zA-Z]+)>(.+)<\/\1>/gi     // 2.匹配完整的一个 html 标签和内容
// console.log(str.match(reg))
var arr = str.match(reg)                  // arr[0] = '<div>I study JavaScript </div>'
var regDelTag = /<.+?>/gi                 // 3.匹配任意的 html 标签,不包含内容
alert(arr[0].replace(regDelTag,''))

4 总结

  • 正则表达式在某些方面能够节省代码量，提高效率，功能也很强大，做个学习笔记

猜你喜欢

转载自blog.csdn.net/qq_43645678/article/details/108185134
今日推荐
周排行
教你如何约女孩子的方式去理解（TCP三次握手与四次挥手）
android按压背景
【量化小讲堂-Python&amp;Pandas系列10】如何判断一个策略的好坏？(附代码)
编程题：利用链表实现栈
盘点47条 Allegro 使用技巧，你都知道吗？
在VMware Workstation中安装CentOS
二叉树的实现
cmake安装jsoncpp
ReactNative开发城市列表页
最全前端学习资源
每日归档
更多
2025-03-20(0)
2025-03-19(0)
2025-03-18(0)
2025-03-17(0)
2025-03-16(0)
2025-03-15(0)
2025-03-14(0)
2025-03-13(0)
2025-03-12(0)
2025-03-11(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022