更改字符串颜色的十六进制颜色

Question

所以我看到了一堆这样的帖子，但没有一个为我解决任何问题。

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 string = "hello there #191919 <-- see that thats black"

它会把#191919变成十六进制颜色，而不是像我在stackoverflow上找到的当前代码那样。

Answer 1

您问题中的问题都在正则表达式中。如果您只想用该颜色替换字符串中的十六进制颜色值，则可以删除第二个匹配组(s*[w,]+s*)。

留给你这个:/(#[0-9a-f]{6})/gi。然而值得注意的是，有效的十六进制颜色代码可以有3,6或8个字符，所以你可能还需要满足这一点。下面的示例向您展示了如何做到这一点:

const hexPattern = /(#[0-9a-f]{8}|#[0-9a-f]{6}|#[0-9a-f]{3})/gi
let parseColors = str => str.replace(hexPattern, (s, match) => `<span style="color:${match}">${match}</span>`);
$('div').html((i, t) => parseColors(t));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div>Some 3 character hex values: #C00 and #937</div>
<div>Some 6 character hex values: #545234 and #C8929A</div>
<div>Some 8 character hex values: #A63098FF and #00000066</div>