JS正则需求：为匹配的<img>标签添加闭合斜杠

用JS正则将未闭合转为自闭合格式 #

直接上可行的代码方案，针对你的需求，我们可以用带有负向断言的正则精准匹配未闭合的<img>标签，避免对已经是自闭合格式的标签重复操作：

// 示例输入内容
const inputCode = `<div>
    <p>This is just some random text</p>
    <a href="https://somerandomsrc.com">
        <img src="https://somerandomsrc.com" alt="random image">
    </a>
    <img src="https://someotherrandomsrc.com" alt="another random image">
</div>`;

// 执行替换
const outputCode = inputCode.replace(/<img([^>]+?)(?<!\/)>/g, '<img$1 />');

console.log(outputCode);

正则逻辑拆解 #

• <img：精准匹配<img标签的起始部分
• ([^>]+?)：非贪婪模式捕获标签内的所有属性内容（避免过度匹配），这部分会被存到分组$1中
• (?<!\/)：负向后行断言，确保标签结尾的>前面没有斜杠，过滤掉已经是<img .../>格式的标签
• >：匹配未闭合标签的结尾

替换时将捕获的属性内容放回，在结尾添加空格和斜杠，转换成标准自闭合格式。

注意事项 #

如果你的HTML内容非常复杂（比如属性值里包含未转义的特殊字符、嵌套异常标签等），正则可能会出现匹配失误，这种场景下更推荐用DOM API解析处理：

const parser = new DOMParser();
const doc = parser.parseFromString(inputCode, 'text/html');
const outputCode = doc.body.innerHTML;

DOM解析会自动规范HTML标签格式，处理起来更可靠，但对于你给出的常规场景，正则方案足够简洁高效。

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