如何从JavaScript变量的编码数据中提取SVG标签？

嘿，这个需求我太熟了！想从包含XML声明、DOCTYPE的字符串里精准提取SVG标签内容，有两种实用方法，看你场景选就行：

如果你的SVG结构规整，不会出现嵌套的<svg>标签（一般也不会有这种情况），用正则就能快速匹配出来：

// 假设encodedData是你的目标字符串变量
const svgMatch = encodedData.match(/<svg[^>]*>[\s\S]*<\/svg>/i);
const extractedSvg = svgMatch ? svgMatch[0] : '';
console.log(extractedSvg);

简单说下这个正则的逻辑：

• <svg[^>]*>：匹配开头的SVG标签，把所有属性也一并带上
• [\s\S]*：匹配任意字符（包括换行），直到找到闭合的</svg>标签
• /i：忽略大小写，避免因为SVG标签大小写不一致导致匹配失败

如果你的内容里有复杂的XML结构，或者担心正则会因为特殊字符翻车，那用浏览器原生的DOMParser绝对是更稳妥的选择：

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(encodedData, "image/svg+xml");
const svgElement = xmlDoc.querySelector("svg");
// 转成字符串形式的SVG内容
const extractedSvg = svgElement.outerHTML;
console.log(extractedSvg);

这个方法是让浏览器帮你完整解析XML结构，不管里面有多少嵌套、特殊字符，都能精准定位到SVG元素，然后通过outerHTML拿到完整的标签字符串，几乎不会出错。

要是你是在Node.js环境下（没有浏览器的DOMParser），可以用jsdom库模拟DOM环境，用法差不多：

const { JSDOM } = require('jsdom');
const dom = new JSDOM(encodedData, { contentType: 'image/svg+xml' });
const svgElement = dom.window.document.querySelector("svg");
const extractedSvg = svgElement.outerHTML;
console.log(extractedSvg);

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