vasyok228

document.addEventListener('click', function(evt) {
  const dialogTab = evt.target.closest('.dialog__tab');
  if (dialogTab) { // если клик был по табу
    const dialogSelect = evt.target.closest('.dialog__select');
    const dialogRow = evt.target.closest('.dialog__row');
  }
});

[...document.getElementsByClassName("dialog__select")].forEach((item) => {
    item.addEventListener('click', e => {
        e.stopPropagation();
				const trgt =  e.target.classList.contains('dialog__tab') ? e.target.parentNode.closest('.dialog__row')  : e.target ;

        const listItem = Array.from(document.getElementsByClassName("dialog__row")).indexOf(trgt);
        console.log(listItem)
    })
})

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

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



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

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

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