JavaScript提取HTML后，如何移除标签间换行空白并合并为字符串？

你可以通过正则表达式清理标签之间的多余换行和空白字符，将SVG的outerHTML转换为连续字符串：

方法一：直接处理outerHTML #

let svg_object_alt = document.querySelector('svg').outerHTML;
// 替换标签间的所有空白（换行、空格、制表符等）
svg_object_alt = svg_object_alt.replace(/>\s+</g, '><').trim();
console.log(svg_object_alt);

方法二：使用XMLSerializer（更可靠的序列化方式） #

如果outerHTML的格式不稳定，推荐用XMLSerializer先序列化SVG元素，再清理空白：

const svgElement = document.querySelector('svg');
const serializer = new XMLSerializer();
let svg_object_alt = serializer.serializeToString(svgElement);
// 清理标签间多余空白
svg_object_alt = svg_object_alt.replace(/>\s+</g, '><').trim();
console.log(svg_object_alt);

说明 #

• 正则表达式 />\s+</g 匹配所有位于闭合标签 > 和开始标签 < 之间的连续空白字符（包括换行、空格、制表符），并替换为 ><，消除标签间的换行和空白。
• trim() 用于去除SVG字符串首尾的多余空白。

处理后的结果会将你的SVG代码合并为一行连续字符串，例如：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800pt" height="600pt" viewBox="0 0 800 600"><path transform="matrix(1,0,0,-1,0,600)" stroke-width=".074" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#929292" d="M489.52 144.07 488.76 142.24" /><path transform="matrix(1,0,0,-1,0,600)" d="M475.72 281.52 475.65 281.29H476.04L475.72 281.52Z" fill="#ff0000" /><path transform="matrix(1,0,0,-1,0,600)" d="M478.28 281.15 478.34 280.88 478.28 281.43V281.15Z" fill="#ff0000" fill-rule="evenodd " /></svg>

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