JS регулярные выражение как отформатировать правильно html?

Question

[vasyok228]

Здравствуйте. Сегодня целый день изучаю регулярные выражение, так и не смог решить проблему. Попытаюсь объяснить на примерах.

Есть на входе:

<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. Нужно, чтобы регулярное выражение, заменила {FFFFFF} на
<span style="color:#FFFFFF">
а закрывающий
</span>
выставить перед следующим {33CCCC}, и так пройтись по всем цветам.

2. Теперь самое сложное, у dialog__row_1 последний цвет {33CCCC} и должно получится
<span style="color:#33CCCC">%d</span>
Но у dialog__row_2 не указал цвет в {}, поэтому надо продублировать последний цвет из dialog__row_1

Как должно быть в финале:

<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

[dodo512]

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`
    }
)

Comments

[Роман]

а если не DIV?
а если класс не "dialog__row_\d+" ?
а если вообще нет класоов?
а если будет "{33CCCC} {FFFFFF}"?
а если будет "{FF.FFF}"?
а если будет "{ffffff}"?

и еще тысячи если)))))

Answer 2

[Роман]

На регулярках это можно сделать примерно так:



НО мой вам совет, никогда так не делайте!!!

Для таких вещей уже давно придуман более верный способ, обычно заключающийся в следующей последовательности
1. токенизация
2. обработка токенов (замены/преобразования и прочее)
3. сборка результата

В общим гуглите парсинг и токенизация текстов в общем и html в частности

Comments

[vasyok228]

Только что заметил если убрать в начале {FFFFFF} то не ставится

Так работает

<div class="dialog__row_1">{FFFFFF}Склад:{33CCCC}%d {FFFFFF}из {33CCCC}%d</div>

Так не работает

<div class="dialog__row_1">Склад:{33CCCC}%d {FFFFFF}из {33CCCC}%d</div>

[Роман]

vasyok228, я всеже советую вам работать через токенизацию. Вот примитивный пример как это можно делать

https://jsfiddle.net/sam9f7p5/5/

и вот еще

https://jsfiddle.net/sam9f7p5/6/

[vasyok228]

Роман, А ваш первый вариант не можно исправить ? И еще раз спасибо за помощь

[Роман]

vasyok228, https://jsfiddle.net/qtza0k3j/