javascript - 正则表达式:提取 SVG 路径 d 属性

Question

我有一个包含一个 SVG 路径的源:

<svg xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey"><path d="M 10 10 L 100 100 Q 200 50 300 100 A 80 50 20 1 0 400 600 Z" fill="none" stroke="red" stroke-width="5" /></svg>

也可以单引号

<svg xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey"><path d='M 10 10 L 100 100 Q 200 50 300 100 A 80 50 20 1 0 400 600 Z' fill="none" stroke="red" stroke-width="5" />

我想要

M 10 10 L 100 100 Q 200 50 300 100 A 80 50 20 1 0 400 600 Z

我试过了(JS)

var result = svg_tag.match(/<path(.*?)>/g).map(function(val){
   return val.replace(/<path d="/g,'');
});

但它返回

[
  'M',                '10',
  '10',               'L',
  '100',              '100',
  'Q',                '200',
  '50',               '300',
  '100',              'A',
  '80',               '50',
  '20',               '1',
  '0',                '400',
  '600',              'Z"',
  'fill="none"',      'stroke="red"',
  'stroke-width="5"', '/>'
]

Answer 1

[\w]{10,}

此 RegExp 匹配任何长度至少为 10 个字符且仅包含字母、数字、空格和下划线的子字符串。

const regex = /[ \w]{10,}/;

const tag1 = '<svg xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey"><path d="M 10 10 L 100 100 Q 200 50 300 100 A 80 50 20 1 0 400 600 Z" fill="none" stroke="red" stroke-width="5" /></svg>';
const tag2 = `<svg xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey"><path d='M 10 10 L 100 100 Q 200 50 300 100 A 80 50 20 1 0 400 600 Z' fill="none" stroke="red" stroke-width="5" />`;

console.log(tag1.match(regex)[0]);
console.log(tag2.match(regex)[0]);