什么是正则表达式
- 正则表达式(Regular Expression)是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。在很多文本编辑器里，正则表达式通常被用来检索、替换那些符合某个模式的文本。
正则表达式
- 描述字符串规则的表达式
- 直接量
/12345//yym/i
var reg = new RegExp
- 直接量
- RegExp实例对象有五个属性
-
g:global：是否全局搜索，默认是false -
i:ignoreCase：是否大小写敏感，默认是false -
m:multiline：多行搜索，默认值是false -
lastIndex：是当前表达式模式首次匹配内容中最后一个字符的下一个位置，每次正则表达式成功匹配时，lastIndex属性值都会随之改变 -
source：正则表达式的文本字符串
-
regexObj.test(str)
- 测试字符串参数中是否存正则表达式模式，如果存在则返回true，否则返回false
var reg = /\d+\.\d{1,2}$/g;
reg.test('123.45'); //true
reg.test('0.2'); //true
reg.test('a.34'); //false
reg.test('34.5678'); //false
/1352648/.test('1352648') //true
/1352648/.test('13526478') //false
/1352648/.test('x1352648y') //true 为什么是true呢?
/^1352648$/.test('x1352648y') //false
看一个示例:
//获取焦点
<input type="text" onblur="check(this)" onfocus="reset(this)">
<script>
function check(mobileInput){
//用户输入的值
var value = mobileInput.value;
//判断是否等于用户输入的值
if(!/13566668888/.test(value)){
mobileInput.style.borderColor = 'red';
}
}
function reset(mobileInput){
mobileInput.style.borderColor = '';
}
</script>
锚点(边界)
- 匹配一个位置
-
^ :起始位置 -
$ :结尾位置 -
\b :单词边界 -
\B :非单词边界
-
/^http:/.test("http://www.163.com") //true
/^http:/.test("ahttp://www.163.com") //false
/^http:/.test("ht//www.163.com") //false
/\.jpg$/.test('a.jpg') //true
/\.jpg$/.test('a.jpg abc') //false
//单词边界就是看起来像一个独立的单词
/\bis\b/.test('this') //false is没有边界
/\bis\b/.test('that is yym') //true is有单词边界
('that is yym').match(/\bis\b/) //["is", index: 5, input: "that is yym"]
('this').match(/\bis\b/) //null
question:
var str = 'header clearfix active header-fixed'
str.match(/(^|\s)header($|\s)/g) //["header "]
看一个示例
<input type="text" id="mobile" onblur="check(this)" onfocus="reset(this)">
<script>
function check(mobileInput){
var value = mobileInput.value;
//和上面示例的区别多了锚点^ $,测试开头和结尾
if(!/^13566668888$/.test(value)){
mobileInput.style.borderColor = 'red';
}
}
function reset(mobileInput){
mobileInput.style.borderColor = '';
}
</script>
字符类
- 匹配一类字符中的一个
-
[abc]:a或b或c -
[0-9]:一个数字-
[^0-9]:非数字的一个字符,^写在[]表示非
-
-
[a-z]:一个字母 -
. :点号任一字符(换行除外)
-
- 使用元字符
[]来构建一个简单的类
/[0-9]/.test('123') //true
/[0-9]/.test('123ab') //true
/[0-9]/.test('abc') //false
/[^0-9]/.test('abc') //true
/[a-z]/.test("abc") //true
/[a-z]/.test("123") //false
/./.test("123abc") //true
/./.test("%%$$&&**") //true
学了字符类,我们看看我们上面你的例子怎么写
<input type="text" id="mobile" onblur="check(this)" onfocus="reset(this)">
<script>
function check(mobileInput){
var value = mobileInput.value;
//这样我们就可以测试用户输入的任意数字了,但是是不是太多了?
if(!/^1[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/.test(value)){
mobileInput.style.borderColor = 'red';
}
}
function reset(mobileInput){
mobileInput.style.borderColor = '';
}
</script>
元字符
^ $ .
| 字符 | 等价类 | 含义 |
|---|---|---|
\d |
[0-9] |
数字字符 |
\D |
[^0-9] |
非数字字符 |
\s |
[\t\n\x0B\f\r] |
空白符 |
\S |
[^\t\n\x0B\f\r] |
非空白符 |
\w |
[a-zA-Z_0-9] |
单词字符，字母、数字下划线 |
\W |
[^a-zA-Z_0-9] |
非单词字符 |
/\d/.test("123") //true
/\d/.test("123abc") //true
/\D/.test("123abc") //true
/\D/.test("123") //false
/\s/.test('\t') //true
/\s/.test(' ') //true
/\s/.test('123abc') //false
/\S/.test('\t') //false
/\S/.test('abc123') //true
/\S/.test('$%^&') //true
/\w/.test('$%^') //false
/\w/.test('ABaz') //true
/\w/.test('123') //true
/\W/.test('123') //false
/\W/.test('$%^') //true
看上一个例子,又可以变成下面这样:
<input type="text" id="mobile" onblur="check(this)" onfocus="reset(this)">
<script>
function check(mobileInput){
var value = mobileInput.value;
//用元字符/\d/来表示数字,简单了一些
if(!/^1\d\d\d\d\d\d\d\d\d\d$/.test(value)){
mobileInput.style.borderColor = 'red';
}
}
function reset(mobileInput){
mobileInput.style.borderColor = '';
}
</script>
量词
- 出现的次数
| 字符 | 含义 |
|---|---|
? |
出现零次或一次（最多出现一次） |
+ |
出现一次或多次（至少出现一次） |
* |
出现零次或多次（任意次） |
{n} |
出现n次 |
{n,m} |
出现n到m次 |
{n,} |
至少出现n次 |
/\d*/.test("abc") //true
/\d+/.test("abc") //false
/\d+/.test("abc1") //true
/https?:/.test("http://www.163.com") //true
/https?:/.test("https://www.163.com") //true
/https?:/.test("httpsss://www.163.com") //false
上面那个例子,学了量词,又能写成什么样子呢?
<input type="text" id="mobile" onblur="check(this)" onfocus="reset(this)">
<script>
function check(mobileInput){
var value = mobileInput.value;
//使用量词,代码少了
if(!/^1\d{10}$/.test(value)){
mobileInput.style.borderColor = 'red';
}
}
function reset(mobileInput){
mobileInput.style.borderColor = '';
}
</script>
chrome测试
chrome测试
chrome测试
global(全局)
/./g
转义符
\
多选分支(或)
|
/thi(c|n)k/ === /thi[cn]k/
/\.jpg|png|jpeg|gif/ //可选jpg结尾的图片格式,也可以是png和其它两种
/(.+)@(163|126|188)\.com$/ //网易邮箱163或126或188都可以
捕获(分组)
- 保存匹配到的字符串,日后再用
-
() :捕获 -
(?:) :不捕获
我们希望使用量词的时候匹配多个字符，而不是像上面例子只是匹配一个，比如希望
匹配Byron出现20次的字符串，我们如果写成 Byron{20} 的话匹配的是Byro＋n出现20次
Byron{20}
怎么把Byron作为一个整体呢？使用()就可以达到此目的，我们称为分组
(Byron){20}
str.search(reg)
-
search()方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串 - search() 方法不执行全局匹配，它将忽略标志g，它同时忽略正则表达式对象的lastIndex属性，并且总是从字符串的开始进行检索，这意味着它总是返回字符串的第一个匹配的位置
'a1b2c3'.search(/\d/g); //1
'a1b2c3'.search(/\d/); //1
str.match(RegExp)
- 获取匹配的字符串
var url = 'http://blog.163.com/album?id=1#comment';
var arr = url.match(/(https?:)\/\/([^\/]+)(\/[^\?]*)?(\?[^#]*)?(#.*)?/);
// var arr = url.match(/(https?:)\/\/([^\/]+)([^\?]*)([^#]*)(.*)/);
console.log(arr);
str.replace(regexp,replacement)
- 替换一个字符串
'abcabcabc'.replace('bc','X'); //aXabcabc
'abcabcabc'.replace(/bc/g,'X'); //aXaXaX
'abcaBcabC'.replace(/bc/gi,'X'); //aXaXaX
str.split(reg)
- 使用split方法把字符串分割为字符数组
'a,b,c,d'.split(','); //["a", "b", "c", "d"]
'a1b2c3d'.split(/\d/); //["a", "b", "c", "d"]
