JS基础入门篇（三十三）—正则表达式

caspar 发布于2019-08-22 18:18 / 2406人阅读

摘要：举例一使用这个正则，打印结果为使用这个正则，打印结果为举例二打印结果如下过滤标签你好美丽的上海想转化成你好，美丽的上海如果后面加，就会进入非贪婪模式。如果后面不加，就会进入贪婪模式，结果为上海。你好美丽的上海。

1.创建一个正则表达式

方法一：使用一个正则表达式字面量，其由包含在斜杠之间的模式组成。

var reg1 = /a/;
var reg2 = /ab+c/;

方法二：调用RegExp对象的构造函数

var reg1 = new RegExp( "a" );
var reg2 = new RegExp( "ab+c" );

2.正则表达式中的特殊字符

1.转义字符

    s: 空格
    S: 非空格
    d: 数字
    D: 非数字
    w: 字母，数字，下划线
    W: 非字母，非数字，非下划线。
     进行转换。模式 /a*/ 代表会匹配 0 个或者多个 a。相反，模式 /a*/ 将 "*" 的特殊性移除，从而可以匹配像 "a*" 这样的字符串。
    . : 代表 任何一个字符
    : 起始,结束,空格。eg：/m/匹配“moon”中得‘m’；/oo/并不匹配"moon"中得"oo"，因为"oo"被一个“字”字符"n"紧跟着。


var str = "12 3123";
console.log( str.replace( //g,"|" ) );//|12| |3123|

2.量词

     {n,m}: n 和 m 都是整数。匹配前面的字符至少n次，最多m次。如果 n 或者 m 的值是0， 这个值被忽略。
     *: 匹配前一个表达式0次或多次。等价于 {0,}。
     +: 匹配前面一个表达式1次或者多次。等价于{1,}。
     ?: 匹配前面一个表达式0次或者1次。{0,1}。
     .: 匹配除换行符之外的任何单个字符。

注意：如果 ? 紧跟在任何量词 *、 +、? 或 {} 的后面，将会使量词变为非贪婪的（匹配尽量少的字符），和缺省使用的贪婪模式（匹配尽可能多的字符）正好相反。

3. 字符类
1.[ ]

[]：匹配[]中内容的一个字符.这指的是范围匹配。     
eg:/[a-zA-Z0-9]/:只要是数字，字母都能匹配上。
eg:/[abc]/:只要是a或者b或者c，其中一个都能匹配的上。
eg:/[a-z.]+/:都匹配“test.i.ng”中的所有字符。
[]:内部不需要加|，因为它就表示一个范围，有或者的含义。

举例说明1

            var re = /0|1|2/g;
            var re = /[012]/g;
            var re = /[0-2]/g;
            以上三种正则表达是一个意思

举例说明2

          var re = /^([0-9]|1[0-9])$/g; // 判断数字范围是否在 0-19 之间
          console.log( re.test(20) );//false
          console.log( re.test(2) );//true

2. ^

^ : 匹配输入的开始。
eg: /^A/ 并不会匹配 "an A" 中的 "A"，但是会匹配 "An E" 中的 "A"。^表示开始。

注意：^放在[]中，表示非的意思。

eg： 例如，[^abc] 和 [^a-c] 是一样的。他们匹配"brisket"中的‘r’，也匹配“chop”中的‘h’。 意思是：不是a不是b不是c，则匹配成功。

3. $

$ : 匹配输入的结束。
eg: /t$/ 并不会匹配 "eater" 中的 "t"，但是会匹配 "eat" 中的 "t"。

3.使用正则表达式的方法,正则的贪婪模式和非贪婪模式

test：使用正则匹配字符串,如果匹配返回true,否则false
使用：正则.test(字符串);

2.search:使用正则匹配字符串,如果匹配返回对应位置,否则返回-1。
使用：字符串.search(正则);
注意：正则区分大小写，如果想不区分大小写，则需要添加标识符 i 。对于两种创建正则的方式，i 有两中不同的写法。

3.match: 使用正则匹配字符串,如果匹配,返回对应字符串,返回数组形式,否则 null。
使用: 字符串.match(正则)。

注意:
    1. 返回的是类型是数组
    2. 正则默认匹配成功就会停止，使用标识符 g(全局匹配)。

4.注意：正则的贪婪模式
首先需了解： +的含义是：匹配前面一个表达式1次或者多次。等价于{1,}。

以下是贪婪模式

解释：
1.正则的贪婪模式是指会匹配最长的，得到数目最多的项。
2.如果 ? 紧跟在任何量词 *、 +、? 或 {} 的后面，将会使量词变为非贪婪的（匹配尽量少的字符），和缺省使用的贪婪模式（匹配尽可能多的字符）正好相反。

以下是非贪婪模式

5.replace:使用正则匹配字符串,如果匹配成功,替换对应字符串,返回匹配后的字符串。如果不成功，则返回原字符串。
使用： 字符串.replace(正则,替换字符串);

4.正则的使用

1.敏感词过滤
每个网站都有自己的敏感词，例如这次的敏感词为：星星，好，天空，这三个词。

解析：
1.replace 第二个参数可以是一个字符串,或者函数
2.replace 第二个参数如果是函数的话，这个函数的第一个参数是每次匹配到的 字符。
3.我给参数的命名为$0,这个是随意的，只要不是关键字保留字都可以。例如a，b都可以的。

2.格式化时间
方式一：

方式二：

方式二的解析：replace 第二个参数如果是函数的话，
1.这个函数的 第一个参数 是每次匹配到的 字符。
2.之后的参数是通过（）的分组，子项按照 "("确定次序。
3.例如第二个参数就是（d+）匹配到的内容。

3.匹配模式参数的说明
使用情况举例：当使用replace，并且replace的第二个参数是函数。则这个函数的参数情况，第一个参数是正则匹配到的值。之后的参数是通过（）的分组，子项按照 "("确定次序。

举例一：

举例二:

4.过滤标签

5.检查是否含有class名

6.找出重复次数最多的字符

方法一：不使用正则。

方法二：使用正则。

解析：1, 后面的是数字1，不是字母l。
1是作用是1前面的表达式，至少要重复一遍。而且前面的表达式要用（ ）包起来。

1的使用说明

7.检测qq号

8.去掉前后面的空格

云服务器 GPU云服务器正则表达式入门正则表达式基础三十三座机正则表达式 js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95705.html

JS基础入门篇（三十三）—正则表达式

摘要：举例一使用这个正则，打印结果为使用这个正则，打印结果为举例二打印结果如下过滤标签你好美丽的上海想转化成你好，美丽的上海如果后面加，就会进入非贪婪模式。如果后面不加，就会进入贪婪模式，结果为上海。你好美丽的上海。 1.创建一个正则表达式方法一：使用一个正则表达式字面量，其由包含在斜杠之间的模式组成。 var reg1 = /a/; var reg2 = /ab+c/; 方法二：调用Re...

hot_pot_Leo 2019-08-02 10:47 评论0 收藏0
JS基础入门篇（三十三）—正则表达式

摘要：举例一使用这个正则，打印结果为使用这个正则，打印结果为举例二打印结果如下过滤标签你好美丽的上海想转化成你好，美丽的上海如果后面加，就会进入非贪婪模式。如果后面不加，就会进入贪婪模式，结果为上海。你好美丽的上海。 1.创建一个正则表达式方法一：使用一个正则表达式字面量，其由包含在斜杠之间的模式组成。 var reg1 = /a/; var reg2 = /ab+c/; 方法二：调用Re...

y1chuan 2019-08-30 15:53 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

zxhaaa 2019-08-22 16:11 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

JouyPub 2019-08-02 10:10 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

vslam 2019-08-30 15:53 评论0 收藏0