资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/来一轮带注释的demo，彻底搞懂javascript中的replace函数

来一轮带注释的demo，彻底搞懂javascript中的replace函数

Coding01 / 2898人阅读

摘要：对应于上述的，等。匹配到的子字符串在原字符串中的偏移量。插入当前匹配的子串右边的内容。

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函数！

啥也不说了，大大地点赞吧！！

主要研究技术：HTML5、CSS3、ASP.NET MVC、SqlServer、Jquery、EasyUI等

专注于 代码生成工具、Web开发框架、设计模式及其应用。

撰写人：史林枫 (qq：1326771967)

转载请注明出处

GPU云服务器 云服务器 javascript中的函数 linux中的注释符 js中的replace方法 带参数的函数 c语言

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90685.html

相关文章

  • 彻底搞懂JavaScript执行机制

    摘要：彻底搞懂执行机制首先我们大家都了解的是，是一门单线程语言，所以我们就可以得出是按照语句顺序执行的首先看这个显然大家都知道结果，依次输出，然而换一种这个时候再看代码的顺序执行，输出，，，。不过即使主线程为空，也是达不到的，根据标准，最低是。 彻底搞懂JavaScript执行机制 首先我们大家都了解的是，JavaScript 是一门单线程语言，所以我们就可以得出： JavaScript 是...

    hizengzeng 评论0 收藏0

  • 搞懂nginx的rewrite模块

    摘要：非标准码关闭连接而不发送响应报头。指令按照它们在配置文件中出现的顺序执行。可以使用标志来终止指令的进一步处理。返回永久重定向。发送如下请求控制是否记录有关未初始化变量的警告。 之前在配置nginx时，总是遇到rewrite指令的last和break标识的问题，看到的资料大都是last 基本上都用这个 Flag，break 中止 Rewirte，不在继续匹配。看完之后还是有点懵，后来看了...

    wangshijun 评论0 收藏0

  • 深入前端-彻底搞懂JS的运行机制

    摘要：浏览器是多进程的详情看我上篇总结浏览器执行机制的文章深入前端彻底搞懂浏览器运行机制浏览器每打开一个标签页，就相当于创建了一个独立的浏览器进程。执行异步操作事件完成，回调函数进入。主线程从读取回调函数并执行。 最近看了很多关于JS运行机制的文章，每篇都获益匪浅，但各有不同，所以在这里对这几篇文章里说的很精辟的地方做一个总结，参考文章链接见最后。本文博客地址 了解进程和线程 进程是应用...

    luckyw 评论0 收藏0

  • 深入前端-彻底搞懂JS的运行机制

    摘要：浏览器是多进程的详情看我上篇总结浏览器执行机制的文章深入前端彻底搞懂浏览器运行机制浏览器每打开一个标签页，就相当于创建了一个独立的浏览器进程。执行异步操作事件完成，回调函数进入。主线程从读取回调函数并执行。 最近看了很多关于JS运行机制的文章，每篇都获益匪浅，但各有不同，所以在这里对这几篇文章里说的很精辟的地方做一个总结，参考文章链接见最后。本文博客地址 了解进程和线程 进程是应用...

    jaysun 评论0 收藏0

  • 彻底搞懂Java内存泄露

    摘要：所以如果赶在之前切断是可以避免内存泄露的。经过测试情况始终没有内存泄露。如果当退出时候，还有消息未处理或正在处理，由于引用又引用，此时将引发内存泄露。总结如果某些单例需要使用到对象，推荐使用的，不要使用的，否则容易导致内存泄露。 之前一直在简书写作，第一次发布到SF上来，也是第一次使用SF，后面会尽量同步到SF，更多文章请关注：简书 编程之乐转载请注明出处：谢谢！ Java内存回收方式...

    seasonley 评论0 收藏0

发表评论

登陆后可评论

0条评论

Coding01

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<