Javascript .replaceAll() 不是函数类型错误

Posted

技术标签:

【中文标题】Javascript .replaceAll() 不是函数类型错误【英文标题】:Javascript .replaceAll() is not a function type error 【发布时间】:2020-10-30 16:02:14 【问题描述】:

文档页面:https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Global_Objects/String/replaceAll

let string = ":insertx: :insertx: :inserty: :inserty: :insertz: :insertz:";
let newstring = string.replaceAll(":insertx:", 'hello!');

当我运行它时,我收到Uncaught TypeError: string.replaceAll is not a function。也许我误解了原型是什么,但该函数似乎是一个可用的字符串方法。

我正在使用 Chrome。

【问题讨论】:

你从哪里知道.replaceAll()是一个String方法 文档链接中的示例代码,它在文档的标题中 replaceAll 在几个月内作为原生 V8 字符串方法出现。目前,它仍然不可用。 继续填充它 @Opcode 它显然是新的(或新的) 【参考方案1】:

str.replaceAll 函数是在 ES2021 ES12 中添加的,所以在旧版本的浏览器和 nodejs 中没有定义它。

【讨论】:

【参考方案2】:

您可以自己轻松定义:

if(typeof String.prototype.replaceAll === "undefined") 
    String.prototype.replaceAll = function(match, replace) 
       return this.replace(new RegExp(match, 'g'), () => replace);
    

并使用它:

"fafa".replaceAll("a", "o");
>>> fofo

【讨论】:

【参考方案3】:

replace 与带有全局modifier 的正则表达式一起使用,以获得更好的浏览器支持。 (查看browser compatibility table on MDN,查看每个浏览器的哪个版本开始支持replaceAll方法。)

let string = ":insertx: :insertx: :inserty: :inserty: :insertz: :insertz:";
let newstring = string.replace(/:insertx:/g, 'hello!');
console.log(newstring);

对于更通用的解决方案,我们可以转义正则表达式元字符并使用RegExp 构造函数。您还可以将函数添加到 String.prototype 作为 polyfill。

(需要对要替换的字符串进行转义,以便正则表达式中具有特殊含义的字符将按字面意思解释,例如. 将仅指实际的点而不是任何字符。)

//Taken from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
function escapeRegExp(string) 
  return string.replace(/[.*+?^$()|[\]\\]/g, '\\$&'); // $& means the whole matched string

function replaceAll(str, match, replacement)
   return str.replace(new RegExp(escapeRegExp(match), 'g'), ()=>replacement);


console.log(replaceAll('a.b.c.d.e', '.', '__'));
console.log(replaceAll('a.b.c.d.e', '.', '$&'));

可以在here 找到符合规范的垫片。

【讨论】:

【参考方案4】:

虽然有点离题,但我在这里偶然发现了我的用例,它没有列出,所以这里是为像我这样的人准备的。我需要隐藏一个词,但如果它开始以某些字符,即 dev。而且,还有通配符 * 帮助我做到了。

'Fullstack developer'.replace(/dev.*/g, '') // => Fullstack

注意:注意点。

【讨论】:

【参考方案5】:

如果您不想升级 Chrome 也不想使用 reg 表达式(因为它们的性能较差),您也可以这样做:

let string = ":insertx: :insertx: :inserty: :inserty: :insertz: :insertz:";
let newstring = string.split(":insertx:").join('hello!');

当然,如果您想在任何地方使用它,您也可以附加到 String 原型。但由于真正的 replaceAll 具有更多功能(支持正则表达式),因此您这样做会更安全:

String.prototype.replaceAllTxt = function replaceAll(search, replace)  return this.split(search).join(replace); 

【讨论】:

太棒了。这应该是公认的答案,因为它还提供了解决方案,并且涵盖了兼容性问题。【参考方案6】:

.replaceAll 将从 Chrome 85 开始提供。当前版本为 83。

如果您下载 Google Chrome Canary(版本 86),您将能够看到您的代码运行良好。 Firefox 在版本 78 上,并且由于 .replaceAll 从版本 77 开始可用,它也可以在那里工作。它也适用于当前的 Safari。 Microsoft Edge 将其视为不受支持。

您可以在问题文章的底部找到支持的浏览器版本。

【讨论】:

以上是关于Javascript .replaceAll() 不是函数类型错误的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript全部替换 - js replaceAll()

JavaScript String.replaceAll方法实现

Javascript onpaste replaceAll

JavaScript 自己写一个 replaceAll() 函数

[JavaScript] - replaceAll,将字符串中的字母或数字等全部替换掉的方式

String 类中replace 和replaceAll方法的区别