先复习一下正则表达式，正则表达式基础知识
//星号(*) : 星号代表匹配它前面一个字符任意遍(0或任意次)
//加号(+): 加号是一个与星号(*)类似的通配符，它也是数量词，表示匹配前面的字符一次或多次（至少一次).
//它与星号的差别就在这里，星号可以匹配0次，加号则必须一次以上。
//问号(?): 问号也是一个数量词，它代表匹配前一个字符0或1次。
//中括号[]： 中括号用来表示一个字符集合，
//如果这个集合有很多元素，如26个字母，数字等，一个个地写在中括号里，未免太麻烦太蠢笨，
//这时可以用连字符(hyphen)来表示一个范围，
// 如:[a-z]表示小写字母的集合，
// [a-zA-Z]表示大小写字母的集合。
// 脱字符^ (caret).
// 这种写法表示，匹配任何不在该集合中的字符，与上面的用法刚好相反
//特殊字符：
// \w -- (小写w) 表示字母或数字，等价于 [a-zA-Z0-9]
// \W -- (大写W)非字母且非数字，与\w相反 等价于 '[^A-Za-z0-9_]'
// \s -- (小写s)匹配一个空格字符，包括：空格，换行，回车,tab,等价于[ \n\r\t\f]
// \S -- (大写S)匹配非空格字符，\s的相反 等价于 [^ \f\n\r\t\v]。
// \d -- 表示10进制数字，等价于 [0-9]
// \D -- 匹配一个非数字字符。等价于 [^0-9]。
// \f 匹配一个换页符。等价于 \x0c 和 \cL。
// \n 匹配一个换行符。等价于 \x0a 和 \cJ。
// \r 匹配一个回车符。等价于 \x0d 和 \cM。
// \t 匹配一个制表符。等价于 \x09 和 \cI。
// \v 匹配一个垂直制表符。等价于 \x0b 和 \cK。
// 大括号:{}
// 大括号的作用是指定重复前面一个字符多少遍:
// {N} 重复N遍
// {n,m} 重复 n~m 遍
// {n,} 至少重复n遍
// {,m} 至多重复m遍
//定位符：
// ^ 匹配输入字符串的开始位置。
// $ 匹配输入字符串的结束位置。
// \b 匹配一个单词边界，也就是指单词和空格间的位置。//例如， 'er\b' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。
// \B 和\b相反，匹配非单词边界。'er\B' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。函数的用法实例
<script>
/******************************************************************************
*
*
*
replace用法1 - 基础用法
最核心的易错点：如果要替换全部匹配项，需要传入一个 RegExp 对象并指定其 global 属性。
*******************************************************************************/
console.log('replace基本用法')
//基本用法：
myString = "javascript is a good script language";
//在此我想将字母a替换成字母A
console.log("大小写单独替换："+myString.replace("a","A"));
// 我想大家运行后可以看到结果，它只替换了找到的第一个字符，如果想替换多个字符怎么办？
// 答案：结合正则表达式，这也是replace的核心用法之一！
//将字母a替换成字母A 错误的写法 少了/g
myString = "javascript is a good script language";
console.log("全局替换少了/g："+myString.replace(/a/,"A"));
//console.log(myString.replace(new RegExp('a','gm'),"A"));
//将字母a替换成字母A 正确的写法 /g表示匹配所有
myString = "javascript is a good script language";
console.log("全局替换："+myString.replace(/a/g,"A"));
/******************************************************************************
replace用法2 - 高级用法 特殊标记$
*******************************************************************************/
//replace高级技巧 - 特殊标记$
console.log('replace功能4 - 特殊标记$')
// 对于正则replace约定了一个特殊标记符$：
// 1.$i (i:1-99) : 表示从左到右正则子表达式所匹配的文本。
// 2.$&:表示与正则表达式匹配的全文本。
// 3.$`(`:切换技能键)：表示匹配字符串的左边文本。
// 4.$'(‘:单引号)：表示匹配字符串的右边文本。
// 5.$$：表示$转移。
// $i (i:1-99) : 表示从左到右正则子表达式所匹配的文本
//案例1- 匹配后替换
console.log('replace功能1 - 匹配后替换')
//在本例中，我们将把所有的花引号替换为直引号：
myString = '"a", "b"';
myString = myString.replace(/"([^"]*)"/g, "'$1'");//匹配"任何非引号字符"，然后替换成'任何非引号字符'里面
console.log(myString)
//案例2- 匹配后替换
myString= "javascript is a good script language";
console.log("只替换匹配部分:"+myString.replace(/(javascript)\s*(is)/g,"$1 $2 fun. it $2"));//匹配javascript 0个或者多个空格 is ，然后替换成 javascript is fun. it is，
//注意，这里只替换掉了匹配的部分，后面a good script language不再匹配部分里
//案例3 - 分组匹配后颠倒
console.log('replace功能2 - 颠倒')
//在本例中，我们将把 "itcast,cn" 转换为 "cn itcast" 的形式：
myString = "itcast , cn";
myString = myString.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");//这里正则匹配了itcast , cn整个串，然后根据（）标记
console.log(myString)
//案例4 - 分组匹配后颠倒
myString = "boy & girl";
myString.replace(/(\w+)\s*&\s*(\w+)/g,"$2 & $1") //girl & boy
console.log(myString)
// $&:表示与正则表达式匹配的全文本。
myString = "boy";
myString.replace(/\w+/g,"$&-$&") // boy-boy
console.log(myString)
// $`(`:切换技能键)：表示匹配字符串的左边文本。
myString = "javascript";
myString.replace(/script/,"$& != $`") //javascript != java
console.log(myString)
// $'(‘:单引号)：表示匹配字符串的右边文本。
myString = "javascript";
myString.replace(/java/,"$$&' is ") // javascript is script
console.log(myString)
/******************************************************************************
replace用法2 - 高级用法 第二个参数可以是函数 - 最常用
*******************************************************************************/
//无敌的函数 - replace第二个参数可以传递函数
//如果第二参数是一个函数的话，那么函数的参数是什么呢？并且这个函数的执行次数，与正则表达式在整个串匹配的次数相同，
console.log('replace功能5 - 无敌的函数 - replace第二个参数可以传递函数')
myString = "abbabc";
myString.replace(/(a)(b)/g, function(){
console.log("sunlandong")
console.log(arguments) // 输出结果["ab", "a", "b", 2, "bbabc"]
});
// 参数将依次为：
// 1、整个正则表达式匹配的字符。
// 2、第一分组匹配的内容、第二分组匹配的内容…… 以此类推直到最后一个分组。
// 3、此次匹配在源自符串中的下标（位置）。
// 4、源自符串
// 所以例子的输出是 ["ab", "a", "b", 2, "bbabc"]
// 函数执行的次数，就是正则在整个字符串匹配的次数
//用法举例 首字母大写 -- 一个参数 表示匹配的整个字符串
console.log('replace功能3 - 将首字符转为大写')
//在本例中，我们将把字符串中所有单词的首字母都转换为大写：\b匹配一个单词边界
myString = 'aaa bbb ccc';
myString=myString.replace(/\b\w+\b/g, function(word){
console.log("匹配的东西"+word);
return word.substring(0,1).toUpperCase()+word.substring(1);}
);
console.log(myString)
//用法举例 首字母大写 -- 多个参数 - 第一个表示匹配的整个字符串，后面的表示分组中的内容
/* 字符^
意义：表示匹配的字符必须在最前边。
例如：/^A/不匹配"an A,"中的'A'，但匹配"An A."中最前面的'A'。
字符$
意义：与^类似，匹配最末的字符。
例如：/t$/不匹配"eater"中的't'，但匹配"eat"中的't'。
\s匹配任何不可见字符，包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。
| 表示或者运算*/
function capitalize(str){
return str.replace( /(^|\s)([a-z])/g , function(m,p1,p2){
console.log("匹配的东西"+m);
console.log("匹配的东西第一个"+p1);
console.log("匹配的东西第二个"+p2);
return p1+p2.toUpperCase();//匹配结果 am a boy
} );
};
myString = "i am a boy !"
console.log(capitalize(myString)) //I Am A Boy！<script>
利用replace，使用模板方法，做数据绑定
OK，了解了上面的东西之后，下面就来实际应用一把，只是举例应用，并不是要真的写一个模板，希望大家举一反三
//简单的数据绑定formateString
formateString: function(str, data) {
return str.replace(/@\((\w+)\)/g, function(match, key) {
return typeof data[key] === "undefined" ? '' : data[key]
});
},
先贴出方法，几行代码也不难，意思也很简单，就是匹配@(任意字符)，然后将其替换为参数data中相应的数据
看一下一个完整例子额
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="mydiv">
<strong> 用户名字： </strong> @(name) <br>
<strong style = 'color:green'> 地址: </strong> @(address) <br>
<strong style = 'color:yello'> 性别: </strong> @(sex)
</div>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/satisfy.js" ></script>
<script id="mytemplate" type="text/javascript">
</script>
<script type="text/javascript">
var user = {
name: "sunland",
address: "北京海淀",
sex: "男"
}
document.getElementById("mydiv").innerHTML=formateString(document.getElementById("mydiv").innerHTML,user);
<!--
上面就是一个完整的简单用法，
实际应用中的话，大部分应该都是这样的情况，html的dom节点可能都是动态生成的，
ajax请求时候，服务器返回相应的data，我们甚至要遍历data，然后循环多次生成多个dom节点，添加到页面，但是差不多也是这个用法
var data = [{
name: "sunland",
address: "北京海淀",
sex: "男"
},
{
name: "sunland",
address: "北京海淀",
sex: "男"
},
{
name: "sunland",
address: "北京海淀",
sex: "男"
},
{
name: "sunland",
address: "北京海淀",
sex: "男"
}]
data为服务器返回数据
而这个时候，页面的dom节点，需要动态生成，准备dom的字符串，以此为模板
var str = "<strong> 用户名字： </strong> @(name) <br> "
+= "<strong style = 'color:green'> 地址: </strong> @(address) <br>"
+= "<strong style = 'color:yello'> 性别: </strong> @(sex)"
然后我们遍历他
for(var i=0;i<data.length;i++){
$("#mydiv").append(formateString(str,data[i]));
}
//简单的数据绑定formateString
差不多就是这个意思，现在比较流行的模板框架，其核心原理也都是这个函数，如果有必要的话，也可以使用这些框架，
arttemplate，阿里的kissy的数据绑定部分,angular的数据绑定，facebook的开源，vue等等
-->
function formateString(str, data) {
return str.replace(/@\((\w+)\)/g, function(match, key) {
return typeof data[key] === "undefined" ? '' : data[key]
});
}
</script>
</body>
</html>
205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
