这篇内容是在有道云旧笔记基础上重新整理的 JavaScript 与前端开发 笔记。原始记录偏碎片化，这里补充了使用场景、阅读顺序和落地时需要注意的边界，方便以后在项目里快速复用。

适用场景 ​

  • 前端业务中需要快速处理数据、DOM、浏览器能力或通用工具函数时参考。
  • 把散落在项目里的小技巧抽成可复用代码片段，减少重复实现。
  • 排查兼容性和边界输入问题前，先用本文示例确认核心思路。

核心要点 ​

  • 正文以代码或命令片段为主，阅读时建议先确认目标问题，再挑选对应片段验证。
  • 保留了 1 段可直接参考的代码或命令，主要涉及 javascript，复制前需要按当前项目路径、版本和变量名做调整。
  • 文中保留了 5 个导出图片资源，适合和文字步骤一起对照查看。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 获取img标签
var imgReg = /<img.*?(?:>|\/>)/gi; //匹配所有img标签的正则表达式规则
var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; //匹配所有src地址的正则表达式规则
var imgs = content.match(imgReg); //获取所有图片，格式为数组

const reg = /<p\b[^<>]*><img\b[^<>]*\/><\/p>/g
 
// 这边是默认匹配0下标进行html文本替换
// const matchStr = content.match(reg)
// const strReg = /<img\b[^<>]*\b\/>/g
// const replaceStr = matchStr[0].match(strReg)[0]
// const newContent = content.replace(reg, replaceStr)
// <img.*?class="(.*?)".*?\/?>

// 这边匹配所有符合条件的进行html文本替换
const matchStr = content.match(reg)
const strReg = /<img\b[^<>]*\b\/>/g
const replaceStrs = []
matchStr.forEach((str, index) => {
  content = content.replace(reg, str.match(strReg)[index])
})

————————————————

实践检查清单 &#8203;

  • 把示例函数放进业务前，先补齐空值、异常输入、异步失败和浏览器兼容性测试。
  • 通用工具函数应尽量收敛到项目公共模块，避免多个页面复制出不同版本。
  • 涉及 UI 或浏览器行为时，至少在桌面端和移动端各验证一次关键路径。

复盘小结 &#8203;

这篇笔记更适合作为问题排查或方案落地前的速查材料。后续如果在真实项目中再次遇到同类问题，可以继续把具体版本、报错信息、最终取舍和验证结果补到对应小节里，让它从代码片段逐步沉淀成完整方案。