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

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,然后对搜索内容进行高亮显示。

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

  • 需求让步
    由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方法了(并且是我们自定义的实现)。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页