js regular expression how to format html correctly?

Question

JavaScript

Hello. Today I've been studying regular expressions all day, and I could not solve the problem. I will try to explain with examples.

There is at the entrance:

<div class="dialog__row_1">{FFFFFF}Склад:{33CCCC}%d {FFFFFF}из {33CCCC}%d</div>
<div class="dialog__row_2">Продуктов:%s</div>
<div class="dialog__row_2">{FFFFFF}Введите сколько желаете заказать:</div>

1. It is necessary that the regular expression replace {FFFFFF} with and set the closing one before the next {33CCCC} , and so go through all the colors. 2. Now the most difficult thing, dialog__row_1 has the last color {33CCCC} and it should work . But dialog__row_2 did not specify a color in {}, so you need to duplicate the last color from dialog__row_1 As it should be in the final:
<span style="color:#FFFFFF">
</span>



<span style="color:#33CCCC">%d</span>

<div class="dialog__row_1">
  <span style="color:#FFFFFF">Склад: </span>
  <span style="color:#33CCCC">%d </span> 
  <span style="color:#FFFFFF">из </span> 
  <span style="color:#33CCCC">%d</span> // Пункт 1
</div>
<div class="dialog__row_2">
  <span style="color:#33CCCC">Продуктов: %s</span> // Цвет взят из пункт 1
</div>
<div class="dialog__row_2">
  <span style="color:#FFFFFF">Введите сколько желаете заказать:</span>
</div>

Answer 1

str.replace(
    /(?:(?<=<div\s+class="dialog__row_\d+">)|{([A-F\d]{6})})\s*([^\s<{][^<{]*)/g, 
    function () {
        arguments.callee.color = arguments[1] || arguments.callee.color; 
        return `<span style="color:#${arguments.callee.color}">${arguments[2]}</span>\n`
    }
)