替换特定模式的子字符串

Question

<svg fill="#000075" data-icon="symbol-triangle-down" width="16" height="16" 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" width="16" height="16" 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" width="16" height="16" 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>`;

Answer 1

使用

const str = `<svg fill="#000075" data-icon="symbol-triangle-down" width="16" height="16" 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