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

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

1、replace基本用法

<script type="text/javascript"> 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"> <div class=”confirm-btn unabled mb-10” id=”j_confirm_btn”>提交</div> var classname = document.getElementById(“j_confirm_btn”).className; 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> 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()很轻松就搞定了。

<script> var str = "Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。"; document.write(str.replace(/(java)/gi,'<span style="color: red;font-weight: 800;">$1</span>')); </script>

2.4、反向分组----分组的反向引用

在正则中，当我们需要匹配两个或多个连续的相同的字符的时候，就需要用到反向引用了，查找连续重复的字符是反向引用最简单却也是最有用的应用之一。上面的”$i”也是反向分组的一种形式，这里再介绍另一种反向分组。

<script type="text/javascript"> console.log(/ab(cd)\1e/.test("abcde"));//false console.log(/ab(cd)\1e/.test("abcdcde"));//true var str = "abbcccdeee"; var newStr = str.replace(/(\w)\1+/g,"$1"); console.log(newStr); // abcde</script>

3、replace高级用法之参数二为函数

replace函数的第二个参数不仅可以是一个字符，还可以是一个函数！

3.1、参数二为函数之参数详解

<script> var str = "bbabc"; var newStr = str.replace(/(a)(b)/g,function (){ console.log(arguments);//["ab", "a", "b", 2, "bbabc"] })</script>

3.2、参数二为函数之首字母大写案例

<script> var str = "Tomorrow may not be better, but better tomorrow will surely come!"; var newStr = str.replace(/\b\w+\b/gi,function (matchStr){ console.log(matchStr);//匹配到的字符 return matchStr.substr(0,1).toUpperCase() + matchStr.substr(1); }); console.log(newStr);</script>

3.3、参数二为函数之绑定数据----artTemplate模板核心

<h1>周星驰喜剧电影：</h1><div id="content"></div><script type="text/javascript"> var data = { name: "功夫", protagonist: "周星驰" }, domStr = '<div><span>名称：</span><span>{{name}}</span></div><div><span>导演：</span><span>{{protagonist}}</span> </div>'; document.getElementById("content").innerHTML = formatString(domStr,data); function formatString(str,data){ return str.replace(/{{(\w+)}}/g,function (matchingStr,group1){ return data[group1]; }); }</script>

4、replace高级用法之获取与正则表达式匹配的文本

4.1、replace高级用法之获取与正则表达式进行匹配的源字符串

<script> var str = "i am a good man"; var newStr = str.replace(/good/g,"$&"); console.log(newStr);//结果：输出i am a good man </script>

4.2、replace高级用法之获取正则表达式匹配到的字符

<script> var str = "i am a good man"; var newStr = str.replace(/good/g,"$&-$&"); console.log(newStr); </script>

5、replace高级用法之获取正则匹配的左边的字符

<script> var str = "javascript is a good script"; var newStr = str.replace(/script/,"-$`"); console.log(newStr) </script>

6、replace高级用法之获取正则匹配的右边的字符

<script> var str = "javascript is a good script"; var newStr = str.replace(/script/," is a good language!it$'"); console.log(newStr) </script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。