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 总结

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

JavaScript 正则表达式笔记

JavaScript 正则表达式笔记

1. JavaScript 表单验证

1.1 表单基本验证

1.1.1 为什么要表单验证

1.1.2 表单验证的主要内容

1.1.3 表单验证的思路

1.1.4 表单验证案例

1.2 文本框对象

1.2.1 深入了解文本框对象

1.2.2 文本框验证效果

1.3 列表框

1.3.1 深入了解列表框

1.3.2 列表框应用

2. 正则表达式

2.1 正则表达式的作用

2.2 正则表达式的实际应用

2.3 正则表达式的优势

2.3.1 传统方式

2.3.2 正则表达式方式

2.4 正则表达式的概述

2.5 正则表达式的对象

2.5.1 创建语法

2.5.2 表达式模式

2.5.3 常用属性

2.5.4 常用方法

2.6 正则应用方法

2.6.1 String 对象的方法

3 正则表达式语法

3.1 常用匹配和定位符号

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

3.3 其他匹配法则

3.4 子表达式和反向引用

3.5 特殊应用

3.6 正则表达式练习

4 总结

猜你喜欢