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

锦天 2021-02-23 05:04:24
javascript String prototype replaceall 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方法了(并且是我们自定义的实现)。

版权声明
本文为[锦天]所创,转载请带上原文链接,感谢
https://wuyujin.blog.csdn.net/article/details/112912567

  1. JavaScript advanced: Javascript object-oriented, JavaScript built-in object, JavaScript BOM, JavaScript encapsulation
  2. JavaScript advanced: Javascript object-oriented, JavaScript built-in object, JavaScript BOM, JavaScript encapsulation
  3. Vue determines whether the El form in the elementui is updated or changed. If it changes, it will prompt whether to save it. If it does not change, it will leave directly
  4. Algorithm problem: sum of two numbers -- JavaScript and Java implementation
  5. High performance nginx HTTPS tuning
  6. JQuery advanced
  7. day 30 jQuery
  8. JQuery:JQuery Basic syntax, jQuery selector, jQuery DOM, comprehensive case check box, comprehensive case random picture
  9. TCP/IP 开胃菜 之 HTTP
  10. JQuery:JQuery Basic syntax, jQuery selector, jQuery DOM, comprehensive case check box, comprehensive case random picture
  11. JavaScript data type
  12. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  13. Solve Ajax cross domain problem [5 solutions]
  14. HTTP of TCP / IP appetizer
  15. Optimization of pod creation efficiency in serverless scenario
  16. Iqiyi Sports: experience the ultimate expansion and contraction of serverless, and increase the utilization rate of resources by 40%
  17. First knowledge of HTTP / 1.1
  18. First knowledge of HTTP / 1.1
  19. Webpack learning notes series 05 devserver
  20. Webpack learning notes series 04 - resource processing optimization
  21. How to build a high performance front end intelligent reasoning engine
  22. How to become a professional front end engineer in 2021?
  23. How to transform single / micro service application into serverless application
  24. How to transform single / micro service application into serverless application
  25. How to transform single / micro service application into serverless application
  26. How to connect the ground gas to the micro front end?
  27. How to connect the ground gas to the micro front end?
  28. How to connect the ground gas to the micro front end?
  29. Vue server rendering principle analysis and introduction
  30. Realize the correct loading of text message
  31. Building my own project scaffolding with yeoman
  32. JavaScript advanced prototype and prototype chain
  33. React background management front end system (based on open source framework development) start
  34. JS practical skills breakpoint debugging
  35. I'd like to share with you 20 super easy-to-use Chrome extension plug-ins
  36. Get page element location
  37. Use the powerful API of modern browser to record any interface in the browser and realize export, save and management
  38. Delayed code execution in flutter
  39. Reconfiguration experience of KOA middleware system
  40. Add comments to your blog
  41. Svg editor -- new path
  42. Detailed explanation of debounce and throttle of JavaScript function
  43. Anti shake and throttling and corresponding react hooks package
  44. C2m: the first CSDN article moved to MOOC script 5000 words, detailed painstaking development process, there are renderings and source code at the end of the article
  45. Front end, school recruitment, Taobao, guide
  46. [vue2 & G6] get started quickly
  47. Canvas from the beginning to the pig
  48. Take five minutes to standardize the code comments?
  49. Some thoughts on sass
  50. what?! You haven't filled in the award information yet
  51. How to get the interface + tsdoc needed by TS through swagger
  52. Binary tree
  53. Canvas drawing method in Web screenshot
  54. Front end docker image volume optimization (node + nginx / node + multi-stage construction)
  55. Become a big influence of technology? Coding pages quickly build personal blog
  56. Object and array deconstruction, spread operator, rest operator
  57. Analysis of Axios source code
  58. Two ways to delete useless code in project (Practical)
  59. Edit your picture with canvas
  60. Today's chat: 2-4 years to walk out of the resignation dilemma and comfort zone