Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #40339

Re: Help with regexp

Show all headers | View raw

On 8/08/2021 5:56 am, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
> 
>> I have a string that looks like this
>>
>> let str = 'linear-gradient(90deg, #ff0000 50%, #00ff00 100%)"
>>
>> I need to convert the hex values to rgba so I've written a function
>>
>> const convertHex2Rgba = (hex, alpha = 1) => {
>>     ...
>>     return `rgba(${r},${g},${b},${alpha})`;
>> };
>>
>> I'm stuck trying to write a regexp that replaces the hex values (that
>> may have either 3 or 6 characters - plus the #) with the value returned
>> from convertHex2Rgba.
>>
>> This (one of my many failed attempts):
>>
>> str.replace(/#[0-9a-fA-F]/, convertHex2Rgba('$1'));
>>
>> does nothing.
> 
> Of course not.
> 
>    1. You are not using the return value of the “replace” method.
> 
>    2. You are not passing your function a proper value for the formal
>       parameter “hex”, but the string value '$1' instead.
>       ('$1' is only expanded with the first captured subpattern if
>        the entire argument is a string value.)
> 
>    3. You are not matching that which you intend to match.
>       (You are only matching a single hexadecimal digit.)
> 
> This should work:
> 
>    const generateHex2Rgba =
>      ((alpha = 1) => ((hex, red, green, blue, count) => {
>        let [r, g, b] = [red, green, blue].map(s => parseInt(s, 16));
>        return `rgba(${r},${g},${b},${alpha})`;
>      }));

Nice and concise code but what is 'count' for?

>    str = str.replace(
>      /#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/gi,
>      generateHex2Rgba()
>    );
> 
> Why you want to do that remains a mystery, though.

The hex values are from gradient backgrounds that users are grabbing 
from online CSS generators (most, if not all, of them return colours in 
hex). The backgrounds need to animate so I'm using anime.js to "play" 
with the various colour and alpha values. This is easier for me with 
rgba than (hex or hexa).

Andrew Poulos

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Help with regexp Andrew Poulos <ap_prog@hotmail.com> - 2021-08-06 17:22 +1000
  Re: Help with regexp Andrew Poulos <ap_prog@hotmail.com> - 2021-08-06 17:41 +1000
    Re: Help with regexp Andrew Poulos <ap_prog@hotmail.com> - 2021-08-06 17:55 +1000
      Re: Help with regexp Julio Di Egidio <julio@diegidio.name> - 2021-08-06 01:39 -0700
        Re: Help with regexp Julio Di Egidio <julio@diegidio.name> - 2021-08-06 01:53 -0700
        Re: Help with regexp Andrew Poulos <ap_prog@hotmail.com> - 2021-08-07 09:19 +1000
          Re: Help with regexp Julio Di Egidio <julio@diegidio.name> - 2021-08-06 17:26 -0700
      Re: Help with regexp Jon Ribbens <jon+usenet@unequivocal.eu> - 2021-08-06 10:36 +0000
        Re: Help with regexp Andrew Poulos <ap_prog@hotmail.com> - 2021-08-07 09:17 +1000
          Re: Help with regexp Jon Ribbens <jon+usenet@unequivocal.eu> - 2021-08-07 18:57 +0000
  Re: Help with regexp The Natural Philosopher <tnp@invalid.invalid> - 2021-08-06 19:10 +0100
  Re: Help with regexp Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2021-08-07 21:56 +0200
    Re: Help with regexp Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2021-08-07 22:02 +0200
    Re: Help with regexp Andrew Poulos <ap_prog@hotmail.com> - 2021-08-09 13:13 +1000
      Re: Help with regexp Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2021-08-10 13:45 +0200
        Re: Help with regexp Jon Ribbens <jon+usenet@unequivocal.eu> - 2021-08-10 12:28 +0000
          Re: Help with regexp Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2021-08-11 16:03 +0200

csiph-web