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.

Andrew Poulos

On 6/08/2021 5:22 pm, 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.

This has got me a bit closer

str.replace(/#([A-Fa-f0-9]{3}){1,2}/, convertHex2Rgba('$1'));

but the match doesn't get replaced.

Andrew Poulos

On 6/08/2021 5:41 pm, Andrew Poulos wrote:
> On 6/08/2021 5:22 pm, 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.
>
> This has got me a bit closer
>
> str.replace(/#([A-Fa-f0-9]{3}){1,2}/, convertHex2Rgba('$1'));
>
> but the match doesn't get replaced.

str.replace(/#([A-Fa-f0-9]{3}){1,2}/, match => {
return convertHex2Rgba(match);
});

Nearly there, but I have to do it one match at a time.

Andrew Poulos

On Friday, 6 August 2021 at 09:56:02 UTC+2, Andrew Poulos wrote:
> On 6/08/2021 5:41 pm, Andrew Poulos wrote:
> > On 6/08/2021 5:22 pm, 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.
> >
> > This has got me a bit closer
> >
> > str.replace(/#([A-Fa-f0-9]{3}){1,2}/, convertHex2Rgba('$1'));
> >
> > but the match doesn't get replaced.
> str.replace(/#([A-Fa-f0-9]{3}){1,2}/, match => {
> return convertHex2Rgba(match);
> });

Your capturing group in "([A-Fa-f0-9]{3})" which only matches "#" followed by three hex digits: the "{1,2}" won't change that, it means repeated occurrences of that same pattern.

> Nearly there, but I have to do it one match at a time.

Because you are missing the 'g' flag, for "global" search and substitution. I have come up with this one, which is as simple as i could make it (while staying correct):

/(#[A-Fa-f0-9]{6}|#[A-Fa-f0-9]{3})/gs

Have a look at the docs and the examples:
<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#using_an_inline_function_that_modifies_the_matched_characters>

Also, you can prototype with online tools, e.g. as I have done here: <https://regex101.com/r/BdPOyA/1> (you cannot use a replacer function there, but at least you know your pattern is correct).

HTH,

Julio

On Friday, 6 August 2021 at 10:39:10 UTC+2, Julio Di Egidio wrote:
> On Friday, 6 August 2021 at 09:56:02 UTC+2, Andrew Poulos wrote:
> > On 6/08/2021 5:41 pm, Andrew Poulos wrote:

> > > but the match doesn't get replaced.
> > str.replace(/#([A-Fa-f0-9]{3}){1,2}/, match => {
> > return convertHex2Rgba(match);
> > });
>
> Your capturing group in "([A-Fa-f0-9]{3})" which only matches "#" followed by three hex digits: the "{1,2}" won't change that, it means repeated occurrences of that same pattern.

No, I have misread that, for one thing "#" is out of the match... Never mind, that is why I rather prototype. ;)

Julio

On 2021-08-06, Andrew Poulos <ap_prog@hotmail.com> wrote:
> On 6/08/2021 5:41 pm, Andrew Poulos wrote:
>> On 6/08/2021 5:22 pm, 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.
>>
>> This has got me a bit closer
>>
>> str.replace(/#([A-Fa-f0-9]{3}){1,2}/, convertHex2Rgba('$1'));
>>
>> but the match doesn't get replaced.
>
> str.replace(/#([A-Fa-f0-9]{3}){1,2}/, match => {
> return convertHex2Rgba(match);
> });
>
> Nearly there, but I have to do it one match at a time.

You need the /g flag to tell it to do more than one match.
You could also use the /i flag to be case-insensitive:

str.replace(/#([0-9a-f]{3}){1,2}/gi, match => convertHex2Rgba(match))

You might also want to make sure that you're not seeing *more* than
6 hexadecimal characters:

/#([0-9a-f]{3}){1,2}(?![0-9a-f])/gi

On 06/08/2021 08:22, 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.
>
My personal experience is that you will have written code to do that
long before you discover the magic regexp.

Regexp INCREASES programming time!

> This (one of my many failed attempts):
>
> str.replace(/#[0-9a-fA-F]/, convertHex2Rgba('$1'));
>
> does nothing.
>
> Andrew Poulos

--
The New Left are the people they warned you about.

On 6/08/2021 8:36 pm, Jon Ribbens wrote:
> On 2021-08-06, Andrew Poulos <ap_prog@hotmail.com> wrote:
>> On 6/08/2021 5:41 pm, Andrew Poulos wrote:
>>> On 6/08/2021 5:22 pm, 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.
>>>
>>> This has got me a bit closer
>>>
>>> str.replace(/#([A-Fa-f0-9]{3}){1,2}/, convertHex2Rgba('$1'));
>>>
>>> but the match doesn't get replaced.
>>
>> str.replace(/#([A-Fa-f0-9]{3}){1,2}/, match => {
>> return convertHex2Rgba(match);
>> });
>>
>> Nearly there, but I have to do it one match at a time.
>
> You need the /g flag to tell it to do more than one match.
> You could also use the /i flag to be case-insensitive:
>
> str.replace(/#([0-9a-f]{3}){1,2}/gi, match => convertHex2Rgba(match))
>
> You might also want to make sure that you're not seeing *more* than
> 6 hexadecimal characters:
>
> /#([0-9a-f]{3}){1,2}(?![0-9a-f])/gi

Doesn't the {3}{1,2} mean, match one or two groups of 3 characters? So I
don't need to check for more than 6. If there's more than 6 then it's
either hexa or invalid.

Andrew Poulos

Andrew Poulos

On 6/08/2021 6:39 pm, Julio Di Egidio wrote:
> On Friday, 6 August 2021 at 09:56:02 UTC+2, Andrew Poulos wrote:
>> On 6/08/2021 5:41 pm, Andrew Poulos wrote:
>>> On 6/08/2021 5:22 pm, 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.
>>>
>>> This has got me a bit closer
>>>
>>> str.replace(/#([A-Fa-f0-9]{3}){1,2}/, convertHex2Rgba('$1'));
>>>
>>> but the match doesn't get replaced.
>> str.replace(/#([A-Fa-f0-9]{3}){1,2}/, match => {
>> return convertHex2Rgba(match);
>> });
>
> Your capturing group in "([A-Fa-f0-9]{3})" which only matches "#" followed by three hex digits: the "{1,2}" won't change that, it means repeated occurrences of that same pattern.

Thanks. though my testing seems to sow that it picks up 6 characters.

Rgeexp (like SQL) seems to me to be like a language one has to be born
speaking ;-)

>> Nearly there, but I have to do it one match at a time.
>
> Because you are missing the 'g' flag, for "global" search and substitution. I have come up with this one, which is as simple as i could make it (while staying correct):
>
> /(#[A-Fa-f0-9]{6}|#[A-Fa-f0-9]{3})/gs
>
> Have a look at the docs and the examples:
> <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#using_an_inline_function_that_modifies_the_matched_characters>
>
> Also, you can prototype with online tools, e.g. as I have done here: <https://regex101.com/r/BdPOyA/1> (you cannot use a replacer function there, but at least you know your pattern is correct).

Nice link.

Andrew Poulos

On Saturday, 7 August 2021 at 01:20:07 UTC+2, Andrew Poulos wrote:
> On 6/08/2021 6:39 pm, Julio Di Egidio wrote:

> Rgeexp (like SQL) seems to me to be like a language one has to be born
> speaking ;-)

Don't just give a man a fish... Sure, these constructs can get quite intricated to keep track of, which is why "prototyping" is highly advised for pattern writing and checking, anyway, should you find yourself writing regex all day long, be reassured that you'd soon find yourself (mostly) writing it by heart: or, at least as effectively as you would any other language.

Have fun,

Julio

On 2021-08-06, Andrew Poulos <ap_prog@hotmail.com> wrote:
> On 6/08/2021 8:36 pm, Jon Ribbens wrote:
>>> str.replace(/#([A-Fa-f0-9]{3}){1,2}/, match => {
>>> return convertHex2Rgba(match);
>>> });
>>>
>>> Nearly there, but I have to do it one match at a time.
>>
>> You need the /g flag to tell it to do more than one match.
>> You could also use the /i flag to be case-insensitive:
>>
>> str.replace(/#([0-9a-f]{3}){1,2}/gi, match => convertHex2Rgba(match))
>>
>> You might also want to make sure that you're not seeing *more* than
>> 6 hexadecimal characters:
>>
>> /#([0-9a-f]{3}){1,2}(?![0-9a-f])/gi
>
> Doesn't the {3}{1,2} mean, match one or two groups of 3 characters? So I
> don't need to check for more than 6. If there's more than 6 then it's
> either hexa or invalid.

It depends what you want to do if the string contains something like
'#123456789'. You might say that you don't think that will ever happen,
but personally I prefer to err on the side of caution. Also, bear in
mind if you're just chucking random bits of CSS at this then other CSS
tokens such as strings, selectors, comments, and URLs can contain things
matching your regexp (whether or not you use my more-cautious version).

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})`;
}));

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.

--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

Thomas 'PointedEars' Lahn wrote:

> const generateHex2Rgba =
> ((alpha = 1) => ((hex, red, green, blue, count) => {

I actually recommend that it be written

alpha=1

instead to tell apart the optional argument, and default value of the formal
parameter, from a standard assignment statement.

[Of course, optimizations are possible. For example, having the pattern
outside the callback-generating function is a violation of DRY.]

--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

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

Andrew Poulos wrote:

> On 8/08/2021 5:56 am, Thomas 'PointedEars' Lahn wrote:
>> 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

Thank you.

> but what is 'count' for?

It should have better been named “offset”, and apparently is only an
artifact of code from my memory of more general code that I had written
before.

The formal parameter that follows the formal parameters for the captures
(here: “red”, “green”, and “blue”) would be assigned the offset of the
match, and the formal parameter that followed that would be assigned the
original string value:

<https://262.ecma-international.org/#sec-string.prototype.replace>

[Do you also yearn for the days when the ECMAScript Language Specification
was written in formal language, yes, and it wasn’t clickable, but at
least it was not completely shrouded in abstractions?

I for one cannot see anymore how that describes the (actual) behavior of
the “replace” method in this case. Where is the check for RegExp?
Or are we supposed to use “replaceAll” now?
(Should I just have brunch first instead?)]

I must have misremembered that it this formal parameter would need to be
specified in order for the capture parameters be assigned the correct value,
as I cannot produce by testing, or find in documentation, supporting
evidence now.

Specifically the following historical example indicates that there is no
backwards compatibility issue, and that it can be safely omitted in this
case:

<http://web.archive.org/web/20040929130418/http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/string.html#1194258>

--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

On 2021-08-10, Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote:
><https://262.ecma-international.org/#sec-string.prototype.replace>
>
> [Do you also yearn for the days when the ECMAScript Language Specification
> was written in formal language, yes, and it wasn’t clickable, but at
> least it was not completely shrouded in abstractions?
>
> I for one cannot see anymore how that describes the (actual) behavior of
> the “replace” method in this case. Where is the check for RegExp?
> Or are we supposed to use “replaceAll” now?
> (Should I just have brunch first instead?)]

Step 2:

If searchValue is neither undefined nor null, then
a. Let replacer be ? GetMethod(searchValue, @@replace).
b. If replacer is not undefined, then
i. Return ? Call(replacer, searchValue, « O, replaceValue »).

RegExp ojects have an @@replace method so that takes over the
handling of the call. Interesting to know that you can presumably
therefore create your own classes with @@replace methods to also
affect the String replace method.

The abstractions in the ECMAScript standard aren't *too* bad I think.
The effort required to find out what's happening in any particular
situation doesn't normally seem to end up being overly burdensome.

Jon Ribbens wrote:

> On 2021-08-10, Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote:
>><https://262.ecma-international.org/#sec-string.prototype.replace>
>> [… I for one cannot see anymore how that describes the (actual) behavior
>> of the “replace” method in this case. Where is the check for RegExp?
>> Or are we supposed to use “replaceAll” now?
>
> Step 2:
>
> If searchValue is neither undefined nor null, then
> a. Let replacer be ? GetMethod(searchValue, @@replace).
> b. If replacer is not undefined, then
> i. Return ? Call(replacer, searchValue, « O, replaceValue »).
>
> RegExp ojects have an @@replace method so that takes over the
> handling of the call. Interesting to know that you can presumably
> therefore create your own classes with @@replace methods to also
> affect the String replace method.

There it is:

<https://262.ecma-international.org/#sec-regexp.prototype-@@replace>

Thank you very much ':-)

> The abstractions in the ECMAScript standard aren't *too* bad I think.
> The effort required to find out what's happening in any particular
> situation doesn't normally seem to end up being overly burdensome.

I have been interpreting them since Edition 3 Final was published at
the latest, and in my opinion it gets worse with every new Edition :'-)

PointedEars
--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.