JavaScript替换--如何使用String.prototype.replace()方法JS实例

91 阅读4分钟

String.prototype.replace() 方法搜索一个字符串的第一次出现,并将其替换为指定的字符串。它是在不改变原始字符串的情况下进行的。

这个方法也适用于正则表达式,所以你要搜索的项目可以用正则表达式表示。

作为替换值返回的值可以用字符串或函数表示。

String.prototype.replace()方法的基本语法

const variable = variable.replace("stringToReplace", "expectedString");

你通过以下方式使用replace() 方法。

  • 将初始字符串分配给一个变量
  • 声明另一个变量
  • 为新变量的值,在新变量的名称前加上replace()方法
  • 用逗号将你要替换的字符串和预期的字符串在括号内隔开

String.prototype.replace()方法的例子

一个基本的例子是这样的。

const coding = "I learned how to code from TV";
const replacedString = coding.replace("TV", "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp

在上面的例子中。

  • 我声明了一个名为coding的变量,并给它分配了字符串"I learned how to code from TV"
  • 我声明了另一个变量,名为replacedString
  • 对于replacedString 变量的值,我引入了replace() 方法,并指定我想用 "freeCodeCamp "替换初始变量中的 "TV"。

下面是一个例子,展示了初始字符串从未被replace() 方法突变(改变)。

const coding = "I learned how to code from TV";
const replacedString = coding.replace("TV", "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp
console.log(coding); // Result: I learned how to code from TV

在下面的例子中,我使用正则表达式来搜索与 "TV "相匹配的文本,并将其替换为 "freeCodeCamp"。

const coding = "I learned how to code from TV";
const replacedString = coding.replace(/TV/, "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp

由于replace() 方法只对字符串中某些文本的第一次出现起作用,如果你想用字符串中的另一个词替换所有出现的词,你该怎么办?你可以使用replaceAll() 方法。

如何使用replaceAll() 方法

replace() 方法稍微相似的字符串方法是replaceAll() 方法。

这种方法可以替换一个字符串中所有出现的某个单词。

replaceAll() 方法的例子

const coding = "I learned how to code from TV. TV remains in my heart for life.";
const replacedString = coding.replaceAll("TV", "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp. freeCodeCamp remains in my heart for life.

每个出现的 "TV "都被替换为 "freeCodeCamp",这是由replaceAll() 方法提供的。

使用原始的replace() 方法,你可以通过使用正则表达式来搜索字符串中某个词的每一次出现并将其替换为另一个词来实现replaceAll() 的目的。

const coding = "I learned how to code from TV. TV remains in my heart for life.";
const replacedString = coding.replace(/TV/g, "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp. freeCodeCamp remains in my heart for life.

我能够用正则表达式的g 标志来搜索每一个与 "TV "相匹配的词,并将其替换为 "freeCodeCamp"。

如何向replace() 方法传递一个函数

正如我之前所说,你可以把你想返回的值作为替换后的值用函数来表达。

在下面的例子中,我用替换方法将这篇文章的标题转换成了一个URL slug。

const articleTitle = "JavaScript Replace – How to Use the String.prototype.replace() Method";
const slugifyArticleTitle = articleTitle.toLowerCase().replace(/ /g, function (article) {
    return article.split(" ").join("-");
  });

console.log(slugifyArticleTitle); //Result: javascript-replace-–-how-to-use-the-string.prototype.replace()-method

在上面的脚本中。

  • 我声明了一个名为articleTitle 的变量,并指定了本文的标题。
  • 我声明了另一个名为slugifyArticleTitle 的变量,并通过toLowerCase() 方法将文章的标题转换为小写字母。
  • 我引入了replace() 方法,并使用该方法搜索了所有的空白处。/ /g
  • 然后我给replace() 方法传递了一个函数,并给它分配了一个参数:article 。这个参数是指转换为小写字母的字符串(文章标题)。
  • 在该函数中,我返回了我正在分割文章标题中的任何一个留白处。这是用split() 方法完成的。
  • 在将文章标题分割到有空白的地方后,我使用join() 方法将字符串中的各个字母用连字符连接起来。

总结

String.prototype.replace() 方法是一个强大的字符串方法,在JavaScript中处理字符串时,你可以用它来完成很多事情。

除了String.prototype.replace() 方法之外,我还向你展示了如何使用String.prototype.replaceAll() 方法--一种混合的String.prototype.replace() 方法。

你应该小心使用String.prototype.replaceAll() 方法,因为它还不被一些浏览器所支持。与其使用replaceAll() ,我还向你展示了如何通过使用正则表达式来搜索特定字符串中的所有值来实现与它相同的目的。