CODEWITHSUNDEEP
javascriptregex
arunmmanoharan
arunmmanoharan

Reputation: 2675

Replace a substring of certain pattern

<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>

I would like to replace the value of fill with a color, lets say #ff0000. Please note that the value of color in the string is not always the same and is dynamic.

This is what I have:

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'))

Please advice.

The end result should be

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>`;

Upvotes: 2

Views: 49

Answers (1)

Ryszard Czech
Ryszard Czech

Reputation: 18641

Use

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'))

See regex proof.

Explanation

--------------------------------------------------------------------------------
  (                        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

Upvotes: 2

Related Questions