问题：
javascript - 正则表达式匹配字符串中所有的img标签的src属性进行批量处理？
夹谷星剑
后台返回的富文本字符串中找到所有的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:"Times New Roman","serif""><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"> </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:"Times New Roman","serif""><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:"Times New Roman","serif""><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"> </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:"Times New Roman","serif""><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"> </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:"Times New Roman","serif""><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:"Times New Roman","serif""><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:"Times New Roman","serif""><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'应该用正则表达式吧，奈何是个渣渣
共有3个答案
萧晔
// 创建一个虚拟的 DOM 元素 let htmlForEditorHtml = '<html>\r\n<body>\r\n<p style="text-indent:24.0pt; text-align:justify">..' let wrapper = document.createElement("div"); wrapper.innerHTML = htmlForEditorHtml; // 获取所有的 <img> 元素 let imgElements = wrapper.getElementsByTagName("img"); for (let i = 0; i < imgElements.length; i++) { let img = imgElements[i]; let src = img.getAttribute("src"); if (!src) { img.setAttribute("src", 'www.xxxx.com'); }else{ if(src != 'www.xxxx.com'){ img.setAttribute("src", 'www.xxxx.com'); } } } // 获取替换后的 HTML 字符串 let replacedHtmlString = wrapper.innerHTML; console.log(replacedHtmlString);
巫新知
类似这样你看可以不
let testDom = document.createElement('div');testDom.innerHTML = htmlStr;let testImg = testDom.querySelectorAll('img');for(let i = 0; i < testImg.length; i++){ let item = testImg[i]; let src = item.getAttribute('src'); if(src.indexOf('http') != 0){ item.setAttribute('src', 'http://www.baidu.com'+src); }}console.log(testDom.innerHTML);
管峻
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);
类似资料：
-
问题内容： 使用PHP，如何隔离$ foo的src属性的内容？我寻找的最终结果只会给我“ http://example.com/img/image.jpg ” 问题答案： 如果您不想使用正则表达式（或任何非标准的PHP组件），则使用内置的DOMDocument类的合理解决方案如下：
-
本文向大家介绍String字符串匹配javascript 正则表达式，包括了String字符串匹配javascript 正则表达式的使用技巧和注意事项，需要的朋友参考一下 在JavaScript代码中使用正则表达式进行模式匹配经常会用到String对象和RegExp对象的一些方法，例如replace、match、search等方法，下面所述是对相关方法使用的总结，需要的朋友参考下。 String对
-
我有一些xml文件，希望删除除特定字符串以外的所有内容。 StackOverflow上还有很多类似的问题，但都不适用于我的文件，在尝试了几个小时不同的正则表达式后，我想寻求帮助。 到目前为止，部分成功但并非完全成功的最接近的正则表达式是： xml文件的示例： 我使用regex101，因此可以将示例粘贴在那里，以了解为什么rex只能部分工作。简而言之，它与第一次出现的不匹配，但与第二次出现的匹配。我
-
问题内容： 我试图返回一个数组或切片，针对字符串针对特定正则表达式的所有匹配项。字符串是： 我想返回一个花括号之间所有字符串都匹配的数组。我尝试使用regexp软件包来完成此操作，但无法弄清楚如何返回我要查找的内容。这是我当前的代码： 但是，无论我尝试什么，每次返回的结果都是一片空白。 问题答案： 首先，您不需要正则表达式定界符。其次，使用原始字符串文字定义一个正则表达式模式是个好主意，您只需要使
-
问题内容： 我在尝试将我的javascript regex经验转移到Python时遇到了麻烦。 我只是想让它工作： …但是它打印无。如果我做： 它匹配…默认情况下是否匹配字符串的开头？当匹配时，如何使用结果？ 我如何进行第一场比赛？是否有比python网站提供的文档更好的文档？ 问题答案： 隐式添加到您的正则表达式的开头。换句话说，它仅在字符串的开头匹配。 将在所有位置重试。 一般来说，建议您在需
-
问题内容： 我在用Python将字符串中的数字匹配时遇到麻烦。尽管应该明确匹配，但甚至不匹配 或仅匹配。我的监督在哪里？ 问题答案： 阅读文档：http : //docs.python.org/2/library/re.html#re.match 如果在零个或多个字符 开头 的 字符串 您要使用（或）