JS正则表达式入门

paraller 发布于2019-08-23 14:09 / 3052人阅读

摘要：什么是正则表达式正则表达式其实就是，在一个字符串序列中，按照你自己想要的匹配模式，将字符串搜索或替换的过程正则表达式结构正则表达式主体修饰符可选实例如下解析是一个正则表达式，其中是一个正则表达式主体，是一个修饰符搜索不区分大小写使用正则表达

什么是正则表达式？

正则表达式其实就是，在一个字符串序列中，按照你自己想要的匹配模式，将字符串搜索或替换的过程

正则表达式结构

/正则表达式主体/修饰符(可选)

//实例如下：
const patr = /china/i

解析： /china/i 是一个正则表达式，其中china是一个正则表达式主体，i 是一个修饰符(搜索不区分大小写)

使用正则表达式方法 search方法

检索字符串中指定的字符串，并且返回子串的起始位置

const str = "hello world!";
const n = str.search(/hello/);
console.log(n); //输出结果为0

replace方法

在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串

const str = "hello world!";
const newstr = str.replace(/hello/, "hi");
console.log(newstr); //输出结果为hi world!

match方法

可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配，但是它返回指定的值，而不是字符串的位置

 const str = "hello world!";
 const arr = str.match(/o/g);
 console.log(arr); //输出结果["o", "o"]

test方法

用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false

 const str = "hello word!";
 const regx = /o/;
 const flag = regx.test(str);
 console.log(flag); //输出结果true

exec方法

返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null

     const str = "abc123abc321";
      const pattern = /^abc/g;
      const flag = pattern.exec(str);
      console.log(flag); //["abc", index: 0, input: "abc123abc321", groups: undefined]

常见的正则表达式修饰符 i 不区分(ignore)大小写

/abc/i 可以匹配 abc、aBC、Abc

g 全局(global)匹配

如果不带g,从左往右搜索，找到第一个符合条件就返回；如果带g，则从左往右，找到每个符合条件的都记录下来，如下：

 const str = "hello world!";
 const n1 = str.match(/o/g);
 console.log(n1); //输出结果["o", "o"]
 const n2 = str.match(/o/);
 console.log(n2); //输出结果["o", index: 4, input: "hello world!"]

m 多(more)行匹配

如果字符串中存在n并且有开始^或结束$符的情况下，会默认作为一个换行符，g只匹配第一行，加上m则可以匹配多行，如下：

  const str = "hello
world
hello world
good hello";
  const n1 = str.match(/^hello/gm);
  console.log(n1); //输出结果：["hello", "hello"]
  const n2 = str.match(/world$/g);
  console.log(n2); //输出结果：null

n2输出为null，是因为没有m则只匹配第一行，第一行中没有与之匹配的字符串，所有输出null

正则表达式语法 定位符 ^ 符：匹配字符串开始的位置

      const str = "hello world!";
      const pattr1 = /^hello/;
      const flag1 = pattr1.test(str);
      console.log(flag1); //输出结果：true

      const pattr2 = /^world/;
      const flag2 = pattr2.test(str);
      console.log(flag2); //输出结果：false

$ 符：匹配字符串结束的位置

      const str = "hello world";
      const pattr1 = /hello$/;
      const flag1 = pattr1.test(str);
      console.log(flag1); //输出结果：false

      const pattr2 = /world$/;
      const flag2 = pattr2.test(str);
      console.log(flag2); //true

b 符：单词边界匹配，匹配单词的开头或结尾的位置，匹配的是一个位置

      const str = "word";
      const pattern1 = /word/;
      const flag1 = pattern1.test(str);
      console.log(flag1); //true

      const pattern2 = /word/;
      const flag2 = pattern2.test(str);
      console.log(flag2); //true

      const str1 = "hello,world"
      const pattern3 = /hello/;
      const flag3 = pattern3.test(str1);
      console.log(flag3); //true

      const pattern4 = /helloworld/;
      const flag4 = pattern4.test(str1);
      console.log(flag4); //false

如果b在模式的开头和结尾那没有问题，但是如果b在两个单词之间，则得都符合b左右匹配的模式

B 符：非单词边界匹配，其实就是b的相反，b匹配的是单词，而B匹配的是非单词

      const str = "hello, 你好！我是小明！";
      const pattern1 = /B/;
      const arr1 = str.split(pattern1);
      console.log(arr1);
      // 输出结果：["h", "e", "l", "l", "o,", " ", "你", "好", "！", "我", "是", "小", "明", "！"]

      const pattern2 = //;
      const arr2 = str.split(pattern2);
      console.log(arr2);
      // 输出结果：["hello", ", 你好！我是小明！"]

从上面例子中可以看出，b是可以把单词匹配出来，而B不管是什么都分隔，如果在一个字符串中，有中英文，符合等等组成，如果要把里面的单词多带带提取出来，则可以使用b来提取单词

特殊字符 . 符：匹配除换行符以外的任意单字符

       const str = "
";
       const pattern = /./gm;
       const flag1 = pattern.test(str);
       console.log(flag1); //false

w 符：匹配字母或数字或下划线（等价于"[A-Za-z0-9_]"）

       const str = "^^##hello, 123";
       const pattern = /^w/;
       const flag1 = pattern.test(str);
       console.log(flag1); //false

         const str = "你好hello!";
         const pattern = /^w/;
         const flag = pattern.test(str);
         console.log(flag); // false

如果头部是汉字或者符号(除下划线)，则返回false

W：用于匹配所有与w不匹配的字符 s 符：匹配任意的空白符（等价于 [ fnrtv]）

       const str = "abc";
       const pattern = /s/;
       const flag1 = pattern.test(str);;
       console.log(flag1); // false

       const str1 = "abc cde";
       const flag2 = pattern.test(str1);
       console.log(flag2); // true

S 符：匹配除单个空格符之外的所有字符（非s） d 符：匹配数字

        const str = "123";
        const pattern = /d/;
        const flag1 = pattern.test(str);
        console.log(flag1); // true

        const str1 = "abc";
        const flag2 = pattern.test(str1);
        console.log(flag2); // false

限定符 * 符：匹配前面的子表达式重复出现0次或多次(可有可无)

  const str = "123abc###";
  const pattern = /(d)*/;
  const flag1 = pattern.test(str);
  console.log(flag1); // true

+ 符：匹配前面的子表达式重复出现一次或更多次(至少一次)

        const str = "abc###";
        const pattern = /(d)+/;
        const flag1 = pattern.test(str);
        console.log(flag1); // false

        const str2 = "123";
        const flag2 = pattern.test(str2);
        console.log(flag2); // true

? 符：匹配前面的子表达式重复出现零次或一次

    const str = "eee123";
    const pattern = /h+?/;
    const flag = pattern.test(str);
    console.log(flag); //false

当?跟在+后面的时，则此时必须出现一次，?一般都是跟在限定符后面的

{n} 符：匹配确定的 n 次（n为非负数整数）

  const str = "type";
  const pattern = /t{2}/;
  const flag = pattern.test(str);
  console.log(flag); // false

t得要有两个才能匹配，这里不满足2个，所有返回false

{n,} 符：至少匹配n 次（n为非负整数）

 const str = "ttypet";
 const pattern = /t{2,}/;
 const flag = pattern.test(str);
 console.log(flag); // true

这里t至少得重复出现2次才可以被匹配

{n,m} 符：最少匹配 n 次且最多匹配 m 次（n
const str = "food"; const pattern = /o{1,4}/; const flag = pattern.test(str); console.log(flag); // true //o出现2次，1<2<4

const str = "food"; const pattern = /o{3,4}/; const flag = pattern.test(str); console.log(flag); // false //o出现2次，不属于3到4的范围
方括号 [abc]：查找方括号之间的任何字符
const str = "my name is lucy!"; const pattern = /^[lpo]/; const flag = pattern.test(str); console.log(flag); // false

const str = "my name is lucy!"; const pattern = /^[mpo]/; const flag = pattern.test(str); console.log(flag); // true
¹：查找任何不在方括号之间的字符
const str = "my name is lucy!"; const pattern = /^[^mpo]/; const flag = pattern.test(str); console.log(flag); // false

const str = "my name is lucy!"; const pattern = /^[^lpo]/; const flag = pattern.test(str); console.log(flag); // true
[0-9]：查找任何从 0 至 9 的数字
const str = "hello,123"; const pattern = /[0-9]$/; const flag = pattern.test(str); console.log(flag); // true
[a-z]：查找任何从小写 a 到小写 z 的字符
const str = "hello,123"; const pattern = /^[a-z]/; const flag = pattern.test(str); console.log(flag); // true
[A-Z]：查找任何从大写 A 到大写 Z 的字符
const str = "hello,123"; const pattern = /^[A-Z]/; const flag = pattern.test(str); console.log(flag); // false
简单正式表达式实例 1.只能是数字或英文
const str1 = "123456"; const str2 = "你好，123"; const str3 = ""; const pattern = /^[a-zA-Z0-9]+$/; const flag1 = pattern.test(str1); const flag2 = pattern.test(str2); const flag3 = pattern.test(str3); console.log(flag1); // true console.log(flag2); // false console.log(flag3); // false
2.中英文开头
const str1 = "中文+++123"; const str2 = "word123你好"; const str3 = "321wrod"; const pattern = /^[u4e00-u9fa5A-Za-z]+/; const flag1 = pattern.test(str1); const flag2 = pattern.test(str2); const flag3 = pattern.test(str3); console.log(flag1); // true console.log(flag2); // true console.log(flag3); // false

这里开头以中英文开头，则

^[u4e00-u9fa5A-Za-z]+

除了开头要中英文，后面部分随意都可以，没有限制
3.校验数值
最多保留两位小数

const str1 = 45; const str2 = 45.5; const str3 = 45.55; const str4 = 0.111; const pattern = /^[0-9]+(.[0-9]{0,2})?$/; const flag1 = pattern.test(str1); const flag2 = pattern.test(str2); const flag3 = pattern.test(str3); const flag4 = pattern.test(str4); console.log(flag1); // true console.log(flag2); // true console.log(flag3); // true console.log(flag4); // false

这里可以分成两部分，一部分是整数部分，如下：

^[0-9]+

再一部分是小数部分，如下：

(.[0-9]{0,2})?

小数可以保留一位或者两位或者不保, ? 表示0次或者一次
4.网址URL验证
const str1 = "www.baidu.com?id=123"; const str2 = "cnds.tang-123/china"; const str3 = "www.baidu.com311"; const pattern = /^([w-]+.)+[w-]+([w-./?%&=]*)$/; const flag1 = pattern.test(str1); const flag2 = pattern.test(str2); const flag3 = pattern.test(str3); console.log(flag1); // true console.log(flag2); // true console.log(flag3); // false

开头只能是数字或字母或下划线或-至少得一个，则：

^([w-]+.)+

中间部分也至少得有一次

[w-]+

到后面的那部分随意，可有可无

([w-./?%&=]*)

本章节主要就是简单介绍了正则表达式的一些常用的东西，有不对的地方大家可以指出哈

abc ↩

GPU云服务器云服务器正则表达式入门座机正则表达式 js js域名正则表达式 js类型正则表达式

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

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

上一篇：ES6精解：变量的解构赋值

下一篇：微信小程序Taro开发(3)：canvas制作钟表

相关文章

JS正则表达式入门，看这篇就够了

摘要：如果遇到非常的复杂的匹配，正则表达式的优势就更加明显了。关于正则表达式书写规则，可查看，上面说的很清楚了，我就不贴出来了。替换与正则表达式匹配的子串，并返回替换后的字符串。结语正则表达式并不难，懂了其中的套路之后，一切都变得简单了。前言在正文开始前，先说说正则表达式是什么，为什么要用正则表达式？正则表达式在我个人看来就是一个浏览器可以识别的规则，有了这个规则，浏览器就可以帮我们判断...

wenzi 2019-08-20 16:22 评论0 收藏0

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

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

caspar 2019-08-22 18:18 评论0 收藏0

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

正则表达式入门实践（一）

摘要：一前言正则表达式入门实践系列文章适合熟悉至少使用过正则表达式的同学，在文章开始的时候我们都会带着问题去思考如何正确应用正则表达式解决出现的问题，在解决问题的过程中增长你的知识，提高你的实践能力。一前言正则表达式入门实践系列文章适合熟悉至少使用过正则表达式的同学，在文章开始的时候我们都会带着问题去思考如何正确应用正则表达式解决出现的问题，在解决问题的过程中增长你的知识，提高你的实践...

chanthuang 2019-08-22 13:45 评论0 收藏0

【JS基础】正则表达式入门

摘要：对于含有量词正则表达式，量词是贪婪模式，会优先选择尽可能多的匹配修饰的字符，所以该表达式会优先选择匹配一个字符，当匹配不到时再选择不匹配字符。正则表达式的语法普通字符字母、数字、汉字、下划线以及一些没有特殊定义的标点符号，都属于普通字符，正则表达式中的普通字符匹配字符本身，如： var str = abced console.log(str.match(/a/)) // [a,...

Mr_houzi 2019-08-22 15:09 评论0 收藏0

发表评论

登陆后可评论

0条评论

paraller

男|高级讲师

我要关注我要私信

TA的文章
阅读更多

#yyds干货盘点# URL格式的基础知识

阅读 3300·2021-11-23 09:51

GreenCloudVPS八周年促销，VPS年付五折起，10G口大盘鸡年付$30起

阅读 2911·2021-10-28 09:33

小区物业管理系统，基于Spring boot微服务，包含小程序源码分享

阅读 875·2021-10-08 10:04

主机流水号什么意思-电脑主机号是什么？

阅读 3681·2021-09-22 15:13

sass和compass基础用法

阅读 1014·2019-08-30 15:55

混合开发遇到的坑：倒计时在ios中不生效

阅读 2905·2019-08-30 15:44

CSS Background-Size 属性小记

阅读 563·2019-08-30 13:04

js动画效果总结

阅读 2937·2019-08-30 12:56

最新活动

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

JS正则表达式入门

相关文章

**JS正则表达式入门，看这篇就够了**

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

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

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

**正则表达式入门实践（一）**

**【JS基础】正则表达式入门**

发表评论

0条评论

paraller

男|高级讲师

TA的文章

#yyds干货盘点# URL格式的基础知识

GreenCloudVPS八周年促销，VPS年付五折起，10G口大盘鸡年付$30起

小区物业管理系统，基于Spring boot微服务，包含小程序源码分享

主机流水号什么意思-电脑主机号是什么？

sass和compass基础用法

混合开发遇到的坑：倒计时在ios中不生效

CSS Background-Size 属性小记

js动画效果总结

最新活动