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.
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.
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.
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.
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.
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 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 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:str.replace(/#([A-Fa-f0-9]{3}){1,2}/, match => {
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.
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).
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 ;-)
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.
const generateHex2Rgba =
((alpha = 1) => ((hex, red, green, blue, count) => {
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 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.
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
but what is 'count' for?
[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?)]
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.
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.
Sysop: | Keyop |
---|---|
Location: | Huddersfield, West Yorkshire, UK |
Users: | 462 |
Nodes: | 16 (2 / 14) |
Uptime: | 104:41:17 |
Calls: | 9,375 |
Files: | 13,555 |
Messages: | 6,091,004 |