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 相关文章推荐
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
我所理解的JavaScript中的this指向
Sep 04 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和ACCESS写聊天室(九)
2006/10/09 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
php银联网页支付实现方法
2015/03/04 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
JS backgroundImage控制
2009/05/19 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
js实现登录验证码
2016/12/22 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
python多线程编程中的join函数使用心得
2014/09/02 Python
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
为什么需要版本控制
2016/10/28 面试题
客户代表实习人员自我鉴定
2013/09/27 职场文书
作文评语大全
2014/04/23 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
临时租车协议范本
2014/09/23 职场文书
社区植树节活动总结
2015/02/06 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记