键盘事件
键盘事件一般要给到document上面
onkeydown 键盘按下
onkeyup 键盘抬起
demo1：
document.onkeydown=function()(
console.log('键盘按下')
)
document.onkeyup=function(){
console.log("键盘松开")
}
键盘按下的时候打印 “键盘按下”
键盘松开的时候打印“键盘松开”
| JavaScript高级 思维导图 H5-前端 |
1906B韩慧涛JavaScript高级月底总结
02、键盘事件、拖拽
02-1键盘事件、拖拽
键盘事件
键盘事件
键盘事件一般要给到document上面
onkeydown 键盘按下
onkeyup 键盘抬起
demo1：
document.onkeydown=function()(
console.log('键盘按下')
)
document.onkeyup=function(){
console.log("键盘松开")
}
键盘按下的时候打印 “键盘按下”
键盘松开的时候打印“键盘松开”
键盘事件对象
键盘事件对象
demo1: 当键盘按下的时候 打印当前按下键位的keycode值 即键码值
document.onkeydown = function(ev){
var event=event||ev //获取形参
console.log(event.keycode)
}
拖拽1
拖拽1
当鼠标按下的时候 记录相对于盒子鼠标的位置
var ent=event||ev;
var disX=ent.clientX-oDiv.offsetLeft;
var disY=ent.clientY-oDiv.offsetTop;
当鼠标移动的时候，盒子的left和top值也跟随移动
document.onmousemove=function(ev ){
var event=event||ev;
var l=ent.clientX-disX;
var t=ent.clientY-disY;
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
}
当鼠标松开的时候 将onmousemove 和onmouseup 全部设置为null； 防止鼠标抬起的时候盒子仍然跟着鼠标移动
doucment.onmouseup = function(){
document..onmouseup = null;
document.onmousemove = null;
}
//拖拽问题总结:
注意:1.move,up事件要给到document文档上,不要给到对象oDiv上,会造成卡顿问题
2.move,up事件要放在down事件内
3.为了防止移动时选中文字，可在按下结束时最后return false
禁止默认事件
禁止默认事件
demo1：如何去除浏览器的默认事件
document.ontextmenu = function(){
alert('我是右键");
return false; //去除默认
}
综合练习
1-键盘控制div盒子运动
键盘控制div运动
思路：上下左右 enter alt ctrl 各个按键的建码
例如：当点击上的时候 div往上运动 (首先 div是要运动的 这边肯定要给到一个定位 position：absolute)
document.onkeydown=function(ev){
var event=event||ev;
如果键码是38的话，box盒子的位置top-10；
}
松开的时候清除事件
其他原理照此
2-键盘提交留言
键盘提交留言
给document绑定一个事件
如果键码是13的时候（enter）
留言保存框 添加一个留言框的内容即可
在思考的过程中 要把兼容性考虑到内
3-键盘控制翻页
思路：定义一个变量now为0 封装一个函数大div的left值为 -640*now+‘px’ 当键码为39的时候 now++ 当键码为37的时候 now--
var now=0;
function tab(){
oUl.style.left= -640*now+"px"
}
document.onkeydown= function(ev){
var oEvt= ev||event;
//console.log(oEvt.keyCode); //右 39 左 37
if(oEvt.keyCode == 39){
now++;
if(now==oUl.children.length)now=0;
tab();
}
if(oEvt.keyCode == 37){
now--;
if(now==-1)now=oUl.children.length-1;
tab();
}
02-2 碰撞检测-交换位置
碰撞检测
碰撞检测条件：
oDiv1:
var l1=oDiv1.offsetLeft;
var r1=oDiv1.offsetLeft+oDiv1.offsetWidth;
var t1=oDiv1.offsetTop;
var b1=oDiv1.offsetTop+oDiv1.offsetHeight;
oDiv2:
var l2=oDiv2.offsetLeft;
var r2=oDiv2.offsetLeft+oDiv2.offsetWidth;
var t2=oDiv2.offsetTop;
var b2=oDiv2.offsetTop+oDiv2.offsetHeight;
碰撞检测-封装
function collTest(oDiv1,oDiv2){
var l1=oDiv1.offsetLeft;
var r1=oDiv1.offsetLeft+oDiv1.offsetWidth;
var t1=oDiv1.offsetTop;
var b1=oDiv1.offsetTop+oDiv1.offsetHeight;
var l2=oDiv2.offsetLeft;
var r2=oDiv2.offsetLeft+oDiv2.offsetWidth;
var t2=oDiv2.offsetTop;
var b2=oDiv2.offsetTop+oDiv2.offsetHeight;
if (l1>r2 ||r1<l2 ||t1>b2 || b1<t2 ) {
return false;
}
else{
return true;
}
}
碰撞检测-互换位置
/*碰撞检测思路:把它们看成九宫格，检测碰不到的条件,拿第1个的上下左右距离窗口位置与第2个下上右左距离窗口位置比较
碰撞检测-多个拖拽
/*碰撞检测思路:把它们看成九宫格，检测碰不到的条件,拿第1个的上下左右距离窗口位置与第2个下上右左距离窗口位置比较
06、offset问题
6-1 offset问题
获取非行间样式
// getComputedStyle(obj,false).样式 //高版本
// obj.currentStyle.样式 //低版本
6-2 懒加载
定义一组图片 用for循环遍历所有图片
当前图片（第i个图片距离浏览器顶部为**PX的时候 替换该图片的data-src）
07、Math对象
6-1 Math简介
做一些跟数学有关运算时用到,它里面封装了很多方法
6-2 Math的运用——随机数
生成随机数 0<=random()<1
// 生成10-100之间的随机数
// document.write(parseInt(Math.random()*(100-10)+10))
//
//封装成工具函数 n<=random()<m
//获得n-m固定范围内的随机数，n代表最小值，m代表最大值
function rnd(n,m){
return parseInt(Math.random()*(m-n)+n)
}
// document.write(rnd(10,50))
document.write(rnd(1,34));
08、Data时间对象
6-1日期对象
日期对象 new Date() object
get == 获取
日期对象.get函数名() 返回 是数字
获取年： 日期对象.getFullYear()
月： 日期对象.getMonth() 月+1(为了显示正确)
号： 日期对象.getDate()
星期: 日期对象.getDay() 0代表周日
小时: 日期对象.getHours()
分钟： 日期对象.getMinutes()
秒： 日期对象.getSeconds()
毫秒： 日期对象.getMillSeconds(); 1s=1000ms
6-2设置日期对象
设置时间对象
date.setFullYear(2018) //设置年,可以给一个参数，代表年
date.setFullYear(2018,0,1)//里面也可以给三个参数代表年,月,日，第一个参数必写，后面可以不写
date.setMonth(2); //设置月
date.setDate(20) //设置日期
2.//复合写法:第一个参数必写，后面可以不写
date.setHours(8,8,8,8) //
6-3日期对象和时间对象的转换
demo：距离指定日期还有多少天
思路：1.获取当前日期 设置指定日期
2.定事件的时间戳减去当前时间的事件戳得到的毫秒数
3.一天等于246060*1000毫秒
4.要多什么单位 用总毫秒数 除以对应的毫秒数取整保留余数即可
ps：取整 parseInte（）
保留余数 %
综合练习
1-今天是星期几
思路：保存一个数组 星期一-星期日
获取当前时间
获取当前时间的星期几
然后对应数组中的项即可
2-系统时间练习
利用定时器 获取当前时间
然后将各个数值通过定时器每隔1秒钟实现赋值给指定的div标签即可 实现**年月**日 *时*分*秒
03、事件绑定
事件绑定
//事件绑定:
//对象.addEventListener(事件名去掉on,function(){}/函数名,false/true); //for 高 false/true false 代表以冒泡形式执行(从里往外执行),true 代表以捕获形式执行(从外住里执行)
事件绑定封装
//通用封装兼容
function addevnt(obj,evt,fn){
if(obj.addEventListener){
obj.addEventListener(evt,fn,false);//兼容高级浏览器
}else{
obj.attachEvent('on'+evt,fn); // 兼容IE 6 7 8
}
}
function show(){
alert('事件1');
}
function show1(){
alert('事件2');
}
addevnt(oBtn,'click',show)
addevnt(oBtn,'click',show1)
解除绑定
//解除绑定
// 对象.removeEventListener(事件名,函数,false) //for 高
// 对象.detachEvent(事件名,函数); //IE8以下
// oBtn.removeEventListener('click',show,false)
//通用兼容性写法
function removeEvnt(obj,evt,fn){
if(obj.removeEventListener){
obj.removeEventListener(evt,fn,false);//兼容高级浏览器
}else{
obj.detachEvent('on'+evt,fn); // 兼容IE 6 7 8
}
}
removeEvnt(oBtn,'click',show1)
事件绑定-阻止默认方法
document.addEventListener('contextmenu',function(ev){
var ent=event||ev;
alert('右键弹出')
// return false; //阻止默认，在事件绑定里不管用
//ent.preventDefault(); //阻止默认,在事件绑定里专用
},false)
匿名函数不能解除绑定
匿名函数不能解绑定.想要解除，起个名字
function show(ev){
var ent=event||ev;
alert('右键弹出')
// return false; //阻止默认，在事件绑定里不管用
ent.preventDefault(); //阻止默认,在事件绑定里专用
}
document.addEventListener('contextmenu',show,false)
//解除绑定
// obj.removeEventListener('事件', 函数,false)
document.removeEventListener('contextmenu', show,false)
事件捕获-冒泡
当点击一个层叠div的时候 打印指定内容的顺序
demo1：
oDiv1.addEventListener('click',function(){
alert(oDiv1.style.background);
},false);
oDiv2.addEventListener('click',function(){
alert(oDiv2.style.background);
},false);
oDiv3.addEventListener('click',function(){
alert(oDiv3.style.background);
},false);
事件捕获-捕获
oDiv1.addEventListener('click',function(){
alert(oDiv1.style.background);
},true);
oDiv2.addEventListener('click',function(){
alert(oDiv2.style.background);
},true);
oDiv3.addEventListener('click',function(){
alert(oDiv3.style.background);
},true);
综合练习
带半透明框的拖拽
思路: 当鼠标按下的时候 声明一个数组保存该数组的原始属性 宽高透明度 并且同时生成一个div
当鼠标移动的时候 生成的一个新的div跟随鼠标移动
当鼠标松开的时候，新的div的left和top值等于鼠标当前 坐标 旧的div消失
09、Json对象
Json对象常见用法
传统方法
function show(){console.log('显示')};
show();
function hide(){console.log('隐藏')
};
hide();
//json数据(后台人员给你的数据)标准要求，要带""双引号
// var json={"name":"小明","age":"16"}
// console.log(json.age)
//json对象的常见用法
var json3={
name:'小明',
job:'前端',
age:23,
relative:[
{age:26,job:'律师', name:'小红'},
{age:24,job:'卖煎饼',name:'翠花'}
]
}
// console.log(json3.relative) //返回的是数组
//遍历内层对象
for (var i = 0; i < json3.relative.length; i++) {
console.log(json3.relative[i])
};
// 遍历最外层
for(var index3 in json3){
console.log(index3+'-'+json3[index3])
}
Json对象数据格式
对象没有.length方法 用for in
var json4 = { 'name' : 'baidu', 'age' : 3, 'fun' : '前端开发' };
数组里带对象 [ {}, {} ]--数组里有2个值,是对象类型
var arr = [
{ 'name' : 'TM', 'age' : 23 },
{ 'name' : 'leo', 'age' : 32 }
];
遍历数组里带对象:第1层遍历数组,然后把数组里的值作为第2层的遍历对象
for (var i = 0; i < arr.length; i++) {
for(var j in arr[i]){
console.log(j,arr[i][j]) //输出每个对应的键,值
}
// 6.遍历对象里带数组
var json5 = {
'url' : [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ],
'text' : [ '小宠物', '图片二', '图片三', '面具' ]
};
遍历
for ( var j in json5 ) {
for ( var i=0; i < json5[j].length; i++ ) {
console.log(j+'-'+ json5[j][i]);
}
}
10、Bom对象
10-1 Bom方法
window.open 打开指定网站
window.open('') 打开空的网站
2.在新打开的窗口里页面显示BMW
var newOpen=window.open('','');
newOpen.document.write('BMW5');
}
3.BOM其它方法
document.write();输出到页面;
window.document.write('bmw'); document的父级就是window
window.confirm(提示信息); //确认消息框
window.confirm('提示用户信息')
window.prompt(提示信息，默认值); //输入消息框
10-2 获取浏览器的版本信息
获取浏览器的版本信息 window.navigator.userAgent
console.log(window.navigator.userAgent)
怎么判断是什么浏览器:chrome,firefox,msie
var brows=window.navigator.userAgent.toLowerCase();/把浏览器版本信息统一转换下小写
if (brows.indexOf('chrome')!=-1) {alert('Chrome浏览器')}
else {alert('其它浏览器')}
10-3 获取url地址信息
window.location 整个url地址信息
window.location.protocol 协议 http:
window.location.host 域名 a.com
window.location.pathname 路径 /app/a.html
window.location.search 数据(url参数) ?a=12
window.location.hash 锚 #1
04、鼠标滚轮
鼠标滚轮事件
//兼容性写法:不同浏览器执行不同方法
//火狐
// if(navigator.userAgent.indexOf('Firefox')!=-1){
// document.addEventListener('DOMMouseScroll',function(){
// alert('火狐')
// },false)
// }
// //IE ,ch
// else{
// document.onmousewheel=function(){
// alert('IE、Chrome')
// }
// }
鼠标滚轮事件-检测方向
//检测方向
//IE、Chrome
//alert(oEvent.wheelDelta);
//下 负(-120)
//上 正(120)
//FF
//alert(oEvent.detail);
//下 正(3)
//上 负(-3)
//检测方向
function fn(ev){
var ent=ev||event; //注意先把传参的写前面
//IE,ch 滚动距离 ent.wheelDelta
// console.log(ent.wheelDelta)
// FF 滚动距离
// console.log(ent.detail)
var down=false;
// IE浏览器
if (ent.wheelDelta) {
// if (ent.wheelDelta<0) {
// down=true;
// alert(down)
// }
// else{
// down=false;
// alert(down)
// };
//三目运算符
down=ent.wheelDelta<0?true:false;
alert(down)
}
鼠标滚动事件-封装
addMouseWheel(odiv1,function(down){
//down=true 往下滚
if(down){
odiv1.style.height=odiv1.offsetHeight+10+'px'
}
//往上滚
else{
odiv1.style.height=odiv1.offsetHeight-10+'px'
}
})
//第一个参数是对象,第二个是回调函数
function addMouseWheel(obj,fnWheel){
if(navigator.userAgent.indexOf('Firefox')!=-1){
obj.addEventListener('DOMMouseScroll',fn,false)
}
//IE ,ch
else{
obj.onmousewheel=fn;
}
//检测方向
function fn(ev){
var ent=ev||event; //注意先把传参的写前面
var down=false;
// IE浏览器
if (ent.wheelDelta) {
//三目运算符
down=ent.wheelDelta<0?true:false;
}
//FF浏览器
else{
//三目运算符
down=ent.detail>0?true:false;
};
//可把需要传出去的值,通过回调函数返回到外面
fnWheel(down); //待执行的方法-回调函数
//业务在变化，要抽出去，函数里面不要在改动
// if (down) {obj.style.height=obj.offsetHeight+10+'px'
// }
// else{
// obj.style.height=obj.offsetHeight-10+'px'
// }
//不让窗口滚动条跟随滚动
ent.preventDefault&&ent.preventDefault();
return false;
}
}
鼠标滚轮事件-应用
var odiv1=document.getElementById('div1');
// addMouseWheel(odiv1,function(down){
// //down=true 往下滚
// if(down){
// odiv1.style.height=odiv1.offsetHeight+10+'px'
// }
// //往上滚
// else{
// odiv1.style.height=odiv1.offsetHeight-10+'px'
// }
// })
//第一个参数是对象,第二个是回调函数
addMouseWheel(odiv1,function(aa){
if(aa){
odiv1.style.height=odiv1.offsetHeight+10+'px';
}
else {
odiv1.style.height=odiv1.offsetHeight-10+'px'
}
})
01、事件对象、放大镜
1-1 什么是事件对象？
事件对象：给某一个元素绑定一个指定事件、该事件可以为onclick onmouseover onmouseout 等等。
1-2 事件冒泡
demo：一个父级box1 中 有一个子集button1
当点击button1的时候弹出（'按钮'）；
当点击box1的时候弹出（‘盒子’）；
事件冒泡： 当点击 button的时候 会弹出“按钮”，随后就会弹出“盒子” 这就是事件冒泡;
打个比方：绑定事件
button1.onclick=function(ev){
var event=event||ev; //获取ev形参
event.cancelBubble=true;
alert("按钮")
}
box1.onclick=functio(){
alert('盒子')
}
ps：按钮在盒子内部
那么，如何阻止事件冒泡呢？
cancelBubble=true；//取消事件冒泡
1-3 放大镜
放大镜的思路
if(l<0) l=0;
if(l>oDiv.offsetWidth-oMask.offsetWidth){
l= oDiv.offsetWidth-oMask.offsetWidth;
}
if(t<0) t=0;
if(t>oDiv.offsetHeight-oMask.offsetHeight)
t=oDiv.offsetHeight-oMask.offsetHeight;
4. 放大镜核心原理：滤镜mask坐标/小图移动距离(小图宽-滤镜宽)=大图坐标/大图移动距离(大图宽-大取景框宽)
a/b = c/d
c =a/b*d
img.left=mask.left/(div.w-mask.w) * (img.w-bigDiv.w)
大图在小容器里，坐标为负
img.left = -mask.left/(div.w-mask.w) * (img.w-bigDiv.w)
综合练习
1-盒子跟随鼠标移动
盒子跟随鼠标移动
1.因为盒子要移动 首先要给到盒子 一个postion：absolute top：0 left：0；
2.当鼠标移动的时候 获取当前鼠标的X坐标和Y坐标
document.onmouseve=function(ev){
var event=event||ev; //获取形参 兼容性
console.log(event.clientX,event.clientY) //备用
box.style.left = event.clientX; //
box.style.top = event.clientY; //
//以上方法实现的效果 鼠标不在盒子的中心
//解决问题
box.style.left = event.clientX-box.offsetWidth/2+'px';
box.style.top = event.clientY-box.offsetHeight/2
+'px';
(用当前鼠标的坐标减去盒子宽高的一半 加上单位即可)
2-时间冒泡练习-城市选择
思路：用到了onclick事件 document的onclick事件
阻止事件冒泡事件
点击选择城市的时候 选择框的display开始出现
点击页面中空白的地方 选择框display变为none
阻止事件冒泡事件： 点击选择框中li标签空白的时候 选择框不消失。
05、事件委托
1.什么是事件委托：利用冒泡的特点，把子级事件加到父级上，由父级统一执行效果
2比较.传统方法的事件委托缺点：慢、浪费资源
3.怎么用：事件委托:利用冒泡的原理，把事件加到父级上，触发执行效果
11、cookie
11-1 cookie用法
1.cookie 设置：以键(名称)和值形式存储的,
document.cookie='user=kuige';
读取
alert(document.cookie);
设置的时候只能写一个,如果有多个值需要分开单独设置
document.cookie="user1=aaa;";
document.cookie="password=123456;";
2.cookie过期
cookie过期时间(或者删除) ，通过expires=时间设置，如果不设置，浏览器关闭cookie消失
var now=new Date();
now.setDate(now.getDate()+30)//设置多少天后
document.cookie="user1=aaa;expires="+now; //30天cookie自动过期，消失
11-2 cookie封装
1.封装cookie
function getCookie(name)
{
//'username=abc; password=123456; aaa=123; bbb=4r4er'
var arr=document.cookie.split('; '); //获取cookie后分割
var i=0;
//arr->['username=abc', 'password=123456', ...]
for(i=0;i<arr.length;i++)
{
//arr2->['username', 'abc']
var arr2=arr[i].split('=');
if(arr2[0]==name)
{
return arr2[1];
}
}
return '';
}
2.删除cookie
function removeCookie(name){
setCookie(name,'',-1)
}
setCookie('username','dashuaige',30);
alert(getCookie('username'))
removeCookie('username')
alert(getCookie('username'))
11-3 cookie封装调用
上一节我们已经封装好了 cookie的函数
使用的时候 直接调用 即可
setCookie('username','dashuaige',30);
alert(getCookie('username'))
removeCookie('username')
alert(getCookie('username'))
12、正则表达式-1
12-1 字符串复习
//字符串方法
//1. str.split('分割符') 分割,返回数组
//2. str.slice(start,end) 切割,返回切割出来的字符 同样方法: substring(start,end)
var str='abcdefg';
console.log(str.slice(1,3)) //bc
//3. str.replace(老的,新的)
var str1='abc';
console.log(str1.replace('b','d')) //adc
//4.str.toLowerCase()/toUpperCase() 转换小写/大写
//5. str.search('字符') 查找字符，返回位置 = str.indexOf('字符') ;找不到返回-1
console.log(str.search('e')) //4
console.log(str.match('e')) //match匹配,查找,返回是数组 ["e", index: 4, input: "abcdefg"]
//6. str.charAt(数字) 返回字符
console.log(str.charAt(2)) //c
12-2 正则用法
//用法1.实例化
var reg=new RegExp('规则','选项');
//用法2.字面量 -常用
var reg1=/规则/选项; //选项:相当于给规则加条件
// 选项常用符号:
// i Ignore(忽略大小写)
// g global (通篇，所有，全局)
// m muti-line(多行模式)
前期 综合练习
综合练习 过滤敏感词
demo1：
var str='章泽天爱称"奶茶妹",1993年11月18日出生于南京网络红人2009年因一张手捧奶茶的照片走红网络，被称为"奶茶妹妹"';
var reg3=/奶茶妹|奶茶妹妹/g; //| 或
console.log(str.replace(reg3,'*'))
//replace(老的,新的) 替换字符
12、 正则表达式-2
12-2-1 转义符
量词：数量 n==数字
x{数量} 找的是x，多少？花括号里写数量
x{n} 要找的x必须正好是n个
x{n,m} 要找的x最少n个，最多m个
x{n,} 要找的x最少n个，最多不限
x{0,m} 要找的x最少0个，最多m个
+ 至少一次 多了不限 {1,}
* 任意个数量 不推荐用
? 要么有，要么无 {0,1}
* .任意单个字符
//转义符 <小于号 > 大于号 空格
// \" 代表" 双引号的一半, \' 代表单引号
12-2-2 常见的正则表达式
18位是校验码
验证手机号码
移动号码段:139、138、137、136、135、134、150、151、152、157、158、159、182、183、187、188、147
联通号码段:130、131、132、136、185、186、145
电信号码段:133、153、180、189
/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\\d{8}$/
或
/^1[3|4|5|8][0-9]\d{4,8}$/
验证座机号码：
验证规则：区号+号码，区号以0开头，3位或4位 号码由7位或8位数字组成 区号与号码之间可以无连接符，也可以“-”连接
/^0\d{2,3}-?\d{7,8}$/
腾讯QQ号：[1-9][0-9]{4,}
规则：腾讯QQ号从10000开始
匹配特定数字： ^[1-9]/d*$
//匹配正整数 ^-[1-9]/d*$
//匹配负整数 ^-?[1-9]/d*$
//匹配整数 ^[1-9]/d*|0$
//匹配非负整数（正整数 + 0） ^-[1-9]/d*|0$
//匹配非正整数（负整数 + 0） ^[1-9]/d*/./d*|0/./d*[1-9]/d*$
//匹配正浮点数 ^-([1-9]/d*/./d*|0/./d*[1-9]/d*)$
//匹配负浮点数 ^-?([1-9]/d*/./d*|0/./d*[1-9]/d*|0?/.0+|0)$
//匹配浮点数 ^[1-9]/d*/./d*|0/./d*[1-9]/d*|0?/.0+|0$
//匹配非负浮点数（正浮点数 + 0） ^(-([1-9]/d*/./d*|0/./d*[1-9]/d*))|0?/.0+|0$
//匹配非正浮点数（负浮点数 + 0）
匹配特定字符串：
^[A-Za-z]+$ //匹配由26个英文字母组成的字符串
^[A-Z]+$ //匹配由26个英文字母的大写组成的字符串
^[a-z]+$ //匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$ //匹配由数字和26个英文字母组成的字符串
^\w+$ //匹配由数字、26个英文字母或者下划线组成的字符串
匹配中文字符的正则表达式： [/u4e00-/u9fa5]
匹配双字节字符(包括汉字在内)：[^/x00-/xff]
匹配空行的正则表达式：/n[/s| ]*/r
匹配HTML标记的正则表达式：/<(.*)>.*<///1>|<(.*) //>/
匹配首尾空格的正则表达式：(^/s*)|(/s*$)
匹配Email地址的正则表达式：/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*
匹配网址URL的正则表达式：http://([/w-]+/.)+[/w-]+(/[/w- ./?%&=]*)?