将字符串中的十六进制颜色代码替换为彩色 html 标记

Question

给定一个包含颜色代码的字符串，我想匹配代码并将它们替换为具有相同颜色代码的<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>替换标签中的颜色

Answer 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