导读

嗨咯，亲爱的读者你好！既然你点进来了，那么想必你一定对正则感兴趣吧。

如果你对正则充满畏惧心理，不懂也不理解正则，没关系，往下看，

看完这篇文章，相信你一定会对正则充满兴趣，并且不再畏惧，消灭恐惧的最好办法，就是面对恐惧！！

加油！！读完它，理解正则操作，然后爱上正则！

正则表达式是匹配模式，要么匹配字符，要么匹配位置。请记住这句话。

摘自：老姚 JS正则表达式完整教程（略长

老姚对正则的评价非常到位，老姚的文章也写得，我很喜欢，希望你能记住，这篇文章就是在匹配的基础上做的相关的操作。

如果你没有正则的基础，请不要害怕，这篇文章会一步一步的带你了解正则相关的操作，每个操作的案例相对简单易理解，但是展示出了每个操作的作用。在阅读文章前，请仔细的阅读前置知识，了解相关api的作用。

如果你学习过正则，对正则有一定了解，那么这篇文章非常适合你，这篇文章可以加深你对正则用法的理解。

如果你是正则高手，文中有写的不对的和写得不妥当的，也请指出错误。

本文不涉及正则表达式的书写教学，但是并影响你对每个增删查改操作的理解。如果你想学习正则表达式的书写，在文章后面我有推荐学习正则的优秀文章。

相信你看过这篇文章后，会提高你对正则的理解与学习正则的兴趣。加油！

前置知识

既然是用正则对字符串的操作，那么，我们得需要了解相关的方法，对吧？？

与正则相关的方法就6个（真的很少很容易理解！！）

如果你对下面六个方法非常熟悉了，你可以直接从前置知识的总结处开始看（￣︶￣）↗

// 字符串四个
String#search    // 查找匹配到字符串的位置，返回位置index
String#split     // 以正则匹配到的字符串截断原字符串，返回数组
String#match     // 匹配字符串并返回一些信息
String#replace   // 对匹配到的字符串进行替换，返回修改后的字符串
// 正则两个
RegExp#test      // 匹配字符串是否有符合正则的部分
RegExp#exec      // 匹配字符串，并返回相关信息

1.String#search

语法：str.search(regexp)

定义：正则去匹配字符串，如果匹配成功，就返回匹配成功的位置，匹配失败就返回-1.

var regex = /\d/
var string = "abc123"
console.log( string.search(regex) )
// => 3

注意： 当传入的参数是字符串时，会把字符串转成正则表达式。

2.String#split

语法：str.split(separator, limit)

定义：split()方法把原字符串分割成子字符串组成数组，并返回该数组。

两个参数均是可选的，其中 separator 表示分隔符，它可以是字符串也可以是正则表达式。如果忽略 separator，则返回的数组包含一个由原字符串组成的元素。如果 separator 是一个空串，则 str 将会被分割成一个由原字符串中字符组成的数组。limit 表示从返回的数组中截取前 limit 个元素，从而限定返回的数组长度。

var regex = /\D/
console.log( "2017/06/26".split(regex) )
console.log( "2017.06.26".split(regex, 2) )
console.log( "2017-06-26".split(regex) )
// => ["2017", "06", "26"]
// => ["2017", "06"]
// => ["2017", "06", "26"]

3.String#match

语法：str.match(regexp)

定义：查找出与正则相匹配的项。

返回值：

正则的匹配模式为全局匹配：返回匹配的数组或则null
正则的匹配模式不是为全局匹配：返回匹配到的项，groups：分组，index:找到结果的索引,input:原字符串

var str = "aa22bb313cc444ff"
var reg = /\d+/g
var reg1 = /(\d+)([a-z]+)(\d+)/
console.log( str.match( reg ) )
console.log( str.match( reg1 ) )
// => ["22", "313", "444"]
// => ["22bb313", "22", "bb", "313", index: 2, input: "aa22bb313cc444", groups: undefined]

注意： 跟search一样，当传入的参数是字符串时，会把字符串转成正则表达式。

4.String#replace

语法：str.replace( regexp | substr, newSubStr | function )

参数说明：

regexp: 一个 RegExp 对象. 该正则所匹配的内容会被第二个参数的返回值替换掉。
substr: 一个要被 newSubStr 替换的字符串.
newSubStr: 替换掉第一个参数在原字符串中的匹配部分. 该字符串中可以内插一些特殊的变量名.
function: 用来创建新子字符串的函数，该子字符串用于替换与给定regexp或的匹配项substr。

参数function的参数说明：

第一个参数：整个正则或者字符串匹配到的字符串，
中间的参数：依次为正则中分组匹配到的字符串，
倒数第二个参数：找到结果的索引
倒数第一个参数：原字符串

var str = "aa22bb313cc444ff"
var reg = /(\d+)(\w{1})/g
str = str.replace( reg, function( str, s1, s2, index, sour ){
    console.log( "参数列表：", str, s1, s2, index, sour )
    console.log( arguments )
    return s1 + "---" + s2
})
console.log( str )

5.RegExp#test

语法：reg.test( str )

说明：正则去匹配字符串，匹配成功，返回true，匹配失败，返回false

var regex = /\d/
var string = "abc123"
console.log( regex.test(string) )
// => true

6.RegExp#exec

语法：reg.exec( str )

说明：exec() 方法在一个指定字符串中执行一个搜索匹配。返回一个结果数组或 null。

var str = "aa22bb313cc444ff"
var reg = /(\d+)(\w{1})/g
console.log( reg.exec( str ))
console.log( reg.exec( str ))
console.log( reg.exec( str ))

注意当使用全局模式时，exec函数会把这次匹配到的位置存放在当前正则reg的lastIndex里面，下次调用时，会从这次的最后位置开始查找。

总结

通过上面简单的案例与说明，相信你已经可以看出我们要进行的增删改查操作应该用哪个方法了吧？我们来总结一下：

增：6个方法中，只有replace可以对匹配到的字符串进行操作，所以当我们需要在字符串中增加内容时，我们就可以使用replace方法。
删：6个方法中，split方法以匹配到的字符串为断点截断字符串返回数组，replace也可以对匹配到的字符串进行操作，所以删除可以使用split和replace方法。
查：6个方法中，除了split方法，都或多或少可以得到一些匹配到字符串的信息。
改：6个方法中，只有replace方法可以操作匹配到的字符串，所以修改只有用replace方法。

好了，下面详细的介绍下各种操作的详细情况。

1.增

相信你一定遇到过往字符串里面加字符串的情况，你一般是怎么操作的呢？我们来分析下：

当向字符串中添加字符串时，有两种添加情况，一种：添加到匹配的字符串前，另一种是：添加到匹配的字符串后面。

是吧？？好，开始操作吧！

添加到匹配字符串前：

我们可以使用正则位置匹配表达式：(?=p)，正向肯定预查，其中p是一个子模式，即p前面的位置。

var result = "hello".replace(/(?=ll)/g, '#')
console.log(result)
// => "he#llo"

也可以直接使用函数操作：

var result = "hello".replace(/(?=ll)/g, function( str ){
    return "#" + str
})
console.log(result)
// => "he#llo"

添加到匹配字符串后：

我们可以使用正则位置匹配表达式：(?<=p)，反向肯定预查，就是p后面的位置。

var result = "hello".replace(/(?<=ll)/g, function( str ){
    return "#" + str
})
console.log(result)
// => "hell#o"

当然，你也可以直接使用replace的函数操作完成。

补充

在整个字符串前和后面添加，

var result = "hello".replace(/^|$/g, function( str ){
    return "#" + str
})
console.log(result)
// => "#hello#"

在每个单词的前后面添加

var result = "hello world".replace(/^|$/g, function( str ){
    return "#" + str
})
console.log(result)
// => "#hello# #world#"

2.删：

经过我们前面的总结，删除可以使用String.split和String.replace完成。

String.splite

可以知道，使用splite方法返回的是一个数组，操作后，我们可以使用join()函数，返回字符串

var str = "aa22bb313cc444ff"
var reg = /\d+/
console.log( str.split( reg ).join("") )
// => "aabbccff"

String.replace

使用replace就非常简单了，我们可以把第二个参数传 "" ,也可以用函数操作，返回 ""即可。

var str = "aa22bb313cc444ff"
var reg = /\d+/g       // 全局模式，不加全局模式，只会替换一次
str = str.replace( reg, "" )
console.log( str )
// => "aabbccff"

3.查

查找可以分为两类：一种是需要详细结果的，一种是不需要详细结果的。

不需要详细结果

不需要详细结果就是返回 true 和 false 就可以了。这里可以使用test

var reg = /^1[345789]\d{9}$/
var res = reg.test( "13882628333" )
// => true

需要详细结果

使用String.match()

var reg = /^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/
console.log( "2017-06-10".match( reg ) )
// => ["2017-06-10", "2017", "06", "10", index: 0, input: "2017-06-10", groups: undefined]

var reg = /class=\"(.*)?"/
var string = '<div id="container" class="main box"></div>'
console.log( string.match( reg ))
// => ["class="main box"", "main box", index: 20, input: "<div id="container" class="main box"></div>", groups: undefined]

var reg = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g
var str = "#ffbbad #Fc01DF #FFF #ffE"
console.log( str.match( reg ) )
// => ["#ffbbad", "#Fc01DF", "#FFF", "#ffE"]

使用reg.exec()

var regex = /^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/
console.log( reg.exec( "2017-06-10" ) )
// => ["2017-06-10", "2017", "06", "10", index: 0, input: "2017-06-10", groups: undefined]

var reg = /class=\"(.*)?"/
var str = '<div id="container" class="main box"></div>'
console.log( reg.exec( str ) )
// => ["class="main box"", "main box", index: 20, input: "<div id="container" class="main box"></div>", groups: undefined]

var reg = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g
var str = "#ffbbad #Fc01DF #FFF #ffE"
var arr = []
var temp
while( temp = reg.exec( str ) ){
    arr.push( temp[0] )
}
console.log( arr )

4.改

经过前面的终结，我们知道只有replace可以进行修改操作：

var str = "aa22bb313cc444ff"
var reg = /(\d+)(\w{1})/g
str = str.replace( reg, function( str, s1, s2, index, sour ){
    return s1 + "---" + s2
})
console.log( str )
// => "aa22---bb313---cc444---ff"

后记

写下这篇文章，就是想让自己梳理下正则相关的api与用法，加强一下自己写正则的信心。

看了这篇文章，你是否对正则又有了新的理解呢？对自己写正则是否又增加了几分信心呢？

总结

ok!~!正则对字符串的增删查改操作学完了，是不是感觉自己又行了，接下来就要看你的正则表达式给不给力了！

只要正则表达式写得够给力，字符串增删查改操作那还不是手到擒来吗？？加油哈！！！

本文主要讲述了正则的相关用法，考虑到正则新手，所以每个操作都只是做的很简单的案例，正则表达式大都很简单，但是，我相信，看了本文，你会更有信心去学习正则。

学习正则：

如果你想学习正则表达式的书写，我这里将推荐一些好的文章给你：

老姚-JS正则表达式完整教程（略长）非常推荐的一篇文章，我就是看这篇文章学习的正则，适合有一点正则基础的同学

考拉海前端团队---JS 的正则表达式条理清晰--适合初学者学习正则的书写

文章在精不在多，这两篇文章对初学正则的同学非常友好，能引导你写出优秀的正则表达式，再结合这篇文章对正则表达式的运用，相信你会对正则的运用游刃有余。

参考资料：

老姚-JS正则表达式完整教程（略长）

MDN-String.prototype.match()

MDN-String.prototype.replace()

共勉

写下这篇文章，希望对你有帮助，与君共勉！

正则之给字符串来一套增删改查服务

导读