夜鹰教程网-程序员的加油站
 当前位置:文章中心 >> Jquery_Ajax_Javascript
javascript这门语言一直就像一位带着面纱的美女
夜鹰教程网 来源:www.yyjcw.com 日期:2019-1-6 19:01:58
javascript这门语言一直就像一位带着面纱的美女

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

 

1.初识replace

在js中有两个replace函数 一个是location.replace(url) 跳转到一个新的url
一个string.replace("xx","yy") 替换字符串 返回一个新的字符串,该方法并不改变字符串本身

location.replace(url) 无痕跳转(将当前链接导航到一个新的url 并不保存历史记录)
与之相对的是location.href="url" 有痕跳转(将当前链接导航到一个新的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函数!

啥也不说了,大大地点赞吧!!


复制链接 网友评论 收藏本文 关闭此页
上一条: 为什么需要addEventListener  下一条: Js实现简单的音频播放
夜鹰教程网成立于2008年,目前已经运营了将近 13 年,发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是:认证负责、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心。我们默默投入的时间,确保每一套教程都是一件作品,而不是呆板的文字和视频! 目前我们推出在线辅导班试运营,模式为一对一辅导,教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发,winform和物联网开发、web前端开发,但不仅限于此。 普通班针对的是国内学员,例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生,或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子,目的是让大家熟练地掌握编程技能,按时完成老师布置的作业,并能顺利地通过考试。 详细咨询QQ:1416759661   夜鹰教程网  基于角色的权限管理系统(c-s/b-s)。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
  热点推荐
ajax 清除缓存的两种方法
js日历控件点击日期显示在文本框中…
HTML、JS与FLASH 之间的静态传值方…
主题:ajax请求JSP,为什么GET就是…
javascript 改变iframe(框架)的方…
javascript取鼠标当前坐标
推荐一款网页软键盘 很漂亮的哦
ajax session过期问题的几个解决方…
js文字间隔停顿向上滚动效果
ajax 服务器文本框自动填值
js技术技巧收藏(200例)---1
ajax 数据库中随机读取5条数据动态…
主题:这是否是个捷径?Ajax利用S…
揭开AJAX神秘的面纱(AJAX个人学习…
常用的JS后台导航菜单
  最近更新
js处理键盘事件(keydown event)…
Web前端技术疑点难点汇总
Asp.Net Core2.0允许跨域请求设置…
XMLHttpRequest请求中的跨域问题
原生js节点的操作 创建、添加、移…
VUE2.0组件:父组件子组件之间值的…
JavaScript是世界上最流行的脚本语…
js正则表达式表单验证详解
js正则表达式大全
详细且实用的JS正则表达式大全
EcmaScript5中扩展了叫bind的方法…
attachEvent和addEventListener的…
addEventListener的使用方式
通过构造器的方式来创建函数
为什么需要addEventListener

关于我们 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3