JS正则替换img相对路径为绝对路径时字符串截断问题

嘿，我一眼就看出问题出在哪了——你的第二个正则用了贪婪匹配，这就是导致内容被截断的元凶！

问题根源 #

你写的正则 <img(.*)src=\" 里的 .* 是正则里的贪婪量词，它的“尿性”就是能多匹配就多匹配：从文本里第一个 <img 标签开始，它会一直匹配到整个文本最后一个 src=" 的位置，把中间所有的内容（包括其他img标签、p标签、换行啥的）全给吞进去了。替换的时候这些被吞的内容自然就没了，只留下最后一个src相关的部分，可不就出现内容截断了嘛！

修复方案 #

我们把贪婪匹配改成非贪婪匹配，再让正则精准锁定单个img标签里的src属性，别让它跨标签瞎匹配。给你两个版本的代码：

基础版（只适配双引号）

url = url.replace(new RegExp("<img[^>]*?src=\"/", 'g'), "<img$&" + config.baseSPDomain);

进阶版（适配单/双引号，更通用）

const imgSrcRegex = new RegExp("<img[^>]*?src=(['\"])\/", 'g');
url = url.replace(imgSrcRegex, `<img$&${config.baseSPDomain}`);

给你拆解下正则逻辑 #

• <img：精准定位img标签的开头
• [^>]*?：非贪婪匹配任意不是>的字符——这一步很关键，确保我们只在当前这个img标签里折腾，不会跑到下一个标签去
• src=(['\"])：匹配src属性的等于号，同时捕获单引号或双引号（方便后面引用）
• \/：匹配相对路径开头的斜杠

替换的时候，$& 代表刚才匹配到的整个片段（比如 <img alt="test" src="/），再拼上你的base域名，这样每个img的相对路径都能被正确改成绝对路径，还不会破坏其他属性和标签结构。

测试效果 #

用你给的原始内容跑这个正则，每个img标签都会被完美处理：
比如原来的 <img src="/sites/Nieuwsportaal/PublishingImages/hall-of-fame.png" alt="" style="margin&#58;5px;" />
会变成 <img src="https://one365dev2.sharepoint.com/sites/Nieuwsportaal/PublishingImages/hall-of-fame.png" alt="" style="margin&#58;5px;" />
所有内容都完好无损，再也不会出现截断啦！

内容的提问来源于stack exchange，提问作者Rodney Wormsbecher