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

Question

所以我看到了很多这样的帖子，但是 none 为我解决了任何问题。


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 更改为那里表示的十六进制颜色，而不是像我在 Whosebug 上找到的当前代码那样更改之后的文本。

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>

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

Changing hex color from string's color

html

javascript

jquery