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 miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 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中数组的三种排序方法分享
2012/05/07 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
php实现求相对时间函数
2015/06/15 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
取得传值的函数
2006/10/27 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
vue中的inject学习教程
2019/04/24 Javascript
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
python的常见矩阵运算(小结)
2019/08/07 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
建筑人员岗位职责
2013/12/25 职场文书
安全生产责任书
2014/03/12 职场文书
中学生演讲稿
2014/04/26 职场文书
投标邀请书范本
2015/02/02 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏