龙空技术网

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

史林枫 316

前言:

目前小伙伴们对“js字符串的replace”大约比较注意,同学们都想要了解一些“js字符串的replace”的相关内容。那么小编同时在网络上网罗了一些有关“js字符串的replace””的相关文章,希望朋友们能喜欢,看官们快快来学习一下吧!

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";varresult = 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);

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

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

标签: #js字符串的replace