Блог

Главная - Вопросы по программированию - Замена шестнадцатеричного цветового кода в строке на цветной HTML-тег

Замена шестнадцатеричного цветового кода в строке на цветной HTML-тег

#javascript #regex

#javascript #регулярное выражение

Вопрос:

Учитывая строку, которая включает цветовые коды, я хочу сопоставить коды и заменить их на <span style='color: code'> с тем же цветовым кодом, чтобы получить цветную HTML-строку.

это то, что я уже пробовал:

 function parseColors(str) {
  let reg = /#[0-9a-f]{6}/gi
  let arr = str.match(reg)
  if (arr) {
    arr.forEach(m => {
      str = str.replace(m, `<span style='color: ${m}'>`)
      str  = "</span>"
    })
  }
  return str
}

console.log(parseColors(
  "#abcdefthe, #ff0000 red #abcdef fox"
))
// prints:
// <span style='color: <span style='color: #abcdef'>'>the, <span style='color: #ff0000'> red #abcdef fox</span></span></span>

проблема в том, что он дважды заменяет один и тот же цвет, поэтому сначала #abcdef будет <span> тегом, но затем он заменяет цвет в теге другим <span>

Комментарии:

1. Ваше регулярное выражение совпадает дважды или код повторяется дважды? Другими словами, как arr выглядит?

2. (1) Вы добавляете "</span>" ко всей строке вместо того, чтобы вставлять ее после совпадения. (2) (Лучше.) У match есть еще одно свойство: index которое сообщает вам местоположение соответствия. Вы могли бы использовать это для создания другой строки с заменами.

Ответ №1:

Не лучшее решение, но оно соответствующим образом обрабатывает добавление конечного тега.

 const HexPattern = /(#[0-9a-f]{6})(s*[w,] s*)/gi

function parseColors(str) {
  return str.replace(HexPattern, (s, g0, g1) => `<span style="color:${g0}">${g1}</span>`)
}

let html = parseColors("#abcdefthe, #ff0000 red #abcdef fox")

console.log(html)
document.body.innerHTML = html