技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

JS 3种方法实现字符全替换: replace replaceAll split join

作者:admin    时间:2022-5-16 13:34:49    浏览:

在JavaScript的字符替换方法中,大家常用的是replace()方法,而对于要求替换所有字符的方法,大家会常用replaceAll()来处理。在本文中,我将介绍3种方法,实现字符全替换。

1、replaceAll()方法

要实现字符全替换,当然replaceAll是首选的方法。

示例

var str = "apples are round, and apples are juicy";
str = str.replaceAll('apples','oranges');
console.log(str);

输出

oranges are round, and oranges are juicy

replaceAll的语法结构

  • replaceAll(regexp, newSubstr)
  • replaceAll(regexp, replacerFunction)
  • replaceAll(substr, newSubstr)
  • replaceAll(substr, replacerFunction)

replaceAll() 方法返回一个新字符串,新字符串所有满足 pattern 的部分都已被replacement 替换。pattern可以是一个字符串或一个 RegExpreplacement可以是一个字符串或一个在每次匹配被调用的函数。

原始字符串保持不变。

示例

const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';
console.log(p.replaceAll('dog', 'monkey'));
// 输出: 
// "The quick brown fox jumps over the lazy monkey. If the monkey reacted, was it really lazy?"

// 当用regex调用replaceAll,需要全局标志
const regex = /Dog/ig;
console.log(p.replaceAll(regex, 'ferret'));
// 输出: 
//"The quick brown fox jumps over the lazy ferret. If the ferret reacted, was it really lazy?"

当使用一个 `regex`时,您必须设置全局(“ g”)标志,
否则,它将引发 TypeError:“必须使用全局 RegExp 调用 replaceAll”。

返回值

全部匹配由替代模式所取代的新的字符串。

描述

此方法不会更改调用 String 对象。它只是返回一个新字符串。

在进行全局的搜索替换时,正则表达式需包含 g 标志。

指定一个函数作为参数

你可以指定一个函数作为第二个参数。

在这种情况下,当匹配执行后,该函数就会执行。 函数的返回值作为替换字符串。另外要注意的是,如果第一个参数是正则表达式,并且其为全局匹配模式,那么这个方法将被多次调用,每次匹配都会被调用。

非全局 regex 抛出

使用正则表达式搜索值时,它必须是全局的。这将行不通:

'aabbcc'.replaceAll(/b/, '.');
TypeError: replaceAll must be called with a global RegExp

这将可以正常运行:

'aabbcc'.replaceAll(/b/g, '.');
"aa..cc"

2、replace()方法

replace()方法也可以实现字符全替换,它的使用语法与replaceAll()相同。

返回值

一个部分或全部匹配由替代模式所取代的新的字符串。

replace()仅替换第一个匹配项。

示例

const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';
console.log(p.replace('dog', 'monkey'));
// 输出: "The quick brown fox jumps over the lazy monkey. If the dog reacted, was it really lazy?"

const regex = /Dog/i;
console.log(p.replace(regex, 'ferret'));
// 输出: "The quick brown fox jumps over the lazy ferret. If the dog reacted, was it really lazy?"

在 replace() 中使用 global 和 ignore 选项

下面的例子中,正则表达式包含有全局替换(g)和忽略大小写(i)的选项,这使得replace方法用'oranges'替换掉了所有出现的"apples"。

var re = /apples/gi;
var str = "Apples are round, and apples are juicy.";
var newstr = str.replace(re, "oranges");

console.log(newstr);
// 输出: oranges are round, and oranges are juicy.

3、使用 split() 和 join()

结合使用 split()join() ,也能实现字符全替换。

示例

var str = "apples are round, and apples are juicy";
str = str.split('apples').join('oranges');
console.log(str);

输出

oranges are round, and oranges are juicy

split()方法

split() 方法用于把一个字符串分割成字符串数组。

split对特殊字符串的处理:

1、如果用“.”作为分隔的话,必须是如下写法:String.split("\\."),这样才能正确的分隔开,不能用String.split(".");

2、如果用“|”作为分隔的话,必须是如下写法:String.split("\\|"),这样才能正确的分隔开,不能用String.split("|");

3、如果用“\”作为分隔的话,必须是如下写法:String.split(\\\),这样才能正确的分隔开,不能用String.split("\");

.”,“|”和“\”都是转义字符,必须得加"\\";

如果想在串中使用"\"字符,则也需要转义,例如首先要表达"aaaa\bbbb"这个串就应该用"aaaa\\bbbb",如果要分隔就应该这样才能得到正确结果:

String[] aa = "aaa\\bbb\\bccc".split(\\\\); 

join()方法

join()方法用于把数组中的所有元素放入一个字符串,元素通过指定的分隔符进行分割。

语法

arrayObject.join(separator);

返回值

返回一个字符串,该字符串是通过把arrayObject的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入separator字母串而生成的。

var arr = new Array(3);
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.join()); //George,John,Thomas
document.write(arr.join(".")); //George.John.Thomas

总结

本文通过3种方法的介绍,实现JS字符全替换。一般来说,使用replaceAll()方法最简单直接,replace() 需用 /g 选项,而split()Join()的配合,也同样能实现相同的功能,在实际场景中可灵活使用。

相关文章

x
  • 站长推荐
/* 左侧显示文章内容目录 */