正则表达式匹配字符串中所有的img标签的src属性进行批量处理?

作者站长头像
站长
· 阅读数 6

后台返回的富文本字符串中找到所有的img标签 给src 加上属性属性值

比如其中一个类似的富文本的字符串,找到其中所有的img标签,判断src 属性有没有类似www.xxxx.com的值, 有的话就跳过,没有的话就给加上

'<html>\r\n<body>\r\n<p style="text-indent:24.0pt; text-align:justify"><span style="font-size:18px"><span style="line-height:150%"><span style="font-family:&quot;Times New Roman&quot;,&quot;serif&quot;"><span style="line-height:150%"><span style="font-family:仿宋">近日,山东省海上搜救中心发布《关于对</span></span><span lang="EN-US" style="line-height:150%">2022-2023</span><span style="line-height:150%"><span style="font-family:仿宋">年度海上搜救工作先进集体和个人给予表扬的通报》,对</span></span><span lang="EN-US" style="line-height:150%">2022</span><span style="line-height:150%"><span style="font-family:仿宋">年以来在海上搜救工作中表现突出的集体和个人予以通报表扬。自然资源部北海局属北海预报减灾中心海洋生态预警与应急室获评先进集体,北海海洋技术中心调度指挥室负责人徐昕、北海预报减灾中心海洋生态预警与应急室毕凡获评先进个人。</span></span><span lang="EN-US" style="line-height:150%">12</span><span style="line-height:150%"><span style="font-family:仿宋">月</span></span><span lang="EN-US" style="line-height:150%">5</span><span style="line-height:150%"><span style="font-family:仿宋">日,山东省海事局指挥中心为北海局获评“山东省</span></span><span lang="EN-US" style="line-height:150%">2022-2023</span><span style="line-height:150%"><span style="font-family:仿宋">年度海上搜救先进集体和先进个人”的单位和个人颁发证书。北海局预警监测处、北海预报减灾中心、北海海洋技术中心派员参加了仪式。</span></span></span></span></span></p>\r\n<p style="text-indent:24.0pt; text-align:justify">&nbsp;</p>\r\n<p style="text-indent:24pt; text-align:center"><span style="font-size:18px"><span style="line-height:150%"><span style="font-family:&quot;Times New Roman&quot;,&quot;serif&quot;"><span style="line-height:150%"><span style="font-family:仿宋"><img alt="" src="/upload/BContent/20231212092650tu-1_20231211164143.jpg" style="width:527px; height:344px"></span></span></span></span></span></p>\r\n<p align="center" style="text-align:center; text-indent:24.0pt"><span style="font-size:12pt"><span style="line-height:150%"><span style="font-family:&quot;Times New Roman&quot;,&quot;serif&quot;"><span style="background:white"><span style="line-height:150%"><span style="font-family:仿宋"><span style="color:#63666d">图1\r\n 山东海事局指挥中心为获奖集体和个人代表颁发证书</span></span></span></span></span></span></span></p>\r\n<p align="center" style="text-align:center; text-indent:24.0pt">&nbsp;</p>\r\n<p style="text-indent:24.0pt; text-align:justify"><span style="font-size:18px"><span style="line-height:150%"><span style="font-family:&quot;Times New Roman&quot;,&quot;serif&quot;"><span style="line-height:150%"><span style="font-family:仿宋">自然资源部北海局是国家海上搜救部际联席会议的成员单位,近年来,在认真组织各级海洋预报机构为搜救部门提供海洋预警信息的同时,还积极探索开展海上搜救目标漂移预测工作。其中,北海预报减灾中心牵头研制的“国家海上搜救环境保障服务平台”(</span></span><span lang="EN-US" style="line-height:150%">http://www.marinesar.cn/</span><span style="line-height:150%"><span style="font-family:仿宋">),是自然资源部对外提供搜救预报的统一业务平台,</span></span>2020<span style="font-family:仿宋">年起成为中国海事局官网推荐开展搜救辅助的平台。</span><span style="line-height:150%"><span style="font-family:仿宋">平台用户包括中国海上搜救中心、各省市海上搜救中心、军方和科研机构等</span></span><span lang="EN-US" style="line-height:150%">180</span><span style="line-height:150%"><span style="font-family:仿宋">余家单位</span></span><span lang="EN-US" style="line-height:150%">2000</span><span style="line-height:150%"><span style="font-family:仿宋">余个,桌面版、手机和网页版使用次数累计</span></span><span lang="EN-US" style="line-height:150%">8000</span><span style="line-height:150%"><span style="font-family:仿宋">余次。</span></span><span style="line-height:150%"><span style="font-family:仿宋">基于该平台可针对海上目标进行漂移轨迹、搜寻范围及海洋环境要素的预测,并为海上搜救部门提供预报产品。平台服务受到了海上搜救一线部门的充分认可。</span></span><span style="font-family:仿宋">北海海洋技术中心按照山东省主管部门和北海局统筹部署,参与做好海上搜救相关工作,保持所管船舶持续适航状态和机动性,做好船舶航次计划审批、船舶调度等相关工作,为山东省海上搜救工作任务落实提供良好船舶平台支持,以“生命至上,服务海洋”为原则,将北海局船队逐步打造成一支旗帜鲜明、敢打硬仗的海区海上搜救重要支撑队伍。</span></span></span></span></p>\r\n<p style="text-indent:24.0pt; text-align:justify">&nbsp;</p>\r\n<p style="text-indent:24pt; text-align:center"><span style="font-size:18px"><span style="line-height:150%"><span style="font-family:&quot;Times New Roman&quot;,&quot;serif&quot;"><span style="font-family:仿宋"><img alt="" src="/upload/BContent/20231212092803tu-2_20231211164201.png" style="width:680px; height:424px"></span></span></span></span></p>\r\n<p align="center" style="text-align:center; text-indent:24.0pt"><span style="font-size:12pt"><span style="line-height:150%"><span style="font-family:&quot;Times New Roman&quot;,&quot;serif&quot;"><span style="background:white"><span style="line-height:150%"><span style="font-family:仿宋"><span style="color:#63666d">图2\r\n 北海预报减灾中心牵头研制的国家海上搜救环境保障服务平台</span></span></span></span></span></span></span></p>\r\n<p align="center" style="text-align:center; text-indent:24.0pt"><span style="font-size:18px"><strong><span style="line-height:150%"><span style="font-family:&quot;Times New Roman&quot;,&quot;serif&quot;"><span style="line-height:150%"><span style="font-family:仿宋">(</span></span><a href="http://www.marinesar.cn/" style="color:#0563c1; text-decoration:underline"><span style="line-height:150%">http://www.marinesar.cn/</span></a><span style="line-height:150%"><span style="font-family:仿宋">)</span></span></span></span></strong></span></p>\r\n</body>\r\n</html>\r\n'

应该用正则表达式吧,奈何是个渣渣

回复
1个回答
avatar
test
2024-06-23
function addPrefixToImg(html, prefix) {
  const regexp = /<img[^>]+src="([^">]+)"/g;
  const modifiedHtml = html.replace(regexp, (match, src) => {
    if (!src.startsWith(prefix)) {
      return match.replace(src, `${prefix}${src}`);
    }
    return match;
  });
  return modifiedHtml;
}

e.g. const modifiedHtml = addPrefixToImg(html, prefix);

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容