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

清疚 2022-11-19 09:56 176阅读 0赞

## Intro ##

本地开发、测试好的项目，发布到线上正常运行。  
**换了一个浏览器**去访问却报错：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center]

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

见[MDN String.prototype.replaceAll][]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center 1]

*  验证

查看运行出问题的浏览器的版本信息：  
chrome:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center 2]  
firefox:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center 3]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center 4]

## 解决 ##

举个例子，对于文本`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`方法了(并且是我们自定义的实现)。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/a2d0d7c18c9e4bb2a40f2915cda18ebb.png
[MDN String.prototype.replaceAll]: https://developer.mozilla.org/zh-cn/docs/web/javascript/reference/global_objects/string/replaceall
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221119/7cd3b8f4e7e44e78b5d34a627398669d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221119/6b422a0fec164063bfbeb6488c828430.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221119/cf85ba530b234071be56a91d59c5ad5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221119/7c4083b583a149b0b204c0f860758ded.png