正则的创建方式
// 1.字面量方式
var expression = /pattern/flags; // flags为查找的规则
var demo = /\d\d\d/; // 匹配连续3位数字
// 2.构造器方式
var expression = new RegExp('要匹配的字符串', flags)； // flags可以是igm
正则字符的类型
正则表达式由两种基本字符类组成
- 原义文本字符
- 元字符（元字符是在正则表达式中有特殊含义的非字母字符，如.*+?^等）
正则对象中的方法
compile(string) //改变正则的匹配规则
exec(string) //如果匹配就返回一个数组，不匹配就返回null
test(string) //返回Boolean值 true 或 false
toString() //以字符串的方式返回正则对象本身
// 1.compile
var reg = /abc/;
reg.compile("def");
reg.test("def"); //true
// 如原来要检索wolf,但是我现在不想了，要检索ol
var regexpInstance = /wolf/;
regexpInstance.compile('ol');
// 2.exec(string)
// string为要检索的字符串，
// 返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null
/abc/.exec("accbabcdddabccababc"); // ["abc", index: 4, input: "accbabcdddabccababc"]
// 3.test
/abc/.test("abcde"); // true
/f/.test("abcde"); // false
var str = '我是一匹来自北方的wolf';
var regExpInstence = /wolf/;
var value = regExpInstence.test(str);
console.log(value); // true
// 4.toString
/abc/.toString(); // "/abc/"
正则对象检索修饰符
- global 全局查找
- ignoreCase 忽略大小写
- multiline 可换行查找（多行搜索）
/abc/gim.test("ABC"); // true
RegExp("abc","mgi");
正则表达式基本语法
^代表以什么什么开始。如"^The"：表示所有以"The"开始的字符串（"There"，"The cat"等）$代表以什么什么结束。如"of despair$"：表示所以以"of despair"结尾的字符串g代表全局匹配，知道找完字符串i代表忽略大小写? - 最多一次匹配（零次或一次匹配）- ``+ - 至少一次匹配（一次或更多次匹配）`
-
\bis\b单词分割线[abc][]是字符类，每个字符代表某一类，即a或b或c中任意一类都可以被匹配[^abc]不匹配a或b或c类，其他的都匹配[a-z]中横线-是范围类，通过中横线-可以实现范围
1.匹配与.xxx结尾的/\.(png|jpg|gif|svg)$/
var arr = ["123.png","456.jpg","789.gif","000.svg"];
arr.forEach(function(item, index){
if (item.test(/\.(png|jpg|gif|svg)$/)) {
//符合规则后执行后面的逻辑
}
})
2.不区分大小写/a/gi
// 查找字符串中有多少个a,忽略大小写
var str = 'wsyzxxxxnaDdA';
str.match(/a/gi); // ["a", "A"]
正则对象的区别
全局正则对象和非全局正则的区别
与正则相关的字符串方法
- String.prototype.search
- String.prototype.replace
- String.prototype.match
- String.prototype.split
// 1. match(/regExp/g) :返回一个包含匹配内容的数组或null
// 2. search(string/regExp)：如果使用字符串作为参数，会自动转换为正则表达式。返回第一个匹配内容所在的位置
// 3. replace(string/regExp ， newValue):将匹配的文本替换成指定的字符串
// 4. split()：将目标字符串分割成若干个数组元素
案例
1. 全局检索字符串中是否存在某个值
// regExpInstance.exec(str)
var str = '我是一只小啊小啊鸟，想要飞啊飞啊非更高啊啊啊啊啊!';
function checkString (str) {
var result;
var arr = [];
var regExp = new E;
while((result = regExp.exec(str)) != null){
arr.push(result);
}
return arr;
}
2. 查找数字
/\d\d\d/.test("123"); // true
/\d\d\d/.test("abc"); // false
new RegExp("Bosn").test("Hi,Bosn"); // true
new RegExp("Bosn").test("Hi,bosn"); // false
3. 验证input表单元素中的值，限定为1 ~ 100之间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>输入验证</title>
<style type="text/css">
.outer_big_box {
padding-left: 200px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]{
-moz-appearance: textfield;
padding-left: 8px;
}
.input_wrap {
position: relative;
}
.input_validation_tip_box {
border: 1px solid red;
display: none;
padding: 5px 15px;
position: absolute;
left: -30%;
top: 130%;
}
.input_validation_tip_box .arrow {
width: 10px;
height: 10px;
border-left: 1px solid red;
border-top: 1px solid red;
position: absolute;
top: -6px;
left: 50%;
background-color: #fff;
transform: rotate(45deg);
}
.hide_tip_box {
display: none;
}
.show_tip_box {
display: block;
}
</style>
</head>
<body>
<div class="outer_big_box">
<div class="input_wrap">
<input type="number" class="number_validation"/>
<div class="input_validation_tip_box">
<span class="arrow"></span>
<span>请输入0~100之间的值</span>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$('.input_wrap').on('input', '.number_validation',function(){
var $this = $(this);
var val = $this.val();
var reg = /^((\d{1,2})(\.\d+)?|(0+(\d{1,2})(\.)?\d+)|(0+100(\.)0+)|100|100(\.[0]+))$/;
// var flag = (0 <= val && val <= 100) ? true : false;
// if (!flag) {
if (!reg.test(val)) {
// 显示
$('.input_validation_tip_box').removeClass('hide_tip_box');
$('.input_validation_tip_box').addClass('show_tip_box');
}else {
// 隐藏
$('.input_validation_tip_box').removeClass('show_tip_box');
$('.input_validation_tip_box').addClass('hide_tip_box');
}
if (val == '') {
$('.input_validation_tip_box').removeClass('show_tip_box');
$('.input_validation_tip_box').addClass('hide_tip_box');
}
});
});
</script>
</html>
4. 找英文单词
全局查找某个英文单词，必须是单独的单词才正确，包含在其他单词中是错误的
\b为单词分割线
// 通过构造函数创建正则表达式时需要将反斜杠转义
// var reg = new RegExp('\\bis\\b', 'g');
var reg = /\bis\b/g; // 全局查找is单词
var str = "He is a boy. This is a dog. Where is she?";
str.replace(reg, 'IS'); // 将字符串中的is代替为大写的IS
网友评论