如何使用.replace方法替换SVG路径中指定第4个正则匹配组？

可以通过String.replace()结合回调函数实现指定（比如第4个）正则匹配组的替换，直接用简单参数无法精准定位到第N个匹配项，需要借助计数逻辑来完成。

示例SVG路径 #

M162.323 150.513L232.645 8L303.504 149.837L461.168 173.5L347.156 284.5L373.605 440.728L233.5 367.854L91.7415 442L118.424 284.883L5.151 173.549Z

正则表达式 #

[A-Z](-?\d*\.?\d*\s-?\d*\.?\d*)

该正则用于匹配SVG路径中的指令字符（M/L/Z等）及其后的坐标组。

实现代码 #

通过回调函数追踪匹配次数，定位到第4个匹配项后替换坐标内容：

const pathStr = "M162.323 150.513L232.645 8L303.504 149.837L461.168 173.5L347.156 284.5L373.605 440.728L233.5 367.854L91.7415 442L118.424 284.883L5.151 173.549Z";
const regex = /[A-Z](-?\d*\.?\d*\s-?\d*\.?\d*)/g;
let matchIndex = 0;

const updatedPath = pathStr.replace(regex, (fullMatch, coords) => {
  matchIndex++;
  // 替换第4个匹配项的坐标
  if (matchIndex === 4) {
    // 保留原指令字符，替换为新坐标
    return fullMatch[0] + "400 200";
  }
  return fullMatch;
});

console.log(updatedPath);

进阶坐标计算 #

如果需要根据拖拽偏移量计算新坐标，可以拆分原坐标数值后重新计算：

const dragOffsetX = -61.168;
const dragOffsetY = 26.5;

const updatedPath = pathStr.replace(regex, (fullMatch, coords) => {
  matchIndex++;
  if (matchIndex === 4) {
    const [x, y] = coords.split(" ").map(Number);
    const newX = x + dragOffsetX;
    const newY = y + dragOffsetY;
    // 保留指令字符，拼接格式化后的新坐标
    return `${fullMatch[0]}${newX.toFixed(3)} ${newY.toFixed(3)}`;
  }
  return fullMatch;
});

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