Así que he visto un montón publicado como este, pero ninguno me resolvió nada.
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>`) }Si tuviera que usar este código, reemplazaría el texto después del color hexadecimal en la cadena con el color, pero me gustaría cambiar la cadena de color hexadecimal real a ese color, como si mi cadena fuera:
let string = "hello there #191919 <-- see that thats black"cambiaría el # 191919 en el color hexadecimal representado allí y no el texto después como lo hace mi código actual que encontré en stackoverflow.
El problema en su pregunta está todo en la expresión regular. Si solo desea reemplazar el valor de color hexadecimal en la cadena con ese color, entonces se puede eliminar el segundo grupo coincidente, (\s*[\w,]+\s*) .
Eso te deja con esto: /(#[0-9a-f]{6})/gi . Sin embargo, vale la pena señalar que un código de color hexadecimal válido puede tener 3, 6 u 8 caracteres, por lo que es posible que también deba tener en cuenta eso. El siguiente ejemplo le muestra cómo hacer esto:
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>