每天10个前端知识点：正则表达式

2017-02-21 本文已影响130人 WangChloe

个人博客已上线，欢迎前去访问评论！
无媛无故 - wangchloe的个人博客

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

预告：明天是正则应用篇

1. 正则表达式

用处：处理字符串

RegExp对象

var reg = new RegExp('字符串', [选项]); 可选选项

选项：

i ignore 忽略大小写
g global 全局匹配
m multi-line 多行匹配

字符串为正则表达式时，不能用选项，直接在正则表达式//后增加选项

2. 正则定义的多种方法

var a = 'aaa';
var reg = new RegExp(a, 'g'); 正则可以使用变量形式
var reg = /\d+/g; 正则不可以使用变量形式
str.replace(/\d/g, '');

3. 正则校验

reg.test(str);

true -> 校验通过
false -> 校验不通过

4. 正则使用的字符串相关方法

str.search('w') 查找w
- 成功返回w的下标
- 失败返回-1
str.match('w') 匹配w 返回值类型：数组(object)
- 成功返回w
- 失败返回null
str.replace('xxx', 'yyy') 被替换内容，替换内容

修改第一个被替换内容
替换不修改原字符串, 需重新声明
第二个参数可为一个方法
replace可以连用

示例

<script>
    var str = 'aaa';
    var str2 = str.replace('a', 'b');

    console.log(str);  // aaa
    console.log(str2);  // baa
</script>

<script>
    str.replace('xxx', function(s) {
        console.log(s);  // **参数s为被替换字符  数据类型：string
        var star = '';
        for (var i = 0; i < s.length; i++) {
            star += '*';
        }
        return star;  // 返回替换内容
    })
</script>

5. 特殊字符

. 匹配任何单字符(除换行符\n)
^ 匹配开始位置
- 不选m 匹配字符串的开始位置
- 选m 识别字符串的换行，并匹配字符串每行的开始位置
$ 匹配结束位置
() 标记子表达式
[] 标记元字符表达式
{} 标记限定符表达式

6. 元字符(一个字符)

[abc] 字符集合 -> /a|b|c/
[^abc] 负值字符集合 -> 除了abc
[0-9] 字符范围 -> /0|1|2|3|4|5|6|7|8|9/ eg: [1-29] -> [1-2]或者[1-9]
[^0-9] 负值字符范围 -> 非数字

7. 限定符

{n} 匹配n个
{n,} 最少匹配n个
{,m} 最多匹配m个
{n,m}最少匹配n个，最多匹配m个 n,m为非负整数(n<=m)
* 匹配{0,} eg: 'zo*' -> 'z'及'zo'、'zooooo'
+ 匹配{1,} eg: 'zo+' -> 'zo'及'zoo'、'zooooo'
? 匹配{0,1} eg: 'do(es)?' -> 'do'或'does'

8. 转义字符

\\ \ eg: \\\\\ -> \\ 会报错
\n 换行符
\r 回车符
\f 换页符
\d digital 数字(不认识小数) [0-9]
\w word 单词(包括下划线) [A-Za-z0-9_]
\s space 空白字符
\D 非数字 [^0-9]
\W 非单词 [^A-Za-z0-9_]
\S 非空白字符

var reg = /\d/; -> 选项 /\d/g; -> 匹配一次或多次 /\d+/g

9.单词边界

找确定单词时在正则中加上单词边界 \b

在正则中需转义为 \\b

var reg = new RegExp('\\bAAAA\b');

10. 简单示例

/\d+/ 一串数字
/\d\d+/ 最少2个数字
/.+/ 任意多个
/.*/ 可有可无

更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！

公众号是坚持日更的，不发文的时候推送一些我觉得好用的前端网站或者看到的一些问题的解决方案，也更便于大家交流，就酱。

微信公众号：无媛无故