JavaScript的String类型replace()方法介绍和使用replace()方法实现简单html模板替换功能
2016-09-09 00:00
1256 查看
JavaScript字符串的replace()方法介绍
为了简化替换子字符串的操作,ECMAScript提供了replace()方法。这个方法接收两个参数:第一个参数可以是一个字符串(这个字符串不会转换成正则表达式)或者是一个RegExp函数。如果第一个参数是字符串,那么只会替换第一个子字符串。要想替换所有子字符串,唯一的办法就是提供一个正则表达式,并且要指定全局(g)标志。replace()方法第二个参数也可以是一个函数。StringObject.replace(searchValue,replaceValue)
1.StringObject:字符串
2.searchValue:字符串或正则表达式
3.replaceValue:字符串或者函数
一、第一个参数传入字符串和第二个参数传入字符串的方式:
如果第一个参数是字符串,只会替换第一个子字符串。var text = 'cat,bat,sat,fat'; var result = text.replace('at','ond'); alert(result); //cond,bat,sat,fat
var newStr = 'I am loser,You are loser'.replace('loser','hero'); alert(newStr);//I am hero,You are loser
二、第一个参数传入正则表达式和第二个参数传入字符串的方式
如果第一个参数是正则表达式,就会替换所有子字符串。var text = 'cat,bat,sat,fat'; var result = text.replace(/at/g,'ond'); alert(result); //cond,bond,sond,fond
var newStr = 'I am loser,You are loser'.replace(/loser/g,'hero'); alert(newStr);//I am hero,You are hero
如果第二个参数是字符串的话,还可以用特殊的字符序列,将这则表达式操作得到的值插入结果字符串中。(如果字符串中有几个特定字符的话,会被转换为特定字符串)。
字符序列 | 替换文本 |
$$ | $ |
$& | 匹配整个模式的子字符串 |
$` | 匹配子字符串之前的子字符串 |
$' | 匹配子字符串之后的子字符串 |
$n | 匹配第n个捕获组的子字符串,(n = 0~9)。如:$1匹配第一个捕获的子字符串,$2是匹配第二个捕获的子字符串。以此类推 |
$nn | 匹配第n个捕获组的子字符串,(n = 01~99)。如:$01匹配第一个捕获的子字符串,$02是匹配第二个捕获的子字符串。以此类推 |
2.1、使用$&字符给匹配字符加大括号
var oldStr='讨论一下正则表达式中的replace的用法'; var newStr = oldStr.replace(/正则表达式/,'{$&}'); alert(newStr);//讨论一下{正则表达式}中的replace的用法2.2、使用$`和$’字符替换内容
var str1 = 'A@B'.replace(/@/,"$`"); //AAB 匹配左侧 var str2 = 'A@B'.replace(/@/,"$'"); //ABB 匹配右侧
2.3、使用分组匹配组合新的字符串($n $nn)
var str1 = 'haiandao1@163.com'.replace(/(.+)(@)(.*)/,"$2$1"); alert(str1);//@haiandao1 var str2 = 'haiandao1@163.com'.replace(/(.+)(@)(.*)/,"$3$2$1"); console.log(str2);//163.com@haiandao1三、第一个参数传入字符串和第二个参数传入函数的方式
第二个参数传入函数的方式,在只有一个模式匹配项(与模式匹配的字符串)的情况下,会向这个函数传递三个参数:模式的匹配项、模式的匹配项在字符串中的位置和原始字符串。var text = 'cat,bat,sat,fat'; var result = text.replace('at',function( match , pos ,orginalText ){ /* for (var i = 0; i < arguments.length; i++) { console.log(arguments[i]); }*/ console.log(match); //at console.log(pos); //1 console.log(orginalText); //cat,bat,sat,fat return 'ond'; //返回值为需要替换的新值 }); alert(result); //cond,bat,sat,fat四、第一个参数传入字正则表达式和第二个参数传入函数的方式
第二个参数传入函数的方式,在正则表达式定义了多个捕获组的情况下,传递给函数的参数依次是模式的匹配项、第一个捕获组的匹配项、第二个捕获组的匹配项……,最后两个参数依然分别是模式的匹配项在字符串中的位置和原始字符串。var text = 'haiandao1@163.com'; var result = text.replace(/(.+)(@)(.*)/,function( match , pos ,orginalText ){ for (var i = 0; i < arguments.length; i++) { //haiandao1@163.com :模式的匹配项 //haiandao1 :第1个捕获组的匹配项 //@ :第2个捕获组的匹配项 //163.com :第3个捕获组的匹配项 //0 :模式的匹配项在字符串中的位置 //haiandao1@163.com :原始字符串 console.log(arguments[i]); } return '返回值会替换掉匹配到的目标'; }); alert(result); //返回值会替换掉匹配到的目标var text = 'haiandao1@163.com'; var result = text.replace(/(@)(.*)/,function( match , pos ,orginalText ){ for (var i = 0; i < arguments.length; i++) { //@163.com :模式的匹配项 //@ :第1个捕获组的匹配项 //163.com :第2个捕获组的匹配项 //9 :模式的匹配项在字符串中的位置 //haiandao1@163.com :原始字符串 console.log(arguments[i]); } return '返回值会替换掉匹配到的目标'; }); alert(result); //haiandao1返回值会替换掉匹配到的目标五、应用场景和示例
5.1、替换html标签
function htmlEscape( text ){ return text.replace(/[<>"&]/g,function(match,pos,orginalText){ switch (match){ case '<': return '小于'; case '>': return '大于'; case '&': return '&'; case '\"': return '双引号'; } }) } //小于p class=双引号greeting双引号大于helloWorld小于/p大于 console.log( htmlEscape('<p class="greeting">helloWorld</p>') );5.2、使用自定义函数将A-G字符串改为小写
'JAVASCRIPT'.replace(/[A-G]/g,function(){ return arguments[0].toLowerCase(); })//JaVaScRIPT5.3、Simple JavaScript Template 简单的JavaScript渲染模板
function substitute (str, obj) { if (!(Object.prototype.toString.call(str) === '[object String]')) { return ''; } if(!(Object.prototype.toString.call(obj) === '[object Object]' && 'isPrototypeOf' in obj)) { return str; } return str.replace(/\{([^{}]+)\}/g, function(match, key) { var value = obj[key]; return ( value !== undefined) ? '' + value : ''; }); }var obj = { url: '我是超链接', title: '我是标题', text: '我是文本' }; var link = '<a href="{url}" title="{title}">{text}</a>'; substitute(link, obj);六、参考链接:
1、JavaScript高级程序设计第三版
2、http://developer.51cto.com/art/201311/415725.htm
3、http://www.planabc.net/2011/05/31/simple_javascript_template_substitute/
相关文章推荐
- java中使用String的replace方法替换html模板保存文件
- java中使用String的replace方法替换html模板保存文件
- 使用Java实现简单的server/client回显功能的方法介绍
- 使用Java实现简单的server/client回显功能的方法介绍
- 使用Java实现简单的server/client回显功能的方法介绍
- javascript中使用replaceAll()函数实现字符替换的方法
- Javascript string.replace(regex,callback)高效表情替换模块实现
- javascript中使用replaceAll()函数实现字符替换的方法
- XML与ASP简单结合实现HTML模板功能
- C#中如何实现JAVA中的String.replaceAll()方法功能
- XML与ASP简单结合实现HTML模板功能
- js使用正则实现ReplaceAll全部替换的方法
- 利用正则实现简单模板替换功能
- XML与ASP简单结合实现HTML模板功能
- 使用javascript实现简单倒数计时功能
- 使用Javascript和prototype.js框架创建类型及其相关的prototype属性的简单介绍
- XML与ASP简单结合实现HTML模板功能
- XML与ASP简单结合实现HTML模板功能
- C#中如何实现JAVA中的String.replaceAll()方法功能
- Javascript string.replace 方法中 函数参数的使用