42-JavaScript-正则表达式

最新推荐文章于 2022-08-19 21:50:02 发布

forwardNow

最新推荐文章于 2022-08-19 21:50:02 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： JavaScript 正则表达式

本文链接：https://blog.csdn.net/wuqinfei_cs/article/details/17856103

版权

前端专栏收录该内容

268 篇文章 0 订阅

订阅专栏

1. 引入

1) 在一个字符串中找到连续的四个数字
2) 验证邮箱身份证号等格式是否合法

RegExp对象(Regular Expression), 是对字符串执行模式匹配的强大工具.

1.2 基本概念

指一个用来描述或匹配一系列符合某个语法规则的字符串的单个字符串.
在很多文本编辑器或其他工具里,
正则表达式通常被用来检索或替换那些符合某个模式的文本内容.
许多程序设计语言都支持正则表达式来对字符串进制操作.

所谓正则表达式,
就是用某种某事去匹配一类字符串的公式.
在JS中, 一个正则表达式即为 RegExp类的一个对象.

1.3 格式

1) 隐式 /pattern/[flag]

var regExp = /正则表达式/gi;

2) 显示 new RegExp("pattern"[, "flag"] )

var regExp = new RegExp("正则表达式", "gi");

3) 注

g, global, 找到后继续往下找;
i, ignore, 忽略大小写;
m, multiline, 考虑换行,如查找那些以"A"打头的行.

3) 示例

var numsReg = /(\d){4}/gi ;
var numsReg = new RegExp("(\\d){4}", "gi") ; // 反斜线需转义

1.4 例子

<html>
<body>
    <textarea id="content" rows='5' cols="50"></textarea> <br/>
    <button οnclick="checkByRegExp()">Test</button> <br/>
    <select id="show" size="10"><option>----Index</option></select>
</body>
</html>
<script type="text/javascript">
    
    var content;
    var show;

    content = document.getElementById("content");
    show = document.getElementById("show");

    // 筛选出连续的四个数字 
    // var numsReg = /(\d){4}/gi  ;
    var numsReg = new RegExp("(\\d){4}", "gi") ;

    function checkByRegExp() {

        // console.info(content.value);

        var matchStr = null;;
        // console.info( matchStrings );


        while( (matchStr = numsReg.exec( content.value )) ) {
            // console.info( matchStr[0] );
            show.appendChild( new Option(matchStr[0] + "---" + matchStr[1]) );
        }


    }


</script>

2. 详解

- 正则表达式的概念
- 正则表达式对象(RegExp对象)
- RegExp的方法
- String对象中与正则表达式有关的方法
- RegExp的属性
- 正则表达式的语法
- 实际应用案例

2.1 RegExp的方法

1) exec(string)

检索字符串, 有则返回数组, 无则返回null

2) test(string)

检索字符串是否匹配模式, 有则返回true, 无则返回false

<script type="text/javascript">
    
    var charsReg = /abc/gi ;

    console.info( "ab?  " + charsReg.test("ab") );
    console.info( "abc? " + charsReg.test("abc") );
/*    
    ab?  false
    abc? true
*/
</script>

2.2 与String对象相关的方法

1) match(regExp)

返回数组(所有找到的子串组合成的数组)

2) search(regExp)

返回第一个符合的子串的位置, 无则返回-1

3) replace(regExp, replaceString)

4) split(regExp)

5) 举例

<script type="text/javascript">
    
    var str = "a1b2c3d4e5";
    var regExp = /\d/g;

    console.info( str.match(regExp) ); 
    // ["1", "2", "3", "4", "5"]

    console.info( str.search(regExp) ); 
    // 1

    console.info( str.replace(regExp, "X") );
    // aXbXcXdXeX

    console.info( str.split(regExp) );
    // ["a", "b", "c", "d", "e", ""]

</script>

2.3 RegExp对象的属性

2.3.1 静态属性与实例属性

静态属性是属于 RegExp类的;
示例属性是属于 RegExp对象的.

2.3.2 静态属性

1) index

当前模式匹配到的第一个串的索引;没匹配到则为-1.
IE支持,FireFox不支持.

2) lastindex

当前模式匹配到的第一个串的后一个字符的索引;否则为0.

3) input

返回当前所作用的字符串.

4) leftContext

当前模式匹配到的最后一个串的左边所有内容

5) rightContext

6) 示例

<script type="text/javascript">
    
var str = "01abc5abc9";

var regExp = /abc/gi;

console.info( regExp.exec( str ) );
// console.info( RegExp.index );
console.info( RegExp.leftContext );
console.info( RegExp.rightContext );

console.info( regExp.exec( str ) );
console.info( RegExp.leftContext );
console.info( RegExp.rightContext );

/*
    ["abc"]
    01
    5abc9
    ["abc"]
    01abc5
    9
*/


</script>

2.3.3 示例属性

1) global : 创建对象时,是否指定了global

2) ignoreCase

3) multiline

4) source : 返回模式字符串

5) 示例

<script type="text/javascript">
    
var str = "01abc5abc9";

var regExp = /abc/gi;

console.info( regExp.global );
console.info( regExp.ignoreCase );
console.info( regExp.multiline );
console.info( regExp.source );

/*
    true
    true
    false
    abc
*/
</script>

2.4 子表达式捕获反向引用

2.4.1 概念

如图

1) 子表达式

用圆括号括起来的一个比较复杂的匹配模式,
该圆括号部分称之为 ~.

2) 捕获

多个子表达式锁匹配的内容按顺序出现在内存的缓冲区中,称之为~.

3) 反向引用

圆括号的内容被捕获后, 可以在这个括号后被使用, 称之为~.

2.4.2 示例

<script type="text/javascript">

// 匹配连续的四个数字, 
// 并且第一个数与第四个数相同, 第二个数与第三个数相同

var str = "012345665";

var regExp = /(\d)(\d)\2\1/gi;

console.info( str.search( regExp ) );
console.info( regExp.exec( str ) );

/*
    5
    ["5665", "5", "6"]
*/



// 匹配连续相同的3个数字

str = "122333444455555";
regExp = /(\d)\1{2}/gi;

for ( ; result = regExp.exec(str); ) {
    console.info(result);
}

/*
    ["333", "3"]
    ["444", "4"]
    ["555", "5"]
*/

</script>

2.5 元字符

- 限定符
- 选择匹配符
- 分组组合和反向引用符
- 特殊字符
- 字符匹配符
- 定位符

2.5.1 限定符

1) 概念

用于指定其前面的字符和组合项连续出现多少次.

2) 模式

① X{n} n 个X

② X{n, m} n到m 个X

③ X+ 大于等于 1 个X

④ X* 大于等于 0 个X

⑤ X? 0个X 或 1个X

3) 举例

字符串 "aaaaaa"

/a{3}/gi -> "aaa" "aaa"

/a{2,4}/gi -> "aaaa" "aa"

/a+/gi -> "aaaaaa"

<script type="text/javascript">

// 匹配连续的四个数字, 
// 并且第一个数与第四个数相同, 第二个数与第三个数相同

var str = "aaaaaa";

var regExp = /a{3}/gi;

var result = null;

for ( ; result = regExp.exec(str); ) {
    //console.info(result);
}
/*
    ["aaa"]
    ["aaa"]
*/

regExp = /a{2,4}/gi;

for ( ; result = regExp.exec(str); ) {
    // console.info(result);
}
/*
    ["aaaa"]
    ["aa"]
*/


regExp = /a+/gi;

for ( ; result = regExp.exec(str); ) {
    // console.info(result);
}
/*
    ["aaaaaa"]
*/

regExp = /a*/gi;

for ( ; (result = regExp.exec(str)) != ""; ) {
    console.info(result);
}
/*
    ["aaaaaa"]
*/

</script>

4) 注意

JS默认匹配中使用的是贪婪匹配原则,
即每次匹配最多符合要求的子串.

2.5.2 选择匹配符

1) 概念

多选一.

2) 模式

[abcd] "abcd" 中任意一个

[A-Za-z0-9] 任意一个英文字母或阿拉伯数字

[^a-z] 不是小写英文字母

2.5.3 字符匹配符

1) 概念

匹配指定类型字符.

2) 模式

\d <==> [0-9]
\D <==> [^0-9]
\w <==> [A-Za-z0-9_]
\W <==> [^A-Za-z0-9_]
\s 空白字符(空格, 制表符等不可见字符)
\S 非空白字符
. 匹配除 \n 外的所有字符.

3) 注意

匹配域名中的".", /\./gi

2.5.4 转义符号 \

1) 概念

取消某些特定符号的特殊意义.

2) 需要被转义的字符

① . (句点)
② * (星号)
③ + (加号)
④ ? (问号)
⑤ ( ) (左右小括号)
⑥ [ ] (左右中括号)
⑦ { } (左右花括号)
⑧ $ ^
⑨ \ (反斜线)

2.5.5 定位符

1) 概念

指定开头(^) 或结尾($).

2) 模式

/^hello/gi 匹配开头的"hello"

/hello$/gi 匹配结尾的"hello"

2.5.6 选择匹配符 |

1) 概念

使用 | (竖线) 连接多个模式并以小括号包裹, 多选一.

2) 模式

\(abc|123)\gi 匹配 abc 或者 123

forwardNow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
42-JavaScript-正则表达式

1. 引入 1) 在一个字符串中找到连续的四个数字 2) 验证邮箱身份证号等格式是否合法 RegExp对象(Regular Expression), 是对字符串执行模式匹配的强大工具. 1.2 基本概念指一个用来描述或匹配一系列符合某个语法规则的字符串的单个字符串. 在很多文本编辑器或其他工具里, 正则表达式通常被用来检索
复制链接

扫一扫