JavaScript String.prototype.replaceAll Problems caused by compatibility

Jintian 2021-02-23 05:04:40
javascript string.prototype.replaceall string prototype replaceall


Intro

Local development 、 Test good projects , Publish to online and run normally .
A new browser Go to visit but report an error :
 Insert picture description here

reason :
Older browsers don't support string replaceAll Method

see MDN String.prototype.replaceAll

 Insert picture description here

  • verification

View the version information of the browser that ran the problem :
chrome:
 Insert picture description here
firefox:
 Insert picture description here

Of course, you can also view the browser version through the interface (firefox, chrome, … And other browsers from different manufacturers , The way you view it is also different )

 Insert picture description here

solve

for instance , For the text abc 123 ab 12 cd, Search for 12
be based on replaceAll You can get the string :abc <em>12</em>3 ab <em>12</em> cd, Then highlight the search content .

To be compatible with the browser version , To keep the program from reporting errors , There are several ways to deal with it .

  • Demand concession
    from MDN From the document in , about String object ,replace Methods are more compatible , Just and replaceAll There are differences in functions .
    If demand doesn't matter much , It can be used replace replace replaceAll.

  • Front end search to back end search

Because there is currently no access to the back end , At the front end, it's based on replaceAll Do text processing .
If it's the back end providing the interface , The front end calls , Then the processing logic is handed over to the back end .
It also avoids the use of front end replaceAll Method

  • polyfill or Customize replaceAll Realization

polyfill It's a solution , There are some JS The new standard is not supported in all browsers .
At this time, execute a section on an unsupported browser JS Code , This JS The new features will work .
But I searched String replaceAll polyfill There seems to be no ready-made polyfill library .

Define one for yourself replaceAll The implementation of the , Hang on String On the prototype chain .
The format is roughly :

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

// ...
}

After this code runs in the browser , String objects can be called replaceAll The method ( And it's our custom implementation ).

版权声明
本文为[Jintian]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210223050403392m.html

  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