这篇内容是在有道云旧笔记基础上重新整理的 JavaScript 与前端开发 笔记。原始记录偏碎片化，这里补充了使用场景、阅读顺序和落地时需要注意的边界，方便以后在项目里快速复用。
适用场景 ​
- 前端业务中需要快速处理数据、DOM、浏览器能力或通用工具函数时参考。
- 把散落在项目里的小技巧抽成可复用代码片段，减少重复实现。
- 排查兼容性和边界输入问题前，先用本文示例确认核心思路。
核心要点 ​
- 正文已经按 「匹配 @用户名」、「匹配 话题」、「匹配的信息加粗」 等小节组织，阅读时可以先定位到当前问题对应的小节。
- 保留了 1 段可直接参考的代码或命令，复制前需要按当前项目路径、版本和变量名做调整。
匹配 @用户名 ​
首先分析下微博中从哪里开始到哪里结束才是一个完整的用户名，按照常规的表现形式，一般是以@开头，以：结尾，中间为用户的名称。
匹配表达式就可写为：@[^：:]+ 这是简单的写法，但是有些是在微博之后再@的，还有就是连续@的情况，还有些是以逗号等结束的，因此完善一下 修改为：@[^,，：:\s@]+ 但是这些匹配都是从形式上进行了一个大概的归类，但是为了更为严谨，就要彻底分析其用户名的具体格式，例如新浪微博中的用户名格式为是“4-30个字符，支持英文、数字、"_"或减号” ，也就是说，支持中文、字母、数字、下划线及减号，并且是4到30个字符（这里暂且认为汉字为一个字符）那么在写匹配的表达式的时候就可以这么来写: @[\u4e00-\u9fa5a-zA-Z0-9_-]{4,30} 转换为php可用正则： preg_match_all('/@([\\x{4e00}-\\x{9fa5}a-zA-Z0-9-_]{2,30})+/u', $content, $matches) 若需要带小数点： '/@([\\x{4e00}-\\x{9fa5}a-zA-Z0-9-_\.]{2,30})+/u'
匹配 #话题# ​
这个相对相对就简单了很多，前后都是#，以#号开始并以#结束 匹配表达式写为： #[^#]+#
匹配的信息加粗 ​
1 | '这是@蓝思同学 提供的知识，请大家多多关照'.replace(new RegExp('@[\\u4e00-\\u9fa5a-zA-Z0-9_-]{2,30}', 'gi'), (str) => `<span style="font-weight:bold;">${str}</span>`) |
实践检查清单 ​
- 把示例函数放进业务前，先补齐空值、异常输入、异步失败和浏览器兼容性测试。
- 通用工具函数应尽量收敛到项目公共模块，避免多个页面复制出不同版本。
- 涉及接口、服务端或权限逻辑时，补充失败分支和权限边界测试。
复盘小结 ​
这篇笔记更适合作为问题排查或方案落地前的速查材料。后续如果在真实项目中再次遇到同类问题，可以继续把具体版本、报错信息、最终取舍和验证结果补到对应小节里，让它从代码片段逐步沉淀成完整方案。