Поиск цвета в строке JS

Question

Подскажите, как сделать так, чтобы допустим из строки var text = "{FFFFFF}Привет, моё имя: {FFCC00}JavaScript!{FFFFFF}А твоё?"; Искались цвета и получалось строка var text = "<span style="color: #ffffff;>Привет, моё имя: <span style="color: #ffcc00">JavaScript!<span style="color: #ffffff">А твоё?;

Пробовал через replace и цикл, не получается, меняется все цвета только на последний найденный текст.

Answer 1

Как написали выше, проблема заключается в том, что непонятно где закрывать тег, я закрываю все теги после, но это порождает излишнюю вложенность

const input = "{000000}Привет, моё имя: {FFCC00}JavaScript! {0000FF}А твоё?"
let closes = 0
let result = input.replaceAll(/{(?<color>[\da-fA-F]{2}[\da-fA-F]{2}[\da-fA-F]{2})}/gi, (entry, color) => {
  closes++
  return `<span style="color: #${color};">`
})
for (let i = 0; i < closes; i++) result += '</span>'
console.log(result)
document.body.innerHTML = result

UPD (Решение проблемы)

const input = "<000000>Чёрный, <FF0000>Красный</FF0000>, <00ff00>Зелёный <ffaa00>Оранжевый вложен</ffaa00></00FF00>, <0000FF>Синий</0000FF> </000000>"
const regexp = /<(?<color>[\da-fA-F]{6})>(.+)<\/\k<color>>/gi
let result = input
while(regexp.test(result))
  result = result.replaceAll(regexp, (entry,  color, content) => `<span style="color: #${color};">${content}</span>`)
console.log(result)
document.body.innerHTML = result

Answer 2

Я согласен с @АлексейШиманский, но рискну предположить, что вы хотели такой результат:

const text = "{00f}Привет, моё имя: {00FF00}JavaScript! {f00}А твоё?";

const replacedColors = text.replace(/\{(\w{3}|\w{6})\}[^{}]*/gi, (textWithColor) => {
  return textWithColor.replace(/{\w*\}/, (colorInBrackets) => {
    return `<span style="color: #${colorInBrackets.slice(1, -1).toLowerCase()};">`
  }) + '</span>';
});

console.log(replacedColors);

document.body.innerHTML = replacedColors;

У меня правда используется регулярное выражение 2 раза, что может сказаться на производительности, но увы я не силён в регулярных выражения. Может кто-то на основе того что я написал предложит лучшее решение

БЛОГ НА HUSL

Поиск цвета в строке JS

Ответы (2 шт):

UPD (Решение проблемы)