javascript中的replace函数(带注释demo)


Posted in Javascript onJanuary 07, 2018

javascript这门语言一直就像一位带着面纱的美女,总是看不清,摸不透,一直专注服务器端,也从来没有特别重视过,直到最近几年,javascript越来越重要,越来越通用。最近和前端走的比较近,借此机会,好好巩固一下相关知识点。

1.初识replace

在js中有两个replace函数 一个是location.replace(url) 跳转到一个新的url

一个string.replace("xx","yy") 替换字符串 返回一个新的字符串,该方法并不改变字符串本身

location.replace(url) 无痕跳转(将当前链接导航到一个新的url 并不保存历史记录)
与之相对的是location.href="url" rel="external nofollow" 有痕跳转(将当前链接导航到一个新的url 且保存历史记录) 这个没有比较清晰

string.replace函数 很多初学者,会认为这个跟C#中的Replace一样,但并不相同,js中replace更灵活。
最基本的用法 就是简单替换字符串。来看一个例子:

var str = "abcd-abcd-abcd";
var result = str.replace("a", "");
console.log(result);
//输出 bcd-abcd-abcd
//当第一个参数是一个简单字符串时,仅替换第一个匹配项

2.走进replace之正则表达式

参数一:正则表达式对象或字面量(支持gi模式) g全局匹配 i忽略大小写

参数二:要替换的字符串或一个function

可以使用正则表达式的相关引用

如果是function,则替换为function的返回值

此function的参数:

match 匹配的子串。(对应于上述的$&。)

p1,p2, ... 假如replace()方法的第一个参数是一个RegExp 对象,则代表第n个括号匹配的字符串。(对应于上述的$1,$2等。)

offset 匹配到的子字符串在原字符串中的偏移量。(比如,如果原字符串是“abcd”,匹配到的子字符串是“bc”,那么这个参数将是1)

string 被匹配的原字符串。

正则表达的引用

$$ 插入一个 "$"。
$& 插入匹配的子串。
$` 插入当前匹配的子串左边的内容。
$' 插入当前匹配的子串右边的内容。
$n 假如第一个参数是 RegExp对象,并且 n 是个小于100的非负整数,那么插入第 n 个括号匹配的字符串。

 3.来一轮带注释的demo,彻底搞懂javascript中的replace函数:

全局匹配:

var str = "abcd-abcd-abcd";
var result = str.replace(/a/g, "e");
console.log(result);
//输出 ebcd-ebcd-ebcd
//g全局匹配 所有a字符串都将被替换

忽略大小写匹配:

var str = "abcd-abcd-abcd";
var result = str.replace(/A/i, "e");
console.log(result);
// 输出 ebcd-abcd-abcd
// 忽略大小写的匹配 但没有进行全局匹配 所以只替换第一个a

忽略大小写且全局匹配:

var str = "abcd-abcd-abcd";
var result = str.replace(/A/gi, "e");
console.log(result);
// 输出 ebcd-ebcd-ebcd
// 忽略大小写并全局匹配 所有a都被替换

使用function作为第二参数:

var str = "abcd-abcd-1234";
var result = str.replace(/([a-z]*)-([a-z]*)/gi, function(match,p1,p2,offset,str){
  console.log(match);  //abcd-abcd 匹配的内容
  console.log(p1);  //第一个括号中匹配的内容
  console.log(p2);  //第二个括号匹配的内容
  console.log(offset);//0 匹配到的字符串的索引(偏移量) 
  console.log(str);  //原始字符串
  return [p1,p2].join("+");
});
console.log(result);
// 输出 abcd+abcd+1234
// 原字符串中 abcd-abcd 被匹配后 被替换为function返回的内容

在参数中引用正则表达式匹配项:

var str = "a b";
var result = str.replace(/(\w+)\s(\w+)/gi, "$2 $1");
console.log(result); 
//输出 b a 
// 这里的$1 $2分别引用正则表达式中第一个喝第二个括号匹配的内容

在参数中引用匹配项左侧内容:

var str = 'abc';
  var result = str.replace(/b/g, "$`"); //$`代表匹配字符的左侧内容
  console.log(result);
  //输出: aac

在参数中引用匹配项右侧内容:

var str = 'abc';
  var result = str.replace(/b/g, "$'"); //$'代表匹配字符的右侧内容
  console.log(result);
  //输出: acc

使用正则表达式对象:

var str = "a b";
 var reg = new RegExp(/(\w+)\s(\w+)/, "gi"); //也可以使用正则表示对象来最为参数
 var result = str.replace(reg, "$2 $1");
 console.log(result); //输出 b a

有了这些例子 加上开头的名词解释,相信你已经彻底搞懂了javascript中的replace函数!

总结

以上所述是小编给大家介绍的javascript中的replace函数(带注释demo),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 #Javascript
js实现复制功能(多种方法集合)
Jan 06 #Javascript
tangram.js库实现js类的方式实例分析
Jan 06 #Javascript
JavaScript寄生组合式继承实例详解
Jan 06 #Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 #jQuery
JS实现非首屏图片延迟加载的示例
Jan 06 #Javascript
jQuery中库的引用方法
Jan 06 #jQuery
You might like
分享一个php 的异常处理程序
2014/06/22 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
测试你的JS的掌握程度的代码
2009/12/09 Javascript
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
PHP如何自定义函数
2016/09/16 面试题
Linux面试题LINUX系统类
2015/11/25 面试题
中职应届生会计求职信
2013/10/23 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
机关出纳岗位职责
2014/04/03 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
医师定期考核实施方案
2014/05/07 职场文书
农村党员一句话承诺
2014/05/30 职场文书
温馨提示标语
2014/06/26 职场文书
个人授权委托书
2014/09/15 职场文书
法人授权委托书
2014/09/16 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书