js如何使用正则表达式把富文本中第一个img的src匹配出来拼接成一个数组？

发布于
2023-12-28 山东

后台返回一个res.data是一个数组对象，每一个对象里面有一个content属性，是如下的富文本

"<html>
<body>
<p style="text-align:center"><img alt="" src="/upload/BContent/20231222160711title.bmp" style="width:550px; height:365px"></p>
<p style="text-align:center">&nbsp;</p>
<p style="text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">各相关雷达厂商：</span></span></p>
<p style="text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">&nbsp;&nbsp; 为进一步做好北海区X波段岸基测冰雷达建设前期准备工作，我中心现诚挚邀请相关雷达厂商开展X波段岸基测冰雷达现场比测，根据目前海冰发展安排各项具体事项如下：</span></span></p>
<p style="text-indent:21.0pt; text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">1．比测时间：2023年12月底至2024年3月中旬。</span></span></p>
<p style="text-indent:21.0pt; text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">2．比测地点：辽宁省盘锦市辽滨金帛滩或大连温坨子海洋站</span></span></p>
<p style="text-indent:21.0pt; text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">3．比测总体要求：要求仪器设备在比测期间每日开展定时自动化观测，能实时、连续、大面的监测量程范围内的海冰信息。</span></span></p>
<p style="text-indent:21.0pt; text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">4．比测具体要素：浮冰冰型、浮冰厚度、浮冰密集度、浮冰漂移方向和速度、冰表面特征、海冰分布面积等。其中冰厚等监测要素的空间分辨率不大于10米。</span></span></p>
<p style="text-indent:21.0pt; text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">5．比测成果要求：比测过程中每日需向我中心指定服务器自动发送雷达原始回波数据图像、转换为CGCS2000坐标系后的回波数据图像、解译后的海冰各要素分布图（矢量化）、网&#26684;化的冰厚数据产品以及每日监测简报。</span></span></p>
<p style="text-indent:21.0pt; text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">6．报名与参测：请有意参与此次现场比测工作的厂商，于2023年12月25日前正式复函我中心，随函提供相关资质与业绩材料。受场地限制，我中心将根据提交材料的顺序与符合性选择3-5家厂商参与。其他具体事项将在确定参测厂家后另行通知。</span></span></p>
<p style="text-indent:21.0pt; text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">7．保障与分工：比测期间，我中心将与盘锦市自然资源局和大连海洋中心合作提供盘锦与温坨子比测地点的场地、安保与供电。其他差旅、运输、塔架租赁、安装和耗材等均由参测厂商自行负担。</span></span></p>
<p style="text-indent:21.0pt; text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">8．比测成果应用：本次比测结果将作为北海区后续雷达建设的重要技术参考。</span></span></p>
<p style="text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 联系人：黎舸&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 手机号：13791940068 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 邮箱：lige@ncs.mnr.gov.cn</span></span></p>
<p style="text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 传真号码：0532-58750682</span></span></p>
<p style="text-align:center"><img alt="" src="/upload/BContent/20231222160912tu-1.png" style="width:558px; height:315px"></p>
<p align="center" style="text-align:center"><span style="font-size:10.5pt"><span style="font-family:&quot;Calibri&quot;,&quot;sans-serif&quot;"><span style="font-family:宋体">图1&nbsp; 盘锦市比测地点现场照片-1</span></span></span></p>
<p align="center" style="text-align:center"><span style="font-size:10.5pt"><span style="font-family:&quot;Calibri&quot;,&quot;sans-serif&quot;"><span style="font-family:宋体">比测地点位于辽宁省盘锦市辽滨金帛滩，宜必思酒店楼顶。</span></span></span></p>
<p align="center" style="text-align:center">&nbsp;</p>
<p align="center" style="text-align:center"><img alt="" src="/upload/BContent/20231222160944tu-2.png" style="width:558px; height:315px"></p>
<p align="center" style="text-align:center"><span style="font-size:10.5pt"><span style="font-family:&quot;Calibri&quot;,&quot;sans-serif&quot;"><span style="font-family:宋体">图2&nbsp; 盘锦市比测地点现场照片-2</span></span></span></p>
<p align="center" style="text-align:center"><span style="font-size:10.5pt"><span style="font-family:&quot;Calibri&quot;,&quot;sans-serif&quot;"><span style="font-family:宋体">比测地点位于辽宁省盘锦市辽滨金帛滩，宜必思酒店楼顶。</span></span></span></p>
<p style="text-align:justify">&nbsp;</p>
</body>
</html>
"

把每个富文本中的第一个src的连接比对出来，拼接成一个ImageList

 images: [
        'http://www.xxx.org.cn/upload/BContent/202309051056040-%E5%9B%BE1.jpg',
        'http://www.xxx.org.cn/upload/BContent/20231108165526title-1.bmp',
        'http://www.xxx.org.cn/upload/BContent/20230816101744tu1%20%E7%94%9F%E6%80%81%E6%97%A5%E6%A0%87%E8%AF%86.jpg',
        'http://www.xxx.org.cn/upload/BContent/202305171507340-%E5%9B%BE%E7%89%871%E5%BF%97%E6%84%BF%E8%80%85%E5%90%88%E7%85%A7.jpg',
        'http://www.xxxx.org.cn/upload/BContent/20230403171340%E5%B7%A5%E4%BD%9C%E4%BC%9A-1.bmp'
      ],

javascript 正则表达式

阅读 1.1k

2 个回答

得票最新

3.9k1624

发布于
2023-12-28 江西

可以试试 DOMParser

const parser = new DOMParser();
const htmlStr = "some html string";
const html = parser.parseFromString(htmlStr, "text/html");
const images = Array.from(html.querySelectorAll("img")).map((img) => img.src);

玛拉_以琳

8.7k41541

发布于
2023-12-29 上海

使用正则的方法:

 var str = `<html>
<body>
<p style="text-align:center"><img alt="" src="/upload/BContent/20231222160711title.bmp" style="width:550px; height:365px"></p>
<p style="text-align:center">&nbsp;</p>
<p style="text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">各相关雷达厂商：</span></span></p>
<p style="text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">&nbsp;&nbsp; 为进一步做好北海区X波段岸基测冰雷达建设前期准备工作，我中心现诚挚邀请相关雷达厂商开展X波段岸基测冰雷达现场比测，根据目前海冰发展安排各项具体事项如下：</span></span></p>
<p style="text-indent:21.0pt; text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">1．比测时间：2023年12月底至2024年3月中旬。</span></span></p>
<p style="text-indent:21.0pt; text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">2．比测地点：辽宁省盘锦市辽滨金帛滩或大连温坨子海洋站</span></span></p>
<p style="text-indent:21.0pt; text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">3．比测总体要求：要求仪器设备在比测期间每日开展定时自动化观测，能实时、连续、大面的监测量程范围内的海冰信息。</span></span></p>
<p style="text-indent:21.0pt; text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">4．比测具体要素：浮冰冰型、浮冰厚度、浮冰密集度、浮冰漂移方向和速度、冰表面特征、海冰分布面积等。其中冰厚等监测要素的空间分辨率不大于10米。</span></span></p>
<p style="text-indent:21.0pt; text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">5．比测成果要求：比测过程中每日需向我中心指定服务器自动发送雷达原始回波数据图像、转换为CGCS2000坐标系后的回波数据图像、解译后的海冰各要素分布图（矢量化）、网&#26684;化的冰厚数据产品以及每日监测简报。</span></span></p>
<p style="text-indent:21.0pt; text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">6．报名与参测：请有意参与此次现场比测工作的厂商，于2023年12月25日前正式复函我中心，随函提供相关资质与业绩材料。受场地限制，我中心将根据提交材料的顺序与符合性选择3-5家厂商参与。其他具体事项将在确定参测厂家后另行通知。</span></span></p>
<p style="text-indent:21.0pt; text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">7．保障与分工：比测期间，我中心将与盘锦市自然资源局和大连海洋中心合作提供盘锦与温坨子比测地点的场地、安保与供电。其他差旅、运输、塔架租赁、安装和耗材等均由参测厂商自行负担。</span></span></p>
<p style="text-indent:21.0pt; text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">8．比测成果应用：本次比测结果将作为北海区后续雷达建设的重要技术参考。</span></span></p>
<p style="text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 联系人：黎舸&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 手机号：13791940068 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 邮箱：lige@ncs.mnr.gov.cn</span></span></p>
<p style="text-align:justify"><span style="font-size:18px"><span style="font-family:SimSun">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 传真号码：0532-58750682</span></span></p>
<p style="text-align:center"><img alt="" src="/upload/BContent/20231222160912tu-1.png" style="width:558px; height:315px"></p>
<p align="center" style="text-align:center"><span style="font-size:10.5pt"><span style="font-family:&quot;Calibri&quot;,&quot;sans-serif&quot;"><span style="font-family:宋体">图1&nbsp; 盘锦市比测地点现场照片-1</span></span></span></p>
<p align="center" style="text-align:center"><span style="font-size:10.5pt"><span style="font-family:&quot;Calibri&quot;,&quot;sans-serif&quot;"><span style="font-family:宋体">比测地点位于辽宁省盘锦市辽滨金帛滩，宜必思酒店楼顶。</span></span></span></p>
<p align="center" style="text-align:center">&nbsp;</p>
<p align="center" style="text-align:center"><img alt="" src="/upload/BContent/20231222160944tu-2.png" style="width:558px; height:315px"></p>
<p align="center" style="text-align:center"><span style="font-size:10.5pt"><span style="font-family:&quot;Calibri&quot;,&quot;sans-serif&quot;"><span style="font-family:宋体">图2&nbsp; 盘锦市比测地点现场照片-2</span></span></span></p>
<p align="center" style="text-align:center"><span style="font-size:10.5pt"><span style="font-family:&quot;Calibri&quot;,&quot;sans-serif&quot;"><span style="font-family:宋体">比测地点位于辽宁省盘锦市辽滨金帛滩，宜必思酒店楼顶。</span></span></span></p>
<p style="text-align:justify">&nbsp;</p>
</body>
</html>
`;
  //匹配图片（g表示匹配所有结果i表示区分大小写）
  var imgReg = /<img.*?(?:>|\/>)/gi;
  //匹配src属性
  var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
  var arr = str.match(imgReg);
  console.log("所有已成功匹配图片的数组：" + arr);
  for (var i = 0; i < arr.length; i++) {
    var src = arr[i].match(srcReg);
    //获取图片地址
    if (src[1]) {
      console.log("已匹配的图片地址" + (i + 1) + "：" + src[1]);
    }
    //当然你也可以替换src属性
    if (src[0]) {
      var t = src[0].replace(/src/i, "href");
    }
  }

参考:

https://segmentfault.com/q/1010000004178052

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

js如何使用正则表达式把富文本中第一个img的src匹配出来拼接成一个数组？

你尚未登录，登录后可以

扁平化数组转换成树形?

js 如何将Key属性相同的放在同一个数组？

省市区街道数据在哪里可以下载？

两个promise问题？

Object assgin拷贝问题？

js如何在并发中同步两个fetch请求？

Vue项目一个报错无法找到原因?