正则的注意事项

2017-01-18 本文已影响20人夜幕小草

1、var p=document.body.children[0];
var str=p.innerHTML;
var reg=/\bthe\b|\bis\b|\bof\b|\bthat\b/ig;
//需求：我需要选中所有的the单词和is单词和of单词并且把他们相应的变红；
str=str.replace(reg,function(w){    
    return '<span>'+w+'</span>'
});
// function(w){}中的w是一个一个地传进去
p.innerHTML=str;

首字符大写
var p=document.body.children[0];
var str=p.innerHTML;
var reg=/\b\w+\b/ig;
str=str.replace(reg,function(w){    
    return w.charAt(0).toUpperCase()+w.slice(1);
})
p.innerHTML=str

验证邮箱与网站
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.w{ color:red;}
.r{ color:green;}
</style>
</head>

<body>
<input type="text"><span>请输入邮箱</span>

<script>
var txt=document.body.children[0];
var ospan=document.body.children[1];

txt.onblur=function(){  
    var str=txt.value;
    //var reg=/^\w+@[0-9a-z-]+\.\w{2,4}$/ig;
    var reg=/^(http(s)?:\/\/)?(www\.)?[0-9a-z-]+\.\w{2,4}$/ig
    var bl=reg.test(str);
    if(bl){ 
        ospan.innerHTML='<b class="r">正确</b>'
    }else
    {   
        ospan.innerHTML='<b class="w">错误</b>'
    }
}

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

获取时间戳
document.write(+new Date())

css转json
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style id="css">
.banner{ width:1200px; height:360px; margin:100px auto; border: 1px solid #000; position:relative; overflow:hidden;}
.banner div{ position:relative;}
.banner span{ width:100px; height:100%; position:absolute; background:url(images/zuo.png) no-repeat center center; z-index:100; cursor:pointer;}
.banner span:last-child{ background-image:url(images/you.png); right:0; }
.banner img{ height:360px; width:auto; position:absolute; left:0; top:0;}
</style>

</head>

<body>

<script>
var str=document.getElementById('css').innerHTML;
var reg=/\{[^\{\}]+\}/ig
str=str.replace(/;/ig,',');
str=str.match(reg);
str.some(function(e){
    document.write(e+'<br>')
})
</script>
</body>
</html>

2
【正则表达式】
《简介》
什么是正则表达式？
正则表达式就是用来选择字符串的一些规则。
正则的作用是什么？
选择字符串并对字符串数据进行修改和处理，验证字符串数据。

《正则的创建方式》
字面量方式
var reg=/abc/ig;
构造函数形式：
var reg=new RegExp();
接受两个参数：参数1表示正则选择器。参数2表示正则的修饰符；
修饰符：
i表示忽略大小写。
g表示全局搜索。
不区分前后顺序。
构造函数形式创建的正则有一个不可替代的好处，就是它的正则规律可以接受变量。字面量形式的正则无法接受任何变量。
《选择器分类》
简介：由于正则就是用来选择字符串的所以它的内部有很多选择字符串用的规则，这些规则都是一些简写。一共分为三大类型。分别是：
*大中小括号
*量词分类
*元字符

《大中小括号选择》
*中括号
中括号在正则中主要表示三种关系，或且非；
或关系
[abc] 表示选择a或者b或者c
[ a ] 表示选择空格或者a或者空格，正则中不要轻易加空格。
且关系
[0-9] 表示0到9的所有数字
[a-z] 表示所有的小写字母
[A-z] 表示所有字母并且还包含下划线
非关系
[^a] 表示除a以外的所有字符；
[^abc] 表示除a或b或c以外的所有字符。
[^0-9] 表示除数字以外的所有字符
[^a-z] 表示除所有小写字母外的字符
*大括号：
表示一种数量关系，表示的是前面字符的总个数；
/aaa/ == /a{3}/
{5,8} 表示5-8个
{3,} 表示最少3个；
{0,3} 表示最多3个。

小括号：
作用表示分组或；
(abc|xyz|jqk) 表示查找竖线之间的每个小组。

总结一句话：中非或大叔小分队
《元字符》
简介：什么是元字符它是正则中，中括号的一种简写。对于所有的元字符来讲都是符号比较难以记忆。最终记住一句话就行了。拿我的鼠标垫 = nwdsb.

\n 表示字符串换行；
\w 表示单词w就是word 它代表所有的数字字母加下划线。
\d 表示数字；相当于 [0-9]
\s 表示单词space空间；代表所有的空白符；
\b 表示单词边界
. 表示正则中的通配符什么都算。尽量不要用

其中有一个规律 wdsb这几个符号如果写成大写表示非本类。例如 \D 表示非数字 \w非单词

《量词》
简介：量词是干什么的，在正则中所有的量词都是大括号的一种简写，表示数量的多少。

这是正则中最常用的一个量词表示{1,} 最少一个；
? 表示{0,1} 要么有，要么没有。

表示任何数量。{0,}
^ 表示以什么开头。
$ 表示以什么结尾。（昵称就是鱼头鱼尾符号）
?! 表示后面不能紧挨着某个字符；
?= 表示后面必须紧挨着某个字符；

正则的注意事项

猜你喜欢

热点阅读