JavaScript String.prototype.replaceAll 兼容性导致的问题

一句话解决

String.prototype.replaceAll() 在部分浏览器不支持(未实现该API)
可以换成以下两个API的组合使用，可以得到相同的字符串结果：
String.prototype.split()
Array.prototype.join()

console.log("aaa,bbb,ccc,ddd".replaceAll(",", "<br>"));	// aaa<br>bbb<br>ccc<br>ddd
console.log("aaa,bbb,ccc,ddd".split(",").join("<br>"));	// aaa<br>bbb<br>ccc<br>ddd

Intro

本地开发、测试好的项目，发布到线上正常运行。
换了一个浏览器去访问却报错：

原因：
低版本浏览器不支持字符串的replaceAll方法

见MDN String.prototype.replaceAll

• 验证

查看运行出问题的浏览器的版本信息：
chrome:

firefox:

当然也可以通过界面去查看浏览器版本(firefox, chrome, …等不同厂商的浏览器，查看方式也不同)

解决

举个例子，对于文本abc 123 ab 12 cd，搜索12
基于replaceAll可以得到字符串：abc <em>12</em>3 ab <em>12</em> cd，然后对搜索内容进行高亮显示。

为了兼容浏览器版本，使程序不报错，有以下几种处理方式。

API替代 split+join 和 replaceAll

更新时间 2022Y：

var str = "aaa,bbb,ccc,ddd";
console.log(str.replaceAll(",", "<br>"));
console.log(str.split(",").join("<br>"));

replaceAll 直接替换所有匹配的字符序列。什么！API不支持？
先用制定模式的字符串进行分割split，然后将得到的字符串数据用某个字符串作为拼接起来。效果一样
如下：

那么现在需要去查一下 split 和 join API的浏览器兼容性了：

String.prototype.split() API 的浏览器兼容性

见：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split

Array.prototype.join() API 的浏览器兼容性

见： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join

polyfill

关于字符串的 replaceAll 你可以上网查查有没有别人实现的 polyfill。
如果找不到，也可以自己试着实现。
什么是 Polyfill？

需求让步

由MDN中的文档可知，对于String对象，replace方法兼容性更广，只不过和replaceAll功能有差异。
如果需求影响不大，可以用replace替代replaceAll。

前端搜索转换为后端搜索

因为当前没有接入后端，才在前端基于replaceAll做文本处理。
如果是后端提供接口，前端去调用，则处理逻辑交给后端。
也避免了前端使用replaceAll方法

• polyfill 或 自定义 replaceAll 实现

polyfill是一种解决方案，有些JS的新标准并没有在所有浏览器上得到支持。
这个时候在不支持的浏览器上执行一段JS代码，这个JS新特性就可以正常使用。
不过我搜索了String replaceAll polyfill 貌似还没有现成的polyfill库。

自己定义一个replaceAll的实现，挂在String的原型链上。
格式大致为：

String.prototype.replaceAll = function(...someArgs) {
  // ...
}

这段代码在浏览器中运行后，字符串对象就都可以调用replaceAll方法了(并且是我们自定义的实现)。