详解javascript replace高级用法

在前端与后台交互的时候我们通常都需要将后台传递的数据绑定到html中，这个绑定数据的方式我们通常是使用jQuery或者使用原生的innerHTML进行绑定，当然也可以使用artTemplate模板来绑定数据，那么artTemplate模板它绑定数据的原理是什么呢？其实它就是利用了replace()方法。
对于正则replace约定了一个特殊标记符”$”：

1）、$i(i取值范围1~99)：表示从左到右正则子表达式所匹配的文本
2）、$&：表示与正则表达式匹配的全部文本
3）、$`(`：1旁边的那个键)：表示匹配字符串的左边文本
4）、$'('：单引号)：表示匹配字符串的右边文本
5）、$$：表示$转移

1、replace基本用法

<script type="text/javascript">  /*要求将字符串中所有的a全部用A代替*/  var str = "javascript is great script language!";  //只会将第一个匹配到的a替换成A  console.log(str.replace("a","A"));  //只会将第一个匹配到的a替换成A。因为没有在全局范围内查找  console.log(str.replace(/a/,"A"));  //所有a都被替换成了A  console.log(str.replace(/a/g,"A"));</script>

1.1、replace基本用法之替换移除指定class类

<script type="text/javascript">  /*要求将下面这个元素中的unabled类移除掉*/  <div class=”confirm-btn unabled mb-10” id=”j_confirm_btn”>提交</div>  var classname = document.getElementById(“j_confirm_btn”).className;  /*(^|//s)表示匹配字符串开头或字符串前面的空格，(//s|$)表示匹配字符串结尾或字符串后面的空格*/  var newClassName = classname.replace(/(^|//s)unabled(//s|$)/,””);  document.getElementById(“j_confirm_btn”).className = newClassName;</script>

2、replace高级用法之 ---- $i

2.1、简单的$i用法

<script>  /*要求：将字符串中的双引号用"-"代替*/  var str = '"a", "b"';  console.log(str.replace(/"[^"]*"/g,"-$1-"));  //输出结果为：-$1-, -$1-  /*解释：$1就是前面正则(/"[^"]*"/g)所匹配到的每一个字符。*/</script>

2.2、$i与分组结合使用

<script>  /*要求：将下面字符串替换成：javascript is fn.it is a good script language*/    var str = "javascript is a good script language";  console.log(str.replace(/(javascript)/s*(is)/g,"$1 $2 fn.it $2"));  /*解释：每一对括号都代表一个分组，从左往右分别代表第一个分组，第二个分组...；如上"*(javascript)"为第一个分组，"(is)"为第二个分组。$1就代表第一个分组匹配的内容，$2就代表第二个分组匹配的内容，依此类推...*/</script>

2.3、$i与分组结合使用----关键字高亮显示

当我们使用谷歌搜索的时候我们会发现我们搜索的关键字都被高亮显示了，那么这种效果用JavaScript能否显示呢？答案是可以的，使用replace()很轻松就搞定了。