专业电商网站建设哪家好seo兼职论坛
详解javascript replace高级用法
在前端与后台交互的时候我们通常都需要将后台传递的数据绑定到html中，这个绑定数据的方式我们通常是使用jQuery或者使用原生的innerHTML进行绑定，当然也可以使用artTemplate模板来绑定数据，那么artTemplate模板它绑定数据的原理是什么呢？其实它就是利用了replace()方法。
对于正则replace约定了一个特殊标记符”$”：
1)、$i(i取值范围1~99)：表示从左到右正则子表达式所匹配的文本
2)、$&：表示与正则表达式匹配的全部文本
3)、$`(`：1旁边的那个键)：表示匹配字符串的左边文本
4)、$'('：单引号)：表示匹配字符串的右边文本
5)、$$：表示$转移
1、replace基本用法
/*要求将字符串中所有的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"));
1.1、replace基本用法之替换移除指定class类
/*要求将下面这个元素中的unabled类移除掉*/
var classname = document.getElementById(“j_confirm_btn”).className;
/*(^|\\s)表示匹配字符串开头或字符串前面的空格，(\\s|$)表示匹配字符串结尾或字符串后面的空格*/
var newClassName = classname.replace(/(^|\\s)unabled(\\s|$)/,””);
document.getElementById(“j_confirm_btn”).className = newClassName;
2、replace高级用法之 ---- $i
2.1、简单的$i用法
/*要求：将字符串中的双引号用"-"代替*/
var str = '"a", "b"';
console.log(str.replace(/"[^"]*"/g,"-$1-"));
//输出结果为：-$1-, -$1-
/*解释：$1就是前面正则(/"[^"]*"/g)所匹配到的每一个字符。*/
2.2、$i与分组结合使用
/*要求：将下面字符串替换成：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就代表第二个分组匹配的内容，依此类推...*/
2.3、$i与分组结合使用----关键字高亮显示
当我们使用谷歌搜索的时候我们会发现我们搜索的关键字都被高亮显示了，那么这种效果用JavaScript能否显示呢？答案是可以的，使用replace()很轻松就搞定了。
/*要求：将下列字符串中的"java"用红色字体显示*/
var str = "Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。
JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。
但JavaScript的主要设计原则源自Self和Scheme。";
document.write(str.replace(/(java)/gi,'$1'));
/*解释：必须要开启全局搜索和忽略大小写，否则匹配不到所有的”java”字符*/
2.4、反向分组----分组的反向引用
在正则中，当我们需要匹配两个或多个连续的相同的字符的时候，就需要用到反向引用了，查找连续重复的字符是反向引用最简单却也是最有用的应用之一。上面的”$i”也是反向分组的一种形式，这里再介绍另一种反向分组。
/* /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
3、replace高级用法之参数二为函数
replace函数的第二个参数不仅可以是一个字符，还可以是一个函数！
3.1、参数二为函数之参数详解
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"
*/
})
3.2、参数二为函数之首字母大写案例
/*要求：将下列字符串中的所有首字母大写*/
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);
3.3、参数二为函数之绑定数据----artTemplate模板核心
周星驰喜剧电影：
var data = {
name: "功夫",
protagonist: "周星驰"
},
domStr = '
document.getElementById("content").innerHTML = formatString(domStr,data);
/*绑定数据的核心就是使用正则进行匹配*/
function formatString(str,data){
return str.replace(/{{(\w+)}}/g,function (matchingStr,group1){
return data[group1];
});
}
4、replace高级用法之获取与正则表达式匹配的文本
4.1、replace高级用法之获取与正则表达式进行匹配的源字符串
var str = "i am a good man";
var newStr = str.replace(/good/g,"$&");
console.log(newStr);//结果：输出i am a good man
/*解释：在这里”$&”就是与正则表达式进行匹配的那个源字符串*/
4.2、replace高级用法之获取正则表达式匹配到的字符
/*要求：将"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”*/
5、replace高级用法之获取正则匹配的左边的字符
/*要求：将下列字符串替换成"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替换掉。*/
6、replace高级用法之获取正则匹配的右边的字符
/*要求：将下列字符替换成"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"替换掉*/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农之家。
JavaScript中的replace()方法使用详解
该方法找到一个正则表达式的字符串之间的匹配，并取代了匹配的子带的新的子串。
替换字符串可以包含以下特殊替换模式：
语法
string.replace(regexp/substr, newSubStr/function[, flags]);
下面是参数的详细信息：
regexp : 一个RegExp对象。匹配被替换参数的返回#2.
substr : 一个字符串，由newSubStr 来替换
newSubStr : 它取代从参数中收到的子字符串 #1.
function : 一个函数被调用以创建新的子串
flags : 包含的正则表达式标志的任意组合字符串： g - 全局匹配， i - 忽略大小写，m - 匹配多行。此参数仅用于如果所述第一参数是一个字符串。
返回值:
它只是返回一个新的改变的字符串
例子：
下面的示例演示了如何使用全球和忽略大小写标志，允许替换，以使用字符串'oranges'取代'apples'
JavaScript String replace() Methodvar re = /apples/gi;
var str = "Apples are round, and apples are juicy.";
var newstr = str.replace(re, "oranges");
document.write(newstr );
例子：
下面的例子演示了如何在一个字符串转换的词：
JavaScript String replace() Methodvar re = /(\w+)\s(\w+)/;
var str = "zara ali";
var newstr = str.replace(re, "$2, $1");
document.write(newstr);
以上就是本次给大家分享的关于java的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。