js强大函数replace详解,利用其做模板方法与数据绑定
来源:互联网 发布:舒伯特 幻想曲 知乎 编辑:程序博客网 时间:2024/06/05 03:23
先复习一下正则表达式,正则表达式基础知识
//星号(*) : 星号代表匹配它前面一个字符任意遍(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,了解了上面的东西之后,下面就来实际应用一把,只是举例应用,并不是要真的写一个模板,希望大家举一反三
//简单的数据绑定formateStringformateString: 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>
0 0
- js强大函数replace详解,利用其做模板方法与数据绑定
- js String的replace方法详解
- 注解式控制器详解(SpringMVC强大的数据绑定)
- SpringMVC强大的数据绑定—注解式控制器详解
- SpringMVC强大的数据绑定—注解式控制器详解
- SpringMVC-注解式控制器详解-SpringMVC强大的数据绑定
- js 动作与函数绑定
- js 动作与函数绑定
- replace()方法使用函数做替代字符串的说明
- 【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板
- Oracle的Replace函数与translate函数详解与比较
- Oracle的Replace函数与translate函数详解与比较
- Oracle的Replace函数与translate函数详解与比较
- Angular JS解析(四)——模板与数据绑定
- d3.js——选择集与数据绑定模板应用
- js的replace详解
- js的replace函数
- JS的replace方法
- Redis主从复制,读写分离,主从切换
- OGNL表达式
- 线性表(List) 二
- 关于 Android 进程保活,你所需要知道的一切
- Android 性能分析工具dumpsys的使用
- js强大函数replace详解,利用其做模板方法与数据绑定
- 用Nodejs连接MySQL
- Visual Studio 2010 打包C#项目程序
- Android中postDelayed方法的使用
- Java实现几种常见排序方法
- 关于热修复框架nuwa的使用
- jenkins安装与配置
- 相同的雪花
- 剑指offer----二叉搜索树的后序遍历----java实现