详解javascript 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>

<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>

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

<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>

<script>  /*要求：将下列字符串中的"java"用红色字体显示*/    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>'));  /*解释：必须要开启全局搜索和忽略大小写，否则匹配不到所有的”java”字符*/</script>

<script type="text/javascript">  /* /ab(cd)/1e/ 这里的 /1 表示把第1个分组的内容重复一遍*/  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>

<script>  var str = "bbabc";  var newStr = str.replace(/(a)(b)/g,function (){  console.log(arguments);//["ab", "a", "b", 2, "bbabc"]   /*参数依次为：    1、整个正则表达式所匹配到的字符串----"ab"    2、第一个分组匹配到的字符串，第二个分组所匹配到的字符串....依次类推一直      到最后一个分组----"a，b"    3、此次匹配在源字符串中的下标，返回的是第一个匹配到的字符的下标----2    4、源字符串----"bbabc"   */  })</script>

<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>

<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>

<script>  var str = "i am a good man";  var newStr = str.replace(/good/g,"$&");  console.log(newStr);//结果：输出i am a good man  /*解释：在这里”$&”就是与正则表达式进行匹配的那个源字符串*/</script>

<script>  /*要求：将"i am a good man"替换成"i am a good-gond man" */    var str = "i am a good man";  var newStr = str.replace(/good/g,"$&-$&");  console.log(newStr);  /*解释：在这里”$&”可以获取到前面正则表达式匹配的内容，如上面的”$&”就是正则表达式匹配到的”good”*/</script>

<script>  /*要求：将下列字符串替换成"java-java is a good script"*/  var str = "javascript is a good script";  var newStr = str.replace(/script/,"-$`");  console.log(newStr)  /*解释："$`"获取的是正则左边的内容，如上正则中"script"字符前面的是"java"，"-$`"就是"-java"，"-$`"会把script替换掉。*/</script>

<script>   /*要求：将下列字符替换成"java is a good language!it is a good script is a good script"*/     var str = "javascript is a good script";  var newStr = str.replace(/script/," is a good language!it$'");  console.log(newStr)  /*解释："$'"获取的就是str右边的内容，如上正则中"$'"就是" is a good script"。  " is a good language!it$'"会把正则匹配到的"script"替换掉*/</script>