JavaScript中的正则表达式

最新推荐文章于 2024-07-15 16:30:57 发布

chengzhang_jian

最新推荐文章于 2024-07-15 16:30:57 发布

阅读量350

点赞数

分类专栏： javascript 正则表达式文章标签：正则表达式 javascript

javascript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

正则表达式

2 篇文章 0 订阅

订阅专栏

了解正则表达式的方法
RegExp对象表示正则表达式，它是对字符串执行模式匹配的工具；

正则表达式的基本语法如下2种：

直接量语法：
/pattern/attributes;

 2. 创建RegExp对象的语法

     new RegExp(pattern,attributes);

参数：参数pattern是一个字符串，指定了正则表达式的模式；参数attributes是一个可选的参数，包含属性 g，i，m，分别使用与全局匹配，不区分大小写匹配，多行匹配；

@return 返回值：一个新的RegExp对象，具有指定的模式和标志；

1-1. 支持正则表达式的String对象的方法

   1. search()方法；该方法用于检索字符串中指定的子字符串，或检索与正 则表达式相匹配的字符串。

   基本语法：stringObject.search(regexp);

  @param 参数regexp可以需要在stringObject中检索的字符串，也可以 是需要检索的RegExp对象。

  @return(返回值) stringObject中第一个与regexp对象相匹配的子串的起 始位置。如果没有找到任何匹配的子串，则返回-1；

注意：search()方法不执行全局匹配，它将忽略标志g，同时它也没有regexp对象的lastIndex的属性，且总是从字符串开始位置进行查找，总是返回的是stringObject匹配的第一个位置。

测试demo如下：

复制代码
var str = "hello world,hello world";
// 返回匹配到的第一个位置(使用的regexp对象检索)
console.log(str.search(/hello/)); // 0
// 没有全局的概念 总是返回匹配到的第一个位置
console.log(str.search(/hello/g)); //0

console.log(str.search(/world/)); // 6

// 也可以是检索字符串中的字符
console.log(str.search("wo")); // 6

// 如果没有检索到的话，则返回-1
console.log(str.search(/longen/)); // -1

// 我们检索的时候 可以忽略大小写来检索
var str2 = "Hello";
console.log(str2.search(/hello/i)); // 0
复制代码

match()方法；该方法用于在字符串内检索指定的值，或找到一个或者多个正则表达式的匹配。该方法类似于indexOf()或者lastIndexOf(); 但是它返回的是指定的值，而不是字符串的位置；

基本语法：

stringObject.match(searchValue) 或者stringObject.match(regexp)

@param(参数)

searchValue 需要检索字符串的值；

regexp: 需要匹配模式的RegExp对象；

@return(返回值) 存放匹配成功的数组; 它可以全局匹配模式，全局匹配的话，它返回的是一个数组。如果没有找到任何的一个匹配，那么它将返回的是null；返回的数组内有三个元素，第一个元素的存放的是匹配的文本，还有二个对象属性；index属性表明的是匹配文本的起始字符在stringObject中的位置；input属性声明的是对stringObject对象的引用；

如下测试代码：

```
var str = "hello world";
console.log(str.match("hello")); // ["hello", index: 0, input: "hello world"]
console.log(str.match("Hello")); // null
console.log(str.match(/hello/)); // ["hello", index: 0, input: "hello world"]
// 全局匹配
var str2="1 plus 2 equal 3"
console.log(str2.match(/\d+/g)); //["1", "2", "3"]

 3. replace()方法：该方法用于在字符串中使用一些字符替换另一些字符，或者替换一个与正则表达式匹配的子字符串；

    基本语法：stringObject.replace(regexp/substr,replacement);

   @param(参数) 

    regexp/substr; 字符串或者需要替换模式的RegExp对象。

    replacement：一个字符串的值，被替换的文本或者生成替换文本的函数。

   @return(返回值)  返回替换后的新字符串

   注意：字符串的stringObject的replace()方法执行的是查找和替换操作，替换的模式有2种，既可以是字符串，也可以是正则匹配模式，如果是正则匹配模式的话，那么它可以加修饰符g,代表全局替换，否则的话，它只替换第一个匹配的字符串；

replacement 既可以是字符串，也可以是函数，如果它是字符串的话，那么匹配的将与字符串替换，replacement中的$有具体的含义，如下：

1,2,3....99 含义是：与regexp中的第1到第99个子表达式相匹配的文本。

$& 的含义是：与RegExp相匹配的子字符串。

lastMatch或RegExp["$_"]的含义是：返回任何正则表达式搜索过程中的最后匹配的字符。

lastParen或 RegExp["$+"]的含义是：返回任何正则表达式查找过程中最后括号的子匹配。

leftContext或RegExp["$`"]的含义是：返回被查找的字符串从字符串开始的位置到最后匹配之前的位置之间的字符。

rightContext或RegExp["$'"]的含义是：返回被搜索的字符串中从最后一个匹配位置开始到字符串结尾之间的字符。

如下测试代码：

`var str = “hello world”;
// 替换字符串
var s1 = str.replace(“hello”,”a”);
console.log(s1);// a world
// 使用正则替换字符串
var s2 = str.replace(/hello/,”b”);
console.log(s2); // b world

// 使用正则全局替换字符串
var s3 = str.replace(/l/g,”);
console.log(s3); // heo word

// $1,$ 2 代表的是第一个和第二个子表达式相匹配的文本
// 子表达式需要使用小括号括起来,代表的含义是分组
var name = “longen,yunxi”;
var s4 = name.replace(/(\w+)\s*,\s*(\w+)/,” $2$ 1”);
console.log(s4); // “yunxi,longen”

// $& 是与RegExp相匹配的子字符串 var name = “hello I am a chinese people”; var regexp = /am/g; if(regexp.test(name)) { //返回正则表达式匹配项的字符串 console.log(RegExp[‘$ &’]); // am

//返回被搜索的字符串中从最后一个匹配位置开始到字符串结尾之间的字符。
console.log(RegExp["$'"]); // a chinese people

//返回被查找的字符串从字符串开始的位置到最后匹配之前的位置之间的字符。
console.log(RegExp['$`']);  // hello I 

// 返回任何正则表达式查找过程中最后括号的子匹配。
console.log(RegExp['$+']); // 空字符串

//返回任何正则表达式搜索过程中的最后匹配的字符。
console.log(RegExp['$_']);  // hello I am a chinese people

}

// replace 第二个参数也可以是一个function 函数
var name2 = “123sdasadsr44565dffghg987gff33234”;
name2.replace(/\d+/g,function(v){
console.log(v);
/*
* 第一次打印123
* 第二次打印44565
* 第三次打印987
* 第四次打印 33234
*/
});
/*
* 如下函数，回调函数参数一共有四个
* 第一个参数的含义是匹配的字符串
* 第二个参数的含义是正则表达式分组内容，没有分组的话，就没有该参数,
* 如果没有该参数的话那么第四个参数就是undefined
* 第三个参数的含义是匹配项在字符串中的索引index
* 第四个参数的含义是原字符串
*/
name2.replace(/(\d+)/g,function(a,b,c,d){
console.log(a);
console.log(b);
console.log(c);
console.log(d);
/*
* 如上会执行四次，值分别如下(正则使用小括号，代表分组)：
* 第一次： 123,123,0,123sdasadsr44565dffghg987gff33234
* 第二次： 44565,44565,11,123sdasadsr44565dffghg987gff33234
* 第三次： 987,987,22,123sdasadsr44565dffghg987gff33234
* 第四次： 33234,33234,28,123sdasadsr44565dffghg987gff33234
*/
});`

4. split()方法: 该方法把一个字符串分割成字符串数组。

 基本语法如：stringObject.split(separator,howmany);

@param(参数) 

   1. separator[必填项]，字符串或正则表达式，该参数指定的地方分割stringObject; 

   2. howmany[可选] 该参数指定返回的数组的最大长度，如果设置了该参数，返回的子字符串不会多于这个参数指定的数组。如果没有设置该参数的话，整个字符串都会被分割，不考虑他的长度。

  @return(返回值) 一个字符串数组。该数组通过在separator指定的边界处将字符串stringObject分割成子字符串。

测试代码```

var str = “what are you doing?”;
// 以” “分割字符串
console.log(str.split(” “));
// 打印 [“what”, “are”, “you”, “doing?”]

// 以 “” 分割字符串
console.log(str.split(“”));
/*
* 打印：[“w”, “h”, “a”, “t”, ” “, “a”, “r”, “e”, ” “, “y”, “o”, “u”, ” “, “d”, “o”, “i”, “n”,
* “g”, “?”]
*/
// 指定返回数组的最大长度为3
console.log(str.split(“”,3));
// 打印 [“w”, “h”, “a”]

1-2 RegExp对象方法

   1. test()方法：该方法用于检测一个字符串是否匹配某个模式；

   基本语法：RegExpObject.test(str);

   @param(参数) str是需要检测的字符串；

   @return (返回值) 如果字符串str中含有与RegExpObject匹配的文本的话，返回true，否则返回false；

如下测试代码：

var str = "longen and yunxi";
console.log(/longen/.test(str)); // true
console.log(/longlong/.test(str)); //false

// 或者创建RegExp对象模式
var regexp = new RegExp("longen");
console.log(regexp.test(str)); // true

exec()方法: 该方法用于检索字符串中的正则表达式的匹配。

基本语法：RegExpObject.exec(string)

@param(参数)：string【必填项】要检索的字符串。

@return(返回值)：返回一个数组，存放匹配的结果，如果未找到匹配，则返回值为null；

注意：该返回的数组的第一个元素是与正则表达式相匹配的文本，该方法还返回2个属性，index属性声明的是匹配文本的第一个字符的位置；input属性则存放的是被检索的字符串string；该方法如果不是全局的话，返回的数组与match()方法返回的数组是相同的。

如下测试代码：

var str = "longen and yunxi";
console.log(/longen/.exec(str)); 
// 打印 ["longen", index: 0, input: "longen and yunxi"]

// 假如没有找到的话，则返回null
console.log(/wo/.exec(str)); // null

了解正则中的普通字符
字母，数字，汉字，下划线及一些没有特殊定义的标点符号，都属于普通字符，正则中的普通字符，在匹配字符串的时候，匹配与之相同的字符即可~ 比如如下代码：

var str = “abcde”;

console.log(str.match(/a/)); // [“a”, index: 0, input: “abcde”]

如上代码，字符串abcde匹配a的时候，匹配成功，索引位置从0开始；

回到顶部
了解正则中的方括号[]的含义
方括号包含一系列字符，能够匹配其中任意一个字符, 如abc可以匹配abc中任意一个字符，使用1包含的字符abc，则能够匹配abc字符之外的任何一个字符，只能是一个字符。如下的含义：

(red|blue|green); 查找小括号中的任意一项，小括号中的 | 是或者的意思；

列举1：表达式[bcd][bcd] 匹配 “abcde”时候，匹配成功，内容是bc，匹配到的位置开始于1，结束与3；如下代码：

```
var str = "abcde";

console.log(str.match(/[bcd][bcd]/)); // ["bc", index: 1, input: "abcde"]

理解javascript中的元字符
元素符号描述
. 查找任意的单个字符，除换行符外
\w 任意一个字母或数字或下划线，A_Za_Z0_9,_中任意一个
\W 查找非单词的字符，等价于[^A_Za_z0_9_]
\d 匹配一个数字字符，等价于0-9
\D 匹配一个非数字字符，等价于[^0-9]
\s 匹配任何空白字符，包括空格，制表符，换行符等等。等价于[\f\n\r\t\v]
\S 匹配任何非空白字符，等价于[^\f\n\r\t\v]
\b 匹配一个单词边界，也就是指单词和空格间的位置，比如’er\b’可以匹配”never”中的”er”,但是不能匹配”verb”中的”er”
\B 匹配非单词边界,’er\B’能匹配’verb’中的’er’,但不能匹配’never’中的’er’
\0 查找NUL字符。
\n 匹配一个换行符
\f 匹配一个换页符
\r 匹配一个回车符
\t 匹配一个制表符
\v 匹配一个垂直制表符
\xxx 查找一个以八进制数xxx规定的字符
\xdd 查找以16进制数dd规定的字符
\uxxxx 查找以16进制数的xxxx规定的Unicode字符。

RegExp特殊字符中的需要转义字符
需要转义的特殊字符前面加 \

匹配输入字符串的结尾位置，如果需要匹配匹配输入字符串的结尾位置，如果需要匹配本身的话，使用$

^ 匹配输入字符串的开始位置，匹配^本身的话，使用\^

匹配前面的子表达式的零次或者多次，匹配*本身的话，使用*
匹配子表达式的1次或者多次，匹配+本身的话，使用+

. 匹配除换行符之外的任何一个字符，匹配.本身的话，使用.

[ 匹配一个中括号开始，匹配本身的，使用[

? 匹配前面的子表达式的零次或者1次，或指明一个非贪婪限定符，要匹配本身的话，使用\?

\ 匹配本身的话，请使用\

{ 标记限定符开始的地方，要匹配{ ,请使用{

| 指明多项中的一个选择，可以理解含义为或的意思，匹配本身的话，使用|

了解量词
量词描述
n+ 匹配任何至少包含一个n的字符串
n* 匹配零个或者多个n的字符串
n? 匹配零个或者1个n的字符串
n{x} 匹配包含x个n的序列字符串
n{x,y} 匹配至少x个，最多y个n的字符串
n{x,} 匹配至少x个的字符串
n$ 匹配以n结尾的字符串
^n 匹配以n开头的字符串
?=n 匹配其后紧接指定的n字符串
?!n 匹配其后没有紧接指定的n字符串

n+ 匹配至少包含一个或者多个n的字符串。
基本语法：new RegExp(“n+”) 或直接量 /n+/
如下测试代码：

var str = "hello longen";

// 匹配至少一个或者多个l的字符串

console.log(str.match(/l+/g)); //["ll", "l"]

// 匹配至少一个或者多个字母数字或者下划线

console.log(str.match(/\w+/g)); //["hello", "longen"]

n* 匹配零个或者多个n的字符串。

基本语法：new RegExp(“n*”) 或直接量 /n*/

如下测试代码：

var str = "hello longen hello";
// 匹配至少零个或者多个l的字符串 
// 可以匹配多个l或者不匹配l 全局匹配
console.log(str.match(/el*/g)); //["ell", "e", "ell"]
// 可以匹配多个u或者不匹配u 全局匹配
console.log(str.match(/hu*/g)); //["h", "h"]

n？匹配零个或者1个n的字符串，可以匹配n字符串，也可以只匹配一个n；先尽量匹配，如没有匹配到，就回溯，再进行不匹配；
基本语法：new RegExp(“n?”) 或直接量 /n?/
如下测试代码：

var str = "hello longen hello";

// 匹配至少零个或者1个l的字符串 

console.log(str.match(/el?/g)); //["el", "e", "el"]

// 可以匹配1个u或者不匹配u 全局匹配

console.log(str.match(/hu?/g)); //["h", "h"]

n{x} 匹配包含x个的n的序列字符串。X必须是数字。
基本语法：new RegExp(“n{x}”) 或直接量 /n{x}/
如下测试代码：

var str="100, 1000 or 10000?";
// 匹配4个数字的 匹配到1000和10000
console.log(str.match(/\d{4}/g)); //["1000", "1000"]

n{x,y} 匹配包含至少x个的n字符串，最多y个n字符串。
基本语法：new RegExp(“n{x,y}”) 或直接量 /n{x,y}/
如下测试代码：

var str="100, 1000 or 10000?";
// 匹配最小3个数字，最多四个数字的 匹配到100，1000和10000
console.log(str.match(/\d{3,4}/g)); //["100", "1000", "1000"]

n{x,} 匹配至少包含x个n序列的字符串；
基本语法：new RegExp(“n{x,}”) 或直接量 /n{x,}/
如下测试代码：

var str="100, 1000 or 10000?";
// 匹配最小3个数字 匹配到100，1000和10000
console.log(str.match(/\d{3,}/g)); //["100", "1000", "1000"]

n$ 匹配任何以n结尾的字符串；
基本语法：new RegExp(“n或直接量”)或直接量/n/
如下测试代码：

var str="my name is longen";
// 匹配以en结尾的字符串
console.log(str.match(/en$/g)); //["en"]

^n 匹配任何以n开头的字符串；
基本语法：new RegExp(“^n”) 或直接量 /^n/
如下测试代码：

var str="my name is longen";

// 匹配以my开头的字符串
console.log(str.match(/^my/g)); //["my"]
// 匹配以na开头的字符串,没匹配到，返回null
console.log(str.match(/^na/g)); //null

?=n 匹配任何其后紧接指定字符串n的字符串；
基本语法：new RegExp(“regexp(?=n)”) 或直接量 /regexp(?=n)/
如下测试代码：

var str="my name is longen";
// 匹配以na其后紧接m的字符串
// ?= 只是匹配位置，不会返回值
console.log(str.match(/na(?=m)/g)); //["na"]

10 ?!n 匹配任何其后不紧接n的字符串
基本语法：new RegExp(“regexp(?!n)”) 或直接量 /regexp(?!n)/
如下测试代码：

var str="my name is longen";
// 匹配以na其后不紧接ma的字符串
// ?! 只是匹配位置，不会返回值
console.log(str.match(/na(?!ma)/g)); //["na"]
console.log(str.match(/na(?!m)/g)); // null

^ 以字符串开始的地方匹配，不匹配任何字符；

比如：表达式^aaa 在匹配字符串 “longen aaa bbb”的时候，匹配的结果是失败的；因为^的含义是以某某字符串开始进行匹配；只有当aaa在字符串起始位置才能匹配成功；比如”aaa longen bbb” 才匹配成功；

$ 以字符串结束的地方匹配，不匹配任何字符；

比如：表达式aaa在匹配字符串的时候，匹配的结果是失败的；因为在匹配字符串“longenaaabbb”的时候，匹配的结果是失败的；因为的含义是以某某字符串结束进行匹配；只有当aaa在字符串结束位置才能匹配成功；比如”longen bbb aaa” 才匹配成功；
13. \b 匹配一个单词边界，也就是单词与空格之间的位置，不匹配任何字符；
如下测试代码：

var str="my name is longen";
// 匹配单词边界的字符
console.log(str.match(/\bname\b/g)); //["name"]
// 如果不是单词边界的地方，就匹配失败
console.log(str.match(/\blong\b/g)); // null

| 左右两边表达式之间 “或” 关系，匹配左边或者右边。
如下测试代码：

var str = "hello world";
// 使用|的含义是 或者 匹配成功 结果为["hello "] 
//如果再次匹配的话 就是world
console.log(str.match(/(hello | world)/g)); // ["hello "]

15：()的含义
在被修饰匹配次数的时候，括号中的表达式可以作为整体被修饰。取匹配结果的时候，括号中的表达式匹配到的内容可以被单独得到。

贪婪模式与非贪婪模式讲解
Javascript中的正则贪婪与非贪婪模式的区别是：被量词修饰的子表达式的匹配行为；贪婪模式在整个表达式匹配成功的情况下尽可能多的匹配；非贪婪模式在整个表达式匹配成功的前提下，尽可能少的匹配；

一些常见的修饰贪婪模式的量词如下：
{x,y} , {x,} , ? , * , 和 +
那么非贪婪模式就是在如上贪婪模式后加上一个?(问号)，就可以变成非贪婪模式的量词；如下：
{x,y}?，{x,}?，??，*?，和 +?
1. 什么是贪婪模式？
先看如下代码：

`var str = "longen<p>我是中国人</p>yunxi<p>我是男人</p>boyboy";
// 贪婪模式 匹配所有字符
console.log(str.match(/<p>.*<\/p>/)[0]); 
// <p>我是中国人</p>yunxi<p>我是男人</p>
// 后面加问号，变成非贪婪模式
console.log(str.match(/<p>.*?<\/p>/)[0]); // <p>我是中国人</p>`

第一个console.log使用的是贪婪模式，我们来理解下匹配的基本原理；

首先正则是 /

.<\/p>/ 匹配；

匹配字符串第一个字符匹配失败，接着往下，直接匹配到

时候，匹配成功，接着把匹配的控制权交给.，从匹配到的

位置开始匹配，一直到

之前，接着把控制权交给，接着在当前位置下往下匹配，因此匹配到，匹配成功；由于它是贪婪模式，在匹配成功的前提下，仍然会尝试向右往下匹配，因此会匹配到两个

标签结束；但是非贪婪模式，也就是第二个console.log()；他匹配到第一个p标签成功后，它就不会再进行匹配，因此打印的值为一个p标签的内容了；
理解匹配成功前提下的含义：上面我们解释了，贪婪模式是要等一个表达式匹配成功后，再往下匹配；比如我们现在接着再看下们的表达式匹配代码：

`var str = "longen<p>我是中国人</p>yunxi<p>我是男人</p>boyboy";
// 贪婪模式
console.log(str.match(/<p>.*<\/p>yunxi/)[0]); 
//打印 <p>我是中国人</p>yunxi`
```如上代码，打印出一个p标签内容，我们知道.*是贪婪模式匹配，如果按照上面的解释会打印出2个p标签的内容，因为这里在匹配到p标签后，会继续匹配后面的yunxi字符串，直到整个表达式匹配成功，才提示匹配成功，因此当匹配到第一个yunxi后，第一个子表达式匹配成功，接着尝试往右继续匹配，<p></p>都匹配成功，但是yunxi不会匹配boyboy，所以第二次尝试匹配的子表达式匹配失败，因此只返回匹配成功后的第一个p标签的内容了；
我们现在再来看看非贪婪模式的含义：
如下代码：




<div class="se-preview-section-delimiter"></div>

var str = "longen我是中国人yunxi我是男人boyboy我是中国人2yunxi我是男人boyboy"; // 非贪婪模式1 console.log(str.match(/.*?<\/p>boyboy/)[0]); //我是中国人yunxi我是男人boyboy // 贪婪模式 console.log(str.match(/.*<\/p>yunxi/)[0]); //我是中国人yunxi我是男人boyboy我是中国人2yunxi


正则表达式实战
1. 匹配以数字结尾的；

   正则：/\d+$/g;

2. 去掉空格；

   var str = "我 是 龙 恩";

   console.log(str.replace(/\s+/g,""));//我是龙恩

3. 判断字符串是不是由数字组成；

   var str = "123344我 是 龙 恩 1123344";

   console.log(/^\d*$/.test(str)); //false

   var str2 = "123445566";

   console.log(/^\d*$/.test(str2)); // true

4. 电话号码正则

    分析如下：电话号码有区号(3-4位数字)，区号之后使用 ”-” 与电话号码连接；

    区号正则：^\d{3,4}

     电话号码7~8位 正则 \d{7,8}

    电话号码也有分机号，分机号为3-4位数字，非必填项，如果要填写的话，则以”-”与电话号码相连接。

    正则(-\d{3,4})?

  因此正则匹配电话号码正则为：

/^\d{3,4}-/d{7,8}(-\d{3,4})?$/;

5. 手机号码正则

手机号码需要匹配；手机号码开头不以0开始的，并且是11位数字，目前的手机号码有如下开头的：13,14,15,17,18开头的；因此正则如下：

/(^1[3|4|5|7|8][0-9]{9}$)/

如下测试代码：

var str = 15606512345;

var reg = /(^1[3|4|5|7|8][0-9]{9}$)/;

console.log(reg.test(str)); //true

6. 删除字符串左右空格





<div class="se-preview-section-delimiter"></div>

// 删除字符串两侧的空白

下面的正则的含义是以1个或者多个空白开头的
| 是或者的意思或者以1个或者多个空白结尾的
也就是去掉头部和尾部的1个或者多个空格

*/

function trim(str) {

return str.replace(/^\s+|\s+$/g,'');

}

var str1 = ” 1234 “;

console.log(trim(str1)); // 输出去掉空格的 1234

7. 限制文本框只能输入数字和小数点(二位小数点)
分析：开头有0个或者多个数字，中间有0个或者1个小数点，小数点后面有0个或者最多2个数字；

正则：
/^\d*\.?\d{0,2}$/

//测试代码如下：





<div class="se-preview-section-delimiter"></div>

var reg = /^\d*.?\d{0,2}$/;
var str1 = .9;
console.log(reg.test(str1)); // true
var str2 = 1.99;
console.log(reg.test(str2)); // true
var str3 = “1a.99”;
console.log(reg.test(str3)); // false

8.替换小数点前面的内容为指定内容




<div class="se-preview-section-delimiter"></div>

var href = “aa.php?d=1”;
var reg = href.replace(/\b^(\w*)(?=.)/,”bb”);
console.log(reg); // bb.php?d=1

代码分析如下：
如上代码的含义是 使用正则replace替换操作
找出以字母数字下划线开头的字符，前面以\b分隔单词与边界的地方
因此会找出第一个字符串中第一个开头的字符,后面是以捕获性分组来匹配
后面紧跟着一个.号的匹配，分组只匹配位置，不匹配字符，是零宽度的；
9. 匹配中文的正则
使用 Unicode，必须使用\u开头，接着是字符编码的四位16进制表现形式。
console.log(/[\u4E00-\u9FA5\uf900-\ufa2d]/g.test("我是")); //true
10. 返回字符串中 中文字符的个数。
分析:使用replace方法把不是中文字符全部替换成空
返回被替换的字符，因此是中文字符；
代码如下：





<div class="se-preview-section-delimiter"></div>

`var str = “111我是涂根华说得对aaaaa1234556”;

var reg = /[^\u4E00-\u9FA5\uf900-\ufa2d]/g;

var val = str.replace(reg,”);

console.log(val); // 我是涂根华说得对

console.log(val.length); // 长度为 8`

11. 正则获取ip地址的前三段
比如如:192.168.16.162 需要变成 192.168.16
 分析：使用正则匹配 .号后面带1-3位数字即可，
 且以数字结尾的，把他们替换成空字符串。
代码如下：





<div class="se-preview-section-delimiter"></div>

var ip = “192.168.16.162”;
console.log(ip.replace(/.\d{1,3}$/,”“));// 192.168.16

12. 匹配标签中的内容
比如匹配如代码 <ul><li>aaa</li><li>bbb</li></ul>
 分析： 想获取ul中的内容，可以对匹配的内容使用分组
 然后打印RegExp.$1 就获取到分组的内容了; 匹配所有字符
 使用[\s\S]+ 空白和非空白的所有字符，且使用修饰符g代表全局的
如下代码：





<div class="se-preview-section-delimiter"></div>

var str2 = “

“;
str2.match(/

([\s\S]+?)<\/ul>/g);
console.log(RegExp.$1); //
aaa
bbb

13. 匹配标签中的文本。

匹配文本思路：可以先把字符串内的所有标签替换成空字符串
 因此返回的就是文本了；
 正则/<\/?[\s\S]+?>/gi
如下代码：





<div class="se-preview-section-delimiter"></div>

var str3 = “

“;
var c = str3.replace(/<\/?[\s\S]+?>/gi,”“);
console.log(c); // aaabbb

14. 正则获取文件名

文件名有如下几种：

 1. c:\images\tupian\006.jpg

 2. C:\006.JPG

 3. "c:\\images\\tupian\\006.jpg";

 4. "c:\\images\\tupian\\aa.jpg";

 5. "c:/images/tupian/test2.jpg";

 正则如：/[^\\\/]*[\\\/]+/gi;
 上面的正则含义是：[^\\\/]* 不以一个\ 或者 2个\\ 或者 /(需要转义,使用\)这样的反斜杠开头的 
 零个或者多个字符,后面紧跟以一个\ 或者 两个\\ 或者 /(需要转义，使用\)这样一个或者多个分隔符
 全局匹配；
代码如下：





<div class="se-preview-section-delimiter"></div>

var s1 = “c:\images\tupian\006.jpg”,

s2 = “c:\images\tupian\aa.jpg”,

s3 = “c:/images/tupian/test2.jpg”;

function getFileName(str){
var reg = /[^\\/]*[\\/]+/gi;
str = str.replace(reg,”);
return str;
}
console.log(getFileName(s1)); // 006.jpg
console.log(getFileName(s3)); // test2.jpg

15. 绝对路径变成相对路径

比如绝对路径 http://172.16.28.162/images/a.jpg 需要替换成
./images/a.jpg 
使用正则匹配 http:// //需要使用转义字符转义的 继续匹配除/以外的任何一个字符
直到有反斜杠/为止；然后替换成 . 字符
代码如下：




<div class="se-preview-section-delimiter"></div>

var reg = /http:\/\/[^\/]+/g;
var r1 = “http://172.16.28.162/images/a.jpg“;
console.log(r1.replace(reg,’.’)); // ./images/a.jpg

16. 用户名正则
匹配规则：只能是中文，英文，数字，下划线，4-16个字符；
匹配中文字符正则：/[\u4E00-\u9FA5\uf900-\ufa2d]/
\w是 匹配英文，数字，下划线
测试代码如下：





<div class="se-preview-section-delimiter"></div>

var reg = /^[\u4E00-\u9FA5\uf900-\ufa2d\w]{4,16}$/;
var str = “我是12345678aa_123”;
console.log(reg.test(str)); // true
var str = “我是12345678aa_1235”;
console.log(reg.test(str)); // 17位 false

17. 匹配英文地址

匹配规则：包含点，字母，空格，逗号，数字，但是开头和结尾必须为字母
分析：开头必须为字母可以这样写 /^[a-zA-Z]/ 
结尾必须为字母可以这样写：/[a-zA-Z]+$/
中间包含点，字母，空格，逗号，数字的正则：/[\.a-zA-Z\s,0-9]*?/ 
外面的*号是0个或者多个，后面的问号? 代表可有可无;有就匹配，没有就不匹配;
测试代码如下：





<div class="se-preview-section-delimiter"></div>

var reg = /^[a-zA-Z][.a-zA-Z\s,0-9]*?[a-zA-Z]+$/;
var str1 = “11aa”;
console.log(reg.test(str1)); // false
var str2 = “aa111aaa”;
console.log(reg.test(str2)); // true

18 匹配价格
匹配规则: 开头有0个或者多个数字，中间可能有一个小数点，后面有可能有0-2位小数
正则:/^\d*(\.\d{0,2})?$/
代码如下测试





<div class="se-preview-section-delimiter"></div>

var reg = /^\d*(.\d{0,2})?$/
var num1 = 12;
console.log(reg.test(num1)); // true
var num2 = .01;
console.log(reg.test(num2)); // true
var num3 = 1.01;
console.log(reg.test(num3)); // true
var num4 = “1.aa1”;
console.log(reg.test(num4)); //false
var num5 = “1.1a”;
console.log(reg.test(num5)); //false

19. 身份证号码的匹配
匹配规则：身份证号码有15位或者18位，其中最后一位可能是X，其他全是数字





<div class="se-preview-section-delimiter"></div>

正则： /^(\d{14}|\d{17})(\d|[xX]) $/ var reg = /^(\d{14}|\d{17})(\d|[xX])$ /;
var identity1 = “36232919578996x”;
console.log(reg.test(identity1)); // true
var identity2 = “36232919578996a”;
console.log(reg.test(identity2)); // false
// 16位
var identity3 = “362329195789961x”;
console.log(reg.test(identity3)); // false

20. 单词的首字母大写
匹配字符串，让其字符串的首个字母大写






<div class="se-preview-section-delimiter"></div>

正则：/\b(\w)|\s(\w)/g
测试代码如下：
function replaceReg(reg,str) {
// 先转换为小写
str = str.toLowerCase();
return str.replace(reg,function(m){
return m.toUpperCase();
});
}
var reg = /\b(\w)|\s(\w)/g;
var str = “aadfdfCC”;
console.log(replaceReg(reg,str)); // Aadfdfcc

21. 验证日期格式
日期格式有2种 第一种是yyyy-mm-dd 或 yyyy/mm/dd
  分析 月和天数可以有1位或者2位
  正则：/^\d{4}[-\/]\d{1,2}[-\/]\d{1,2}$/;
测试代码如下：





<div class="se-preview-section-delimiter"></div>

22. 验证邮箱的正则表达式
思路分析: 邮箱的规则是: 由3部分组成
 由1个或者多个字母数字下划线和杠 + @ + 1个或者多个字母数字下划线和杠 + . + 1个或者多个字母数字下划线和杠
 因此正则：/^([a-zA-Z_0-9-])+@([a-zA-Z_0-9-])+(\.[a-zA-Z_0-9-])+$/
测试代码如下：





<div class="se-preview-section-delimiter"></div>

var reg = /^([a-zA-Z_0-9-])+@([a-zA-Z_0-9-])+(.[a-zA-Z_0-9-])+/;
var email1 = “tugenhua@126.com”;
console.log(reg.test(email1)); //true
var email2 = “879083421_aaAA@qqAAzz_AA.comaaa”;
console.log(reg.test(email2)); // true

23. 匹配代码中的a链接
比如<a href='http://www.baidu.com'>222</a> 匹配这样的
 使用正则：/<a[.\s]*href\s*=\s*'http:\/\/.*'>\w*<\/a>/gi;
测试代码如下：





<div class="se-preview-section-delimiter"></div>

var reg = /

`var str = "longen我是中国人yunxi我是男人boyboy我是中国人2yunxi我是男人boyboy"; // 非贪婪模式1 console.log(str.match(/.*?<\/p>boyboy/)[0]); //我是中国人yunxi我是男人boyboy // 贪婪模式 console.log(str.match(/.*<\/p>yunxi/)[0]); //我是中国人yunxi我是男人boyboy我是中国人2yunxi`我们先看表达式1，/

.?<\/p>boyboy/ 匹配str字符串，首先先匹配到p标签内容；但是由于boyboy字符串一直没有匹配到，因此会一直尝试往后匹配，直到匹配到boyboy字符串后，才匹配成功，否则匹配失败；由于它是非贪婪模式，因此这时候它不会再往下进行匹配，所以匹配就结束了；因此第一个console输出为

我是中国人

yunxi

我是男人

boyboy；我们可以再来看看贪婪模式第二个console.log()输出的；正则表达式 /

.<\/p>yunxi/ 匹配到第一个p标签yunxi后，由于它是贪婪的，它还想接着向右继续匹配，直到匹配完成后，匹配成功，才结束，因此把所有p标签后面跟随yunxi的字符串都匹配到，且之间的所有的字符串都被返回；

正则表达式实战
1. 匹配以数字结尾的；

正则：/\d+$/g;

去掉空格；

var str = “我是龙恩”;

console.log(str.replace(/\s+/g,”“));//我是龙恩
判断字符串是不是由数字组成；

var str = “123344我是龙恩 1123344”;

console.log(/^\d*$/.test(str)); //false

var str2 = “123445566”;

console.log(/^\d*$/.test(str2)); // true
电话号码正则

分析如下：电话号码有区号(3-4位数字)，区号之后使用 ”-” 与电话号码连接；

区号正则：^\d{3,4}

电话号码7~8位正则 \d{7,8}

电话号码也有分机号，分机号为3-4位数字，非必填项，如果要填写的话，则以”-”与电话号码相连接。

正则(-\d{3,4})?

因此正则匹配电话号码正则为：

/^\d{3,4}-/d{7,8}(-\d{3,4})?$/;

手机号码正则

手机号码需要匹配；手机号码开头不以0开始的，并且是11位数字，目前的手机号码有如下开头的：13,14,15,17,18开头的；因此正则如下：

/(^13|4|5|7|8{9}$)/

如下测试代码：

var str = 15606512345;

var reg = /(^13|4|5|7|8{9}$)/;

console.log(reg.test(str)); //true

删除字符串左右空格“`
// 删除字符串两侧的空白

下面的正则的含义是以1个或者多个空白开头的
| 是或者的意思或者以1个或者多个空白结尾的
也就是去掉头部和尾部的1个或者多个空格

*/

function trim(str) {

return str.replace(/^\s+|\s+$/g,'');

}

var str1 = ” 1234 “;

console.log(trim(str1)); // 输出去掉空格的 1234

**7限制文本框只能输入数字和小数点(二位小数点)**
分析：开头有0个或者多个数字，中间有0个或者1个小数点，小数点后面有0个或者最多2个数字；

正则：
/^\d*\.?\d{0,2}$/

//测试代码如下：

var reg = /^\d*.?\d{0,2}$/;
var str1 = .9;
console.log(reg.test(str1)); // true
var str2 = 1.99;
console.log(reg.test(str2)); // true
var str3 = “1a.99”;
console.log(reg.test(str3)); // false

**8.替换小数点前面的内容为指定内容**

var href = “aa.php?d=1”;
var reg = href.replace(/\b^(\w*)(?=.)/,”bb”);
console.log(reg); // bb.php?d=1

代码分析如下：
如上代码的含义是 使用正则replace替换操作
找出以字母数字下划线开头的字符，前面以\b分隔单词与边界的地方
因此会找出第一个字符串中第一个开头的字符,后面是以捕获性分组来匹配
后面紧跟着一个.号的匹配，分组只匹配位置，不匹配字符，是零宽度的；
**9. 匹配中文的正则**
使用 Unicode，必须使用\u开头，接着是字符编码的四位16进制表现形式。
console.log(/[\u4E00-\u9FA5\uf900-\ufa2d]/g.test("我是")); //true
**10. 返回字符串中 中文字符的个数。**
分析:使用replace方法把不是中文字符全部替换成空
返回被替换的字符，因此是中文字符；
代码如下：

`var str = “111我是涂根华说得对aaaaa1234556”;

var reg = /[^\u4E00-\u9FA5\uf900-\ufa2d]/g;

var val = str.replace(reg,”);

console.log(val); // 我是涂根华说得对

console.log(val.length); // 长度为 8`

**11. 正则获取ip地址的前三段**
比如如:192.168.16.162 需要变成 192.168.16
 分析：使用正则匹配 .号后面带1-3位数字即可，
 且以数字结尾的，把他们替换成空字符串。
代码如下：

var ip = “192.168.16.162”;
console.log(ip.replace(/.\d{1,3}$/,”“));// 192.168.16

**12. 匹配标签中的内容**
比如匹配如代码 <ul><li>aaa</li><li>bbb</li></ul>
 分析： 想获取ul中的内容，可以对匹配的内容使用分组
 然后打印RegExp.$1 就获取到分组的内容了; 匹配所有字符
 使用[\s\S]+ 空白和非空白的所有字符，且使用修饰符g代表全局的
如下代码：

var str2 = “

“;
str2.match(/

([\s\S]+?)<\/ul>/g);
console.log(RegExp.$1); //
aaa
bbb

**13. 匹配标签中的文本。**

匹配文本思路：可以先把字符串内的所有标签替换成空字符串
 因此返回的就是文本了；
 正则/<\/?[\s\S]+?>/gi
如下代码：

var str3 = “

“;
var c = str3.replace(/<\/?[\s\S]+?>/gi,”“);
console.log(c); // aaabbb

**14. 正则获取文件名**

文件名有如下几种：

 1. c:\images\tupian\006.jpg

 2. C:\006.JPG

 3. "c:\\images\\tupian\\006.jpg";

 4. "c:\\images\\tupian\\aa.jpg";

 5. "c:/images/tupian/test2.jpg";

 正则如：/[^\\\/]*[\\\/]+/gi;
 上面的正则含义是：[^\\\/]* 不以一个\ 或者 2个\\ 或者 /(需要转义,使用\)这样的反斜杠开头的 
 零个或者多个字符,后面紧跟以一个\ 或者 两个\\ 或者 /(需要转义，使用\)这样一个或者多个分隔符
 全局匹配；
代码如下：

var s1 = “c:\images\tupian\006.jpg”,

s2 = “c:\images\tupian\aa.jpg”,

s3 = “c:/images/tupian/test2.jpg”;

function getFileName(str){
var reg = /[^\\/]*[\\/]+/gi;
str = str.replace(reg,”);
return str;
}
console.log(getFileName(s1)); // 006.jpg
console.log(getFileName(s3)); // test2.jpg

**15. 绝对路径变成相对路径**

比如绝对路径 http://172.16.28.162/images/a.jpg 需要替换成
./images/a.jpg 
使用正则匹配 http:// //需要使用转义字符转义的 继续匹配除/以外的任何一个字符
直到有反斜杠/为止；然后替换成 . 字符
代码如下：

var reg = /http:\/\/[^\/]+/g;
var r1 = “http://172.16.28.162/images/a.jpg“;
console.log(r1.replace(reg,’.’)); // ./images/a.jpg

**16. 用户名正则**
匹配规则：只能是中文，英文，数字，下划线，4-16个字符；
匹配中文字符正则：/[\u4E00-\u9FA5\uf900-\ufa2d]/
\w是 匹配英文，数字，下划线
测试代码如下：

**17. 匹配英文地址**

匹配规则：包含点，字母，空格，逗号，数字，但是开头和结尾必须为字母
分析：开头必须为字母可以这样写 /^[a-zA-Z]/ 
结尾必须为字母可以这样写：/[a-zA-Z]+$/
中间包含点，字母，空格，逗号，数字的正则：/[\.a-zA-Z\s,0-9]*?/ 
外面的*号是0个或者多个，后面的问号? 代表可有可无;有就匹配，没有就不匹配;
测试代码如下：

var reg = /^[a-zA-Z][.a-zA-Z\s,0-9]*?[a-zA-Z]+$/;
var str1 = “11aa”;
console.log(reg.test(str1)); // false
var str2 = “aa111aaa”;
console.log(reg.test(str2)); // true

**18 匹配价格**
匹配规则: 开头有0个或者多个数字，中间可能有一个小数点，后面有可能有0-2位小数
正则:/^\d*(\.\d{0,2})?$/
代码如下测试

**19. 身份证号码的匹配**
匹配规则：身份证号码有15位或者18位，其中最后一位可能是X，其他全是数字

**20. 单词的首字母大写**
匹配字符串，让其字符串的首个字母大写

**21. 验证日期格式**
日期格式有2种 第一种是yyyy-mm-dd 或 yyyy/mm/dd
  分析 月和天数可以有1位或者2位
  正则：/^\d{4}[-\/]\d{1,2}[-\/]\d{1,2}$/;
测试代码如下：

**22. 验证邮箱的正则表达式**
思路分析: 邮箱的规则是: 由3部分组成
 由1个或者多个字母数字下划线和杠 + @ + 1个或者多个字母数字下划线和杠 + . + 1个或者多个字母数字下划线和杠
 因此正则：/^([a-zA-Z_0-9-])+@([a-zA-Z_0-9-])+(\.[a-zA-Z_0-9-])+$/
测试代码如下：

**23. 匹配代码中的a链接**
比如<a href='http://www.baidu.com'>222</a> 匹配这样的
 使用正则：/<a[.\s]*href\s*=\s*'http:\/\/.*'>\w*<\/a>/gi;
测试代码如下：

var reg = /

**24. 正则判断标签是否闭合**

没有闭合的标签有2种 类型 一种像img标签那样的

 <img src="" 

 还有一种像div或者p标签那样的

 <div>aaa</div>

 <p></p>

 分析：先匹配起始标签 如<img 或 <p 使用正则：/<[a-z]+/i 

 接着匹配标签里面的多个属性 使用正则 /(\s*\w*?\s*=\s*.+?)*(\s*?>[\s\S]*?(<\/\1>)+|\s*\/>)/i

 因此整个正则表达式合并为 /<([a-z]+)(\s*\w*?\s*=\s*.+?)*(\s*?>[\s\S]*?(<\/\1>)+|\s*\/>)/i

 正则分析如下：
 首先我们匹配像img标签或者div标签的开头位置时候 <img 或 <div 使用正则 /<([a-z]+)/i 以 < 开始 [a-z]中任意一个字符，修饰符+是一个或者多个字符 i代表不区分大小写
 (\s*\w*?\s*=\s*.+?)*的含义是：比如<img src = "" 或 <div id = "" 先\s*匹配0个或多个空白 \w* 匹配0个或者多个(数字或者字母或下划线) 后面的问号？(尽可能少的匹配)
 接着\s* 匹配0个或者多个空白 = 号紧接后面的 \s* 也是匹配0个或者多个空白 .+? 的含义是匹配除换行符之外的任意一个或多个字符(尽可能少的匹配);
 下面我们继续看标签的闭合 标签闭合有2种，一种像img这样的 <img src=""/> 还有一种是 <div></div>这样的；
 如果是类似img标签这样的话，匹配结束字符为 /> 匹配正则为：(\s*\/>); 如果是div这样的话 正则为：(\s*?>[\s\S]*?<\/\1>)
 <\/\1> 的含义是：指的是 ([a-z]+) 这个分组
 整个正则 /<([a-z]+)(\s*\w*?\s*=\s*".+?")*(\s*?>[\s\S]*?<\/\1>)|\s*\/>/i
 注意：在元字符* 或者 + 号后加一个问号(?) 目的是 尽可能少的匹配；

var reg = /<(a-z+)(\s*\w*?\s*=\s*”.+?”)(\s?>[\s\S]?<\/\1>)|\s\/>/i;
var str1 = “”;
var str2 = “

“;
console.log(reg.test(str1)); // true
console.log(reg.test(str2)); // true
var str3 = “

**25. 获取标签里面的内容**
正则和上面一样 只是使用了一个分组后，再获取那个分组即可；

var str = “

111

“;
str.match(/<( a-z+)(\s*\w*?\s*=\s*”.+?”) \s?>([\s\S]*?)<\/\1>/);
console.log(RegExp.$3); // 111

**26. 正则判断是否为数字和字母的混合**
规则：字母和数字的混合
正则如： /^(([a-z]+)([0-9]+)|([0-9]+([a-z]+)))[a-z0-9]*$/i
分析：^([a-z]+)([0-9]+) 含义是 以1个或多个字母开头 后面紧跟1个或者多个数字
     ^([0-9]+([a-z]+)) 或者是以1个或者多个数字开头 后面紧跟1个或者多个字母
  [a-z0-9]*$ 后面还可以紧跟数字或者字母0个或者多个
测试代码如下：

var reg = /^((a-z+)(0-9+)|(0-9+(a-z+)))[a-z0-9]*$/i;
var str1 = “aaaa”;
var str2 = “aa22”;
var str3 = “111sddtr”;
var str4 = “问问啊啊啊ass”;
var str5 = “1111ssdsd111sasddas”;
console.log(reg.test(str1)); //false
console.log(reg.test(str2)); // true
console.log(reg.test(str3)); // true
console.log(reg.test(str4)); // false
console.log(reg.test(str5)); // true

**27. 将阿拉伯数字转换为中文大写字符**

var arrs = [“零”,”壹”,”贰”,”叁”,”肆”,”伍”,”陆”,”柒”,”捌”,”玖”];
function replaceReg2(reg,str){
return str.replace(reg,function(m){return arrs[m];})
}
var reg = /\d/g;
var str1 = ‘13889294444’;
var str2 = ‘12889293333’;
var str3 = ‘23445567’;
console.log(replaceReg2(reg,str1)); // 壹叁捌捌玖贰玖肆肆肆肆
console.log(replaceReg2(reg,str2)); // 壹贰捌捌玖贰玖叁叁叁叁
console.log(replaceReg2(reg,str3)); // 贰叁肆肆伍伍陆柒

**28. 替换文本中的url为链接**
比如一段文本中有 aaaaahttp://www.baidu.combbbbb 需要替换成 aaaaa<a href="http://www.baidu.com">http://www.baidu.com</a>bbbbb
分析：最主要的还是需要正则匹配http://www.baidu.com 的url
正则如：/http:\/\/\w*(\.\w*)+/ig;
测试代码如下：

var str1 = “aaaaahttp://www.baidu.com bbbbb”;
//var reg = /http:\/\/\w*(.\w)+/ig;
var reg = /http:\/\/\w*(.\w*)+/ig;
function replaceUrl(reg,str) {
return str.replace(reg,function(r){
return ““+r+”“;
});
}
console.log(replaceUrl(reg,str1));
// aaaaahttp://www.baidu.com‘>http://www.baidu.com bbbbb
“`

chengzhang_jian

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaScript中的正则表达式

了解正则表达式的方法 RegExp对象表示正则表达式，它是对字符串执行模式匹配的工具；正则表达式的基本语法如下2种：直接量语法： /pattern/attributes; 2. 创建RegExp对象的语法 new RegExp(pattern,attributes);参数：参数pattern是一个字符串，指定了正则表达式的模式；参数attributes是一个可选的参
复制链接

扫一扫