从 “string.replaceAll is not a function” 中复盘 JQuery.js 兼容性问题

本文复盘了一个在手机端打开博客时因JQuery.js的replaceAll方法引发的兼容性问题,导致页面加载失败。通过手机端调试发现,异常发生在replaceAll方法,可能由于浏览器内核兼容性。解决方案是使用replace和正则表达式实现replaceAll的功能,同时修正了主题中的正则表达式误匹配问题,避免了行内公式识别错误。总结强调在使用第三方库和正则表达式时应注意兼容性和精确匹配。
摘要由CSDN通过智能技术生成

分析

意外发现博客的某篇文章在手机端打开的时候一直处于加载中的状态,但是点开其他文章却又是正常的,推断可能是前端页面在渲染的过程中遇到某些错误被中断了。

chrome 浏览器直接打开 mobile 模式还是能正常显示,无法完全模拟手机端的情况

复现

由于手机端的浏览器无法直接进行调试,需要通过 usb 连接到电脑,再使用 chrome 浏览器结合 pc 和手机端进行调试。

手机端调试接入的方式参考:

https://blog.csdn.net/weixin_32149443/article/details/112936241

这篇博文是转载的,且格式杂乱无章。。csdn的水文真是越来越多了,原文是 cnblog 的一篇文章,但是已经无法显示了,将就着看吧。

接入调试后发现,是文章内容在渲染的时候 jquery.js 抛出了错误,导致内容的渲染被中断了。

image.png

点进错误信息里面我们可以看到异常发生的具体是哪行代码,如下图

image.png

从上图的第二处可以看出,抛出异常的是 formatMath 这个方法,从注释和代码上来看,这个方法的具体作用可能是对文章内容中出现的一些公式做处理。

前期推测可能是传入的某一次循环中传入的 kateBlock 值为 null 对象,导致无法调用 replaceAll 方法(该方法只有在字符串类型时才存在),也就是 Java 中经常遇到的空指针异常(没有在使用某个对象前对其值为空的情况做出处理)只是在 js 体现的不一样。

在渲染别的文章内容时基本没有触发引用 dealMathx 这个方法,所以这个问题也没有被发现。

解决

stackoverflow 这篇文章中得知,有可能是浏览器内核对 replaceAll 这个方法的兼容性问题导致的。

本篇文章中的安卓 chrome 版本是 78.x,而不在官方给到的支持版本范围内,如下图

image.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值