替换特定模式的子字符串

Posted 2023-02-21

【中文标题】替换特定模式的子字符串

【英文标题】：Replace a substring of certain pattern

【发布时间】：2020-11-13 20:22:40

【问题描述】：

<svg fill="#000075" data-icon="symbol-triangle-down"   viewBox="0 0 16 16"><desc>symbol-triangle-down</desc><path d="M13 4.01c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 .16.05.31.11.44H3.1l4 8h.01c.16.33.49.56.89.56s.72-.23.89-.56h.01l4-8h-.01c.06-.14.11-.28.11-.44z" fill-rule="evenodd"></path></svg>

我想用颜色替换填充的值，比如说#ff0000。请注意，字符串中颜色的值并不总是相同的，并且是动态的。

这就是我所拥有的：

const str = `<svg fill="#000075" data-icon="symbol-triangle-down"   viewBox="0 0 16 16"><desc>symbol-triangle-down</desc><path d="M13 4.01c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 .16.05.31.11.44H3.1l4 8h.01c.16.33.49.56.89.56s.72-.23.89-.56h.01l4-8h-.01c.06-.14.11-.28.11-.44z" fill-rule="evenodd"></path></svg>`;

console.log(str.replace(/fill="7"/, '#ff0000'))

请指教。

最终结果应该是

const str = `<svg fill="#ff0000" data-icon="symbol-triangle-down"   viewBox="0 0 16 16"><desc>symbol-triangle-down</desc><path d="M13 4.01c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 .16.05.31.11.44H3.1l4 8h.01c.16.33.49.56.89.56s.72-.23.89-.56h.01l4-8h-.01c.06-.14.11-.28.11-.44z" fill-rule="evenodd"></path></svg>`;

【参考方案1】：

使用

const str = `<svg fill="#000075" data-icon="symbol-triangle-down"   viewBox="0 0 16 16"><desc>symbol-triangle-down</desc><path d="M13 4.01c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 .16.05.31.11.44H3.1l4 8h.01c.16.33.49.56.89.56s.72-.23.89-.56h.01l4-8h-.01c.06-.14.11-.28.11-.44z" fill-rule="evenodd"></path></svg>`;

console.log(str.replace(/(\sfill=")#[a-fA-F0-9]+(")/, '$1#ff0000$2'))

见regex proof。

说明

--------------------------------------------------------------------------------
  (                        group and capture to \1:
--------------------------------------------------------------------------------
    \s                       whitespace (\n, \r, \t, \f, and " ")
--------------------------------------------------------------------------------
    fill="                   'fill="'
--------------------------------------------------------------------------------
  )                        end of \1
--------------------------------------------------------------------------------
  #                        '#'
--------------------------------------------------------------------------------
  [a-fA-F0-9]+             any character of: 'a' to 'f', 'A' to 'F',
                           '0' to '9' (1 or more times (matching the
                           most amount possible))
--------------------------------------------------------------------------------
  (                        group and capture to \2:
--------------------------------------------------------------------------------
    "                        '"'
--------------------------------------------------------------------------------
  )                        end of \2

【讨论】：

这应该适用于十六进制格式的所有颜色，对吧？

@a2441918 是的，[a-fA-F0-9]+ 匹配十六进制数字，请参阅 ***.com/questions/9221362/…