如何移除XHTML中img标签的闭合斜杠/以适配HTML5？

方法1：正则表达式替换（适合结构规范的简单场景） #

直接匹配img标签末尾的闭合斜杠部分，替换为HTML5的闭合形式：

const txt1 = '<img src="happy.gif" alt="Happy face" />';
const html5Img = txt1.replace(/\s*\/>$/, '>');
console.log(html5Img); // 输出: <img src="happy.gif" alt="Happy face">

正则说明：\s*匹配标签末尾闭合斜杠前的任意空格，\/>精准匹配XHTML的闭合标记，替换为HTML5的>即可。这种方式代码简洁，适合确定标签格式规范的场景。

方法2：DOM解析法（适合复杂/不确定的标签结构） #

利用DOM API自动处理标签格式，这种方法能避免正则可能出现的边缘错误，兼容性和健壮性更好：

const txt1 = '<img src="happy.gif" alt="Happy face" />';
const tempContainer = document.createElement('div');
tempContainer.innerHTML = txt1;
const html5Img = tempContainer.innerHTML;
console.log(html5Img); // 输出符合HTML5标准的img标签

原理：将XHTML字符串插入到临时DOM元素中，浏览器会自动按照HTML5规范解析并输出标签，自动移除img标签的闭合斜杠，无论标签内属性顺序、空格多少都能正确处理。

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