正則的創(chuàng)建方式
// 1.字面量方式
var expression = /pattern/flags; // flags為查找的規(guī)則
var demo = /\d\d\d/; // 匹配連續(xù)3位數(shù)字
// 2.構(gòu)造器方式
var expression = new RegExp('要匹配的字符串', flags)沃斤； // flags可以是igm
正則字符的類型
正則表達式由兩種基本字符類組成
- 原義文本字符
- 元字符（元字符是在正則表達式中有特殊含義的非字母字符缠劝，如.*+?^等）
正則對象中的方法
compile(string) //改變正則的匹配規(guī)則
exec(string) //如果匹配就返回一個數(shù)組疆偿，不匹配就返回null
test(string) //返回Boolean值 true 或 false
toString() //以字符串的方式返回正則對象本身
// 1.compile
var reg = /abc/;
reg.compile("def");
reg.test("def"); //true
// 如原來要檢索wolf,但是我現(xiàn)在不想了响谓，要檢索ol
var regexpInstance = /wolf/;
regexpInstance.compile('ol');
// 2.exec(string)
// string為要檢索的字符串映凳，
// 返回一個數(shù)組州弟，其中存放匹配的結(jié)果速挑。如果未找到匹配暇咆，則返回值為 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"等）$代表以什么什么結(jié)束爸业。如"of despair$"：表示所以以"of despair"結(jié)尾的字符串g代表全局匹配其骄，知道找完字符串i代表忽略大小寫? - 最多一次匹配（零次或一次匹配）- ``+ - 至少一次匹配（一次或更多次匹配）`
- ?
\bis\b單詞分割線[abc][]是字符類，每個字符代表某一類扯旷，即a或b或c中任意一類都可以被匹配[^abc]不匹配a或b或c類拯爽，其他的都匹配[a-z]中橫線-是范圍類，通過中橫線-可以實現(xiàn)范圍
1.匹配與.xxx結(jié)尾的/\.(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)$/)) {
//符合規(guī)則后執(zhí)行后面的邏輯
}
})
2.不區(qū)分大小寫/a/gi
// 查找字符串中有多少個a,忽略大小寫
var str = 'wsyzxxxxnaDdA';
str.match(/a/gi); // ["a", "A"]
正則對象的區(qū)別
全局正則對象和非全局正則的區(qū)別
與正則相關(guān)的字符串方法
- String.prototype.search
- String.prototype.replace
- String.prototype.match
- String.prototype.split
// 1. match(/regExp/g) :返回一個包含匹配內(nèi)容的數(shù)組或null
// 2. search(string/regExp)：如果使用字符串作為參數(shù)钧忽，會自動轉(zhuǎn)換為正則表達式毯炮。返回第一個匹配內(nèi)容所在的位置
// 3. replace(string/regExp ， newValue):將匹配的文本替換成指定的字符串
// 4. split()：將目標字符串分割成若干個數(shù)組元素
案例
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. 查找數(shù)字
/\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為單詞分割線
// 通過構(gòu)造函數(shù)創(chuàng)建正則表達式時需要將反斜杠轉(zhuǎn)義
// 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
