JS正则表达式

2023-04-16 12:10:02JavaScript020

JS正则表达式,第1张

一. 正则表达式

正则表达式：其实就是一种匹配规则，用于检索字符串

定义正则表达式的两种方式：1.直接定义 2.构造函数定义

那么正则表达式正则强大的地方是它可以写通配符(拥有特殊含义的字符)

二. 通配符

\w 表示：字母、数字、下划线

\W 表示：除了字母、数字、下划线以外的字符

\d 表示：数字

\D 表示：非数字

^ 表示：以^符号后面的第一个字符开头

表示：以表示：以符号前面的第一个字符结尾

{n} 表示：重复n次

{n,m} 表示：重复n到m次

[xyz] 表示：其中任意一个字符

+ 表示：重复前一项1次或多次等价于 {1,}

* 表示：重复前一项0次或多次等价于 {0,}

? 表示：重复前一项0次或1次等价于 {0,1}

. 表示：除了换行符以外的任意一个字符

\. 表示：.字符 ^ 表示：^ \表示：表示：

可以用()将多个字符作为一个整体

\w 等价于 [0-9a-zA-Z_]

| 表示：或者

[\u4E00-\u9FA5] 是常用汉字的unicode编码范围

三. 正则练习

四. 正则表达式配合字符串的方法

replace()方法

默认情况下，replace()方法，只会替换字符串中匹配的第一段内容

使用正则表达式，添加全局匹配修饰符g，可以替换匹配全部内容

使用正则表达式，添加忽略大小写修饰符i，在匹配内容时会忽略大小写

search()方法

可以通过正则表达式查找位置

五. 添加学生练习

<!DOCTYPE html>

<html>

<head>

<style>

.err{

color: red

}

.ok{

color: green

}

</style>

</head>

<body>

<form>

<table>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

<input checked name="sex" type="radio" value="0">男

<input name="sex" type="radio" value="1">女

</td>

</tr>

<tr>

<td>

<input name="hobby" type="checkbox" value="抽烟">抽烟

<input name="hobby" type="checkbox" value="喝酒">喝酒

<input name="hobby" type="checkbox" value="烫头">烫头

<input name="hobby" type="checkbox" value="睡觉">睡觉

</td>

</tr>

<tr>

<td>

</select>

<span id="gradeMsg">必须要选择一个年级</span>

</td>

</tr>

<tr>

<td>

<span id="emailMsg">请输入正确的邮箱格式</span>

</td>

</tr>

<tr>

<td>

<span id="phoneMsg">请输入正确的电话格式</span>

</td>

</tr>

<tr>

<td>

<span id="bornDateMsg">请输入正确日期格式</span>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</form>

//获取姓名文本框

let name = document.querySelector('#name')

//获取年龄文本框

let age = document.querySelector('#age')

//表单的提交事件

document.querySelector('form').onsubmit = function(){

// 返回true提交表单，返回false不提交表单

if(checkName() &checkAge()){

return true

}else{

return false

}

//姓名文本框失去焦点

name.onblur = checkName

//验证姓名

function checkName(){

//定义验证姓名的正则

let reg = /^[\u4E00-\u9FA5]{2,4}$/

// 调用验证方法

return checkInput("#nameMsg",name,reg,'姓名正确','姓名必须是2-4位汉字')

}

//年龄文本框失去焦点

age.onblur = checkAge

//验证年龄

function checkAge(){

//定义验证年龄的正则

let reg = /^\d{1,2}$|^1([0-1]\d)|20$/

// 调用验证方法

return checkInput("#ageMsg",age,reg,'年龄正确','年龄必须是0-120之间')

}

//验证方法，参数分别是：span元素Id，表单元素对象，正则规则，验证成功消息，验证失败消息

function checkInput(spanId,_this,reg,okMsg,errMsg){

// 获取消息span

let span = document.querySelector(spanId)

//获取信息

let val = _this.value

if(!reg.test(val)){

span.className="err"

span.innerHTML = errMsg

return false //验证失败返回false

}else{

span.className="ok"

span.innerHTML = okMsg

return true //验证成功返回true

}

</script>

</body>

</html>

很明显啊

var age = document.getElementById("age").Value

这个不是纯数字类型啊如何匹配呀

你换成var age = 12；

和var age = asd

分别试试就知道了

给你一个日历控件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>JCalendar 日历控件</title>

#calendar {

border-collapse:collapse

border:1px solid #06C

background-color:#FFF

width:160px

height:120px

font-size:12px

font-family:'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif

cursor:default

}

#calendar td {

text-align:center

vertical-align:middle

font-family:"宋体"

}

#calendar thead {

background-color:#06C

color:#FFF

}

#calendar div {

width:100%

height:100%

}

#calendar caption span {

cursor:pointer

}

#calendar #calendar_title {

cursor:default

}

</style>

/***************************

*JCalendar日历控件

*@author brull

*@email [email]brull@163.com[/email]

*@date 2007-4-16

***************************/

*@param year 年份

*@param month 月份

*@param date 日期

/*如果参数不足三个那么就初始化为当天日期*/

function JCalendar (year,month,date) {

var _date = arguments.length == 0 ? new Date() : new Date(year,month-1,date)

//实例变量

this.year = _date.getFullYear()

this.month = _date.getMonth() + 1

this.fday = new Date(this.year,this.month-1,1).getDay()//每月第一天的前一天星期数

this.dayNum = new Date(this.year,this.month,0).getDate()//每月的天数

//成员变量，当前年月日

JCalendar.cur_year = this.year

JCalendar.cur_month = this.month

JCalendar.cur_date = _date.getDate()

}

JCalendar.prototype.show = function(){

var date = new Array(this.fday >0 ? this.day : 0)//预先定义一段空数组，对应日历里第一周空的位置

var html_str = new Array()

var date_index = 0

var weekDay = ["日","一","二","三","四","五","六"]

for(var j = 1j <= this.dayNumj++){//初始化date数组

date.push(j)

}

html_str.push("<table id='calendar'>")

html_str.push("<caption><span title='上一年份' onmouseover=\"this.style.color='#F90'\" onmouseout=\"this.style.color='#09F'\" onclick=\"JCalendar.update(-12)return false\" style='color:#09Ffont-size:16pxmargin-right:5px'>«</span><span title='上一月份' onmouseover=\"this.style.color='#F90'\" onmouseout=\"this.style.color='#09F'\" onclick=\"JCalendar.update(-1)return false\" style='margin-right:15pxcolor:#09F'>▲</span><span id='calendar_title'>" + this.year + "年" + this.month + "月</span><span title='下一月份' onclick=\"JCalendar.update(1)return false\" onmouseover=\"this.style.color='#F90'\" onmouseout=\"this.style.color='#09F'\" style='margin-left:15pxcolor:#09F'>▼</span><span title='下一年份' onclick=\"JCalendar.update(12)return false\" onmouseover=\"this.style.color='#F90'\" onmouseout=\"this.style.color='#09F'\" style='font-size:16pxmargin-left:5pxcolor:#09F'>»</span></caption>")

html_str.push("<thead><tr>")

for(var i = 0i <7i++){//填充日历头

html_str.push("<td>" + weekDay[i] + "</td>")

}

html_str.push("</tr></thead>")

html_str.push("<tbody>")

for(var i = 0i <6i++){//填充日期

html_str.push("<tr>")

for(var j = 0j <7j++){

tmp = date[date_index++]

tmp = tmp ? tmp : ""

if(JCalendar.cur_date == tmp)

html_str.push("<td><span id='c_today' style='background-color:#036color:#FFF'>" + JCalendar.cur_date + "</span></td>")

else if(tmp == "")

html_str.push("<td></td>")

else

html_str.push("<td><div onmouseover=\"this.style.backgroundColor='#CCC'\" onmouseout=\"this.style.backgroundColor=''\" onclick='JCalendar.click(this)'>" + tmp + "</div></td>")

}

html_str.push("</tr>")

}

html_str.push("</tbody></table>")

return html_str.join("")

}

//静态方法

JCalendar.update = function(_month){

var date = new Date(JCalendar.cur_year,JCalendar.cur_month - 1 + _month,1)

var fday = date.getDay()//每月第一天的星期数

var year = date.getFullYear()

var month = date.getMonth() + 1

var dayNum = new Date(JCalendar.cur_year,JCalendar.cur_month + _month,0).getDate()//每月的天数

var tds = document.getElementById("calendar").getElementsByTagName("td")

for(var i = 7i <tds.lengthi++)//清空日历内容

tds[i].innerHTML = ""

document.getElementById("calendar_title").innerHTML = year + "年" + month + "月"//更新显示年月

//更新当前年月

JCalendar.cur_year = year

JCalendar.cur_month = month

for(var j = 1j <= dayNumj++){

if(j == JCalendar.cur_date)

tds[6 + fday + j].innerHTML = "<span id='c_today' style='background-color:#036color:#FFF'>" + JCalendar.cur_date + "</span>"

else

tds[6 + fday + j].innerHTML = "<div onmouseover=\"this.style.backgroundColor='#CCC'\" onmouseout=\"this.style.backgroundColor=''\" onclick='JCalendar.click(this)'>" + j + "</div>"

}

JCalendar.onupdate(year,month,JCalendar.cur_date)

}

JCalendar.onupdate = function(year,month,date){//日历更改时执行的函数，可以更改为自己需要函数,控件传递过来的参数为当前日期

alert(year + "年" + month + "月" + date + "日")

}

JCalendar.click = function(obj){

var tmp = document.getElementById("c_today")

tmp.parentNode.innerHTML = "<div onmouseover=\"this.style.backgroundColor='#CCC'\" onmouseout=\"this.style.backgroundColor=''\" onclick='JCalendar.click(this)'>" + tmp.innerHTML + "</div>"

JCalendar.cur_date = parseInt(obj.innerHTML)

obj.parentNode.innerHTML = "<span id='c_today' style='background-color:#036color:#FFF'>" + obj.innerHTML + "</span>"

JCalendar.onclick(JCalendar.cur_year,JCalendar.cur_month,JCalendar.cur_date)

}

JCalendar.onclick = function(year,month,date){//点击日期时执行的函数，可以更改为自己需要函数,控件传递过来的参数为当前日期

alert(year + "年" + month + "月" + date + "日")

}</script>

</head>

<body>

/***************说明***************

JCalendar.onclick (year,month,date)//点击日期时执行的静态函数，可以更改(或者覆盖)为自己需要函数,控件传递过来的参数为当前日期

JCalendar.onupdate (year,month,date){//日历更改时执行的函数，可以更改(或者覆盖)为自己需要函数,控件传递过来的参数为当前日期