事件起因 - 一个平静的下午突然被打破 💣
那是一个普通的工作日下午，我正优哉游哉地喝着咖啡，突然老板火急火燎地冲过来："线上环境Safari浏览器报错了！！！"此时内心OS：完了完了，这下要加班了... 😭
问题呈现 - 这个报错真是"优雅" 🎭[Vue warn]: Error in render: "SyntaxError: Invalid regular expression: invalid group specifier name"
看到这个报错，我的内心是崩溃的：这不就是一个简单的正则表达式吗？怎么还闹出"国际新闻"了？！原来的正则表达式长这样：
^(?![.·\s])([\u2E80-\u9FFF·]{2,60}|[a-zA-Z\s]{2,60})(?<![.·\s])$
看起来人模人样，实际上却在Safari浏览器上掀起了一场"风暴"！
紧急排查 - 化身福尔摩斯 🔍
Step 1: 本地复现大作战
首先要找到这个"捣蛋鬼"。但线上代码都压缩过，跟天书似的，这可咋整？灵机一动：让测试的苹果电脑连我本地不就行了！
ipconfig # Windows下查IP地址的秘诀
就像订外卖一样，把本地地址端口发给测试：http://192.168.x.x:8080
Step 2: 真相大白
原来是 Safari 对 (?<!) 这种写法"过敏"！这就像是给猫咪吃辣椒，当然要炸毛啊！ 🐱
解决方案 - 绝地反击 💪
经过反复实验，终于找到了一个优雅的解决方案：
^(?![·.\s])(?:[\u4E00-\u9FFF·]{2,60}|[a-zA-Z][a-zA-Z\s]{1,59})(?![·.\s])$
这个正则表达式就像是一个调教好的保安，严格把关：
-
不让中英文混着写（就像不能让孙悟空穿西装打领带）
-
不让单个字符通过（一个人的名字怎么能只有一个字呢？）
-
特殊字符？对不起，你不在白名单上！
经验总结 - 写给同样踩坑的朋友们 📝
-
浏览器兼容性
-
Safari 就像是那个挑食的孩子，有些正则表达式特性它就是不吃！
-
写正则时要像照顾熊孩子一样，照顾到各个浏览器的"口味"
-
调试技巧
-
本地环境复现，就像是把案发现场搬回警局一样
-
IP地址共享，让测试也能"吃上"你的本地环境
-
正则优化
-
简单即是美，不要为了炫技写一些"花里胡哨"的东西
-
可读性和可维护性，让接手的同事不会想打人
结局 - 完美收官 🌟
最后，老板露出了欣慰的笑容："问题解决得不错！"内心OS：这下终于可以准时下班了！ 😄
彩蛋 - 实用工具推荐 🛠️
- 正则测试网站：regex101
（就像是正则表达式的"健身房"，在这里测试完再放出去见人）
-
本地环境共享配置：
// vue.config.js - 让你的本地环境变身"共享单车"
module.exports = {
devServer: {
host: '0.0.0.0', // 对所有人开放
port: 8080 // 指定端口
}
}
写在最后
记住，正则表达式就像是武功秘籍，看起来很美好，但用不好就会伤到自己。要像李小龙一样："不要把正则表达式当作炫技的工具，而要把它当作解决问题的方案。" 🥋希望这篇文章能帮助到同样在正则表达式上"摔跤"的小伙伴们！记住：代码虐我千百遍，我待代码如初恋~
如果这篇文章对你有帮助，别忘了点赞+收藏哦！让我们一起在代码的海洋里快乐遨游！ 🏊
