javascript正则截取，替换字符串

温馨提示：(开发过程没有发现坑，打包竟然报错了，无语.jpg）

此篇文章末尾提到的例子当中使用的(?<=exp)，零宽度正回顾后发断言，在vue-cli项目当中，运行不会报错，但进入编译打包会报错如下：Invalid regular expression: /(?<=src=").*?(?=(">))/: Invalid group ，请自行使用?=替换或者根据个人需求进行适度修改

jq时代，当需要处理某些动态生成的dom内容，可能第一反应就是$,感觉起来很像是习惯后遗症，思维定势。

从另一角度出发，已经生成的dom内容，入眼即可为字符串嘛， 这样，javascript不就大有发挥的舞台了嘛，最近需要处理特别多动态生成的文本，各种规则，好在js特别给力，可以很快解决最新需求，提取一个替换src的例子，复习一下js的正则字符匹配相关的知识吧

正则表达式：描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。

非打印字符：

\cx：匹配由x指明的控制字符 

 \f：换页符   

\n：换行符 

 \r：回车  

\s：空格，等价于 [ \f\n\r\t\v]   

\S:  非空字符，等价于 [^ \f\n\r\t\v]

\t：制表符

\v：垂直制表符

特殊字符：

$：匹配结尾

(): 标记一个子表达式的开始和结束位置,子表达式可以获取(str.replace()方法中可以通过$&获取整个字串)

*: 子表达式零次或者多次

+: 子表达式一次或多次

. : 匹配除换行符 \n 之外的任何单字符

[：标记一个中括号表达式的开始

?: 匹配前面的子表达式零次或一次，或指明一个非贪婪限定符

\: 转义符

^：匹配输入字符串的开始位置，除非在方括号表达式中使用，此时它表示不接受该字符集合（取反）

{: 标记限定符表达式的开始

|：指明两项之间的一个选择

限定符：

*： 零次或多次，{0，}

+： 一次或者多次 {1,} 

?:  零次或者一次 {0，1}

{n}:  n为正整数，匹配n次

{n,}: 至少n次

{n,m}： n到m次

*、+限定符都是贪婪的，因为它们会尽可能多的匹配文字，只有在它们的后面加上一个?就可以实现非贪婪或最小匹配。

定位符：

^：开头

$: 结尾

\b：匹配一个单词边界，即字与空格间的位置

\B: 非单词边界

选择：

用圆括号将所有选择项括起来，相邻的选择项之间用|分隔。但用圆括号会有一个副作用，使相关的匹配会被缓存，此时可用?:放在第一个选项前来消除这种副作用。

其中 ?: 是非捕获元之一，还有两个非捕获元是 ?= 和 ?!，这两个还有更多的含义，前者为正向预查，在任何开始匹配圆括号内的正则表达式模式的位置来匹配搜索字符串，后者为负向预查，在任何开始不匹配该正则表达式模式的位置来匹配搜索字符串。

反向：

对一个正则表达式模式或部分模式两边添加圆括号将导致相关匹配存储到一个临时缓冲区中，所捕获的每个子匹配都按照在正则表达式模式中从左到右出现的顺序存储。缓冲区编号从 1 开始，最多可存储 99 个捕获的子表达式。每个缓冲区都可以使用 \n 访问，其中 n 为一个标识特定缓冲区的一位或两位十进制数。

可以使用非捕获元字符 ?:、?= 或 ?! 来重写捕获，忽略对相关匹配的保存。

JavaScript replace() 方法

stringObject.replace(regexp/substr,replacement)

在调用replace这个方法时，需要注意两点：

第一点：必须传递两个参数，第二个参数可以是函数，此函数的第一个参数是匹配模式的字符串。接下来的参数是与模式中的子表达式匹配的字符串，可以有 0 个或多个这样的参数。接下来的参数是一个整数，声明了匹配在 stringObject 中出现的位置。最后一个参数是 stringObject 本身。

第二点： replacement 中的 $ 字符具有特定的含义。如下表所示，它说明从模式匹配得到的字符串将用于替换。$1-99为与 regexp 中的第 1 到第 99 个子表达式相匹配的文本， $&为与 regexp 相匹配的子串，$`为位于匹配子串左侧的文本，$'为位于匹配子串右侧的文本，$$为直接量符号

实际运用如下：

var str = '<img src="oldsrc">

(1)：截取字符串中以src="开头，">结尾的部分（包含开头和结尾）

   var matchReg = /src=".*?\>">/gi
    console.log(str.match(matchReg))
(2): 开头包含src=",不包含>结尾

    var matchReg = /src=".*?(?=>)">/gi 
    console.log(str.match(matchReg))

(3)：开头不包含src=",也不包含"

   var matchReg = /(?<=src=").*?(?=>)">/gi 
    console.log(str.match(matchReg))

(4)：开头不包含src=",结尾包含> 

   var matchReg = /(?<=src=").*?\>"/gi 
    console.log(str.match(matchReg))

(5)：开头包含src="，结尾包含>或者.jpg

   var matchReg = /src=".*?(>|.jpg)/

   console.log(str.match(matchReg))

(6)：开头包含src=", 结尾不包含>或者.jpg

   var matchReg = /src=".*?(?=(>|.jpg))/

   console.log(str.match(matchReg))

 

$&为匹配的子串

最终可以直接使用如下方法实现全动态文本替换

var allStr = '全文本'

var nstr = allStr.replace(/(?<=src=").*?(?=(">|.jpg))/gi, '$&' + 'test')