使用JS正则表达式提取SVG xlink:href的值

本文将介绍如何使用JavaScript正则表达式从SVG字符串中提取'use'标签的'xlink:href'属性值，并去除其中的'#'符号。

假设我们有以下SVG字符串：

<svg xmlns='http://www.w3.org/2000/svg' width='11.893ex' height='2.072ex' role='img' focusable='false' viewBox='0 -833.9 5256.7 915.9' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' style='vertical-align: -0.186ex;'><g stroke='currentColor' fill='currentColor' stroke-width='0' transform='scale(1,-1)'><g data-mml-node='math'><g data-mml-node='msup'><g data-mml-node='mi'><use data-c='1D44E' xlink:href='#MJX-TEX-I-1D44E'></use></g><g data-mml-node='mn' transform='translate(562,363) scale(0.707)'><use data-c='32' xlink:href='#MJX-TEX-N-32'></use></g></g><g data-mml-node='mo' transform='translate(1187.8,0)'><use data-c='2B' xlink:href='#MJX-TEX-N-2B'></use></g><g data-mml-node='msup' transform='translate(2188,0)'><g data-mml-node='mi'><use data-c='1D44F' xlink:href='#MJX-TEX-I-1D44F'></use></g><g data-mml-node='mn' transform='translate(462,363) scale(0.707)'><use data-c='32' xlink:href='#MJX-TEX-N-32'></use></g></g><g data-mml-node='mo' transform='translate(3331.3,0)'><use data-c='3D' xlink:href='#MJX-TEX-N-3D'></use></g><g data-mml-node='msup' transform='translate(4387.1,0)'><g data-mml-node='mi'><use data-c='1D450' xlink:href='#MJX-TEX-I-1D450'></use></g><g data-mml-node='mn' transform='translate(466,363) scale(0.707)'><use data-c='32' xlink:href='#MJX-TEX-N-32'></use></g></g></g></g></svg>

我们可以使用以下正则表达式提取所有'xlink:href'的值并去除'#'符号：

const str = '<svg ...><use data-c='1D450' xlink:href='#MJX-TEX-I-1D450'></use></g></svg>';
const regex = /xlink:href='#[^']*'/g;
const matches = str.match(regex);

const result = matches.map(match => match.replace(/xlink:href='#/, '').replace(/'/g, ''));

console.log(result);

这段代码将输出以下数组：

[
  'MJX-TEX-I-1D44E',
  'MJX-TEX-N-32',
  'MJX-TEX-N-2B',
  'MJX-TEX-I-1D44F',
  'MJX-TEX-N-32',
  'MJX-TEX-N-3D',
  'MJX-TEX-I-1D450',
  'MJX-TEX-N-32'
]

代码解释:

regex = /xlink:href='#[^']*'/g;: 这个正则表达式匹配所有以 xlink:href='#' 开头，以 ' 结尾，中间包含除 ' 之外的任意字符的字符串。
str.match(regex);: 这行代码使用正则表达式在字符串中查找所有匹配项，并将结果存储在 matches 数组中。
matches.map(match => ...): 这行代码遍历 matches 数组，并对每个匹配项执行箭头函数中的操作。
match.replace(/xlink:href='#/, '').replace(/'/g, ''): 这行代码首先将匹配项中的 xlink:href='#' 替换为空字符串，然后将剩余字符串中的所有 ' 字符替换为空字符串，最终得到只包含所需值的字符串。

通过以上步骤，我们成功地使用JS正则表达式提取了SVG字符串中所有'use'标签的'xlink:href'属性值，并去除了其中的'#'符号。