Develop Reference

JS React: replacing regex with component in a string

Given a string with the format:
'This is a string with some ::FaIconUpload:: icons in it as ::FaIconDownload:: these two.'
I'd like to split it using a RegEx and replace the coincidences with some React components. The string would have the type of component (FaIcon) and a props in it such as the name of the icon (Upload).
The objective with this is to be able to use React components within translated strings, and the expected return value would be something like:
[
'This is a string with some ',
<FaIcon iconName="Upload" />,
' in it as ',
<FaIcon iconName="Download" />,
' these two.'
]
The method
Currently, I've got a method which returns either a string or an array. This is compatible with React render methods, since if we return an array it will be capable of rendering any components on that array.
As I'll use it to translate some strings, I've created this custom hook:
const useCustomTranslation = () => {
const { t } = useTranslation();
const tlt = (...args) => {
// const str = t(...args);
const testStr =
'This is a string with some ::FaIconUpload:: icons in it as ::FaIconDownload:: these two.';
const reg = /(?<=::FaIcon)(.*?)(?=::)/g;
const preStrAr = testStr.split(reg);
console.log(preStrAr);
};
return { tlt };
};
The problem
Currently, this method is logging this:
[
"This is a string with some ::FaIcon",
"Upload",
":: icons in it as ::FaIcon",
"Download",
":: these two."
]
As you can see, it's not including the ::FaIcon and the final ::, as I haven't been able to find the right Regex to do so. But even if I got to that point, I feel like then I should have to re-iterate through the array to replace the strings with the right component, again using Regex to see if the array item matches the right format.
I find this somehow overcomplicated, and I think there has to be a much cleaner and easy way to get it (correct me if maybe I'm wrong and this is the only way).
Is there any way where I can split a string using a Regex, using part of the matched group to replace the string by another content using that matched string?

Perhaps you meant to do this?
/::FaIcon(.*?)::/ without the look
const str = `This is a string with some ::FaIconUpload:: icons in it as ::FaIconDownload:: these two.`
const newText = str.replace(/::FaIcon(.*?)::/g,function(_,match) {
return `<FaIcon iconName="${match}" />`
})
console.log(newText)
To make an array you can do
const str = `This is a string with some ::FaIconUpload:: icons in it as ::FaIconDownload:: these two.`
const newText = str.replace(/\s?::FaIcon(.*?)::\s?/g,function(_,match) {
return `::<FaIcon iconName="${match}" />::`
}).split("::")
console.log(newText)

Finally, I've made it using (sadly) the re-iteration method, as it's the only way I can see it would work. Thanks to #mplungjan for his first answer, which gave me the hints to get it working:
export const replaceIconInStr = (str) => {
// Matches the whole icon component pattern
const regComponent = /(::FaIcon.*?::)/g;
// Matches just the component prop we need
const regIconName = /::FaIcon(.*?)::/g;
// Split the string by the component pattern
const splittedStr = str.split(regComponent);
// If there are any matches
if (splittedStr.length) {
// Match the elements in the array and get the prop to replace it by the real component
return splittedStr.map((el) => {
const matched = regIconName.exec(el)?.[1];
if (matched) {
return <FaIcon iconName={matched} />;
}
return el;
});
}
// If there is no pattern matching, return the original string
return str;
};

Javascript node.js regex url matching

So pretty much I have an inputted URL and I am trying to see if it starts with any of the following URLs:
"https://open.spotify.com/playlist/",
"https://www.youtube.com/watch",
"https://youtu.be/",
"https://open.spotify.com/track/",
"https://youtube.com/playlist",
So how it should work is if I were to input "https://open.spotify.com/track/1vrd6UOGamcKNGnSHJQlSt?si=61680eaef0ac419e" it would return that it matched "https://open.spotify.com/track/".
If I were to input "https://youtu.be/5qap5aO4i9A" it would return "https://youtu.be/".
So far I have
url.match(/^https?:\/\/(www.youtube.com|youtube.com)\/playlist(.*)$/)
url.match(/^(https?:\/\/)?(www\.)?(m\.)?(youtube\.com|youtu\.?be)\/.+$/gi)
but it's not taking me down the right path and I am extremely lost. Thank you!

Since you need to get the specific prefix that matched, checking with startsWith would probably be simpler than using a regular expression:
const prefixes = [
"https://open.spotify.com/playlist/",
"https://www.youtube.com/watch",
"https://youtu.be/",
"https://open.spotify.com/track/",
"https://youtube.com/playlist",
];
function getPrefix(url) {
const urlLower = url.toLowerCase();
return prefixes.find((prefix) => urlLower.startsWith(prefix));
}
getPrefix("https://open.spotify.com/track/1vrd6UOGamcKNGnSHJQlSt?si=61680eaef0ac419e"); // "https://open.spotify.com/track/"
getPrefix("https://youtu.be/5qap5aO4i9A"); // "https://youtu.be/"

You should not use regex for that purpose you are using. Since you have all the list of urls you have to match against. You just have to check with the url you receive.
const list = ["https://open.spotify.com/playlist/",
"https://www.youtube.com/watch",
"https://youtu.be/",
"https://open.spotify.com/track/",
"https://youtube.com/playlist",
];
function getMeMatchedURL(url) {
const matchedURL = list.filter(item => {
return url.substring(0, item.length) === item;
});
console.log(matchedURL);
}
getMeMatchedURL("https://open.spotify.com/track/1vrd6UOGamcKNGnSHJQlSt?si=61680eaef0ac419e");
getMeMatchedURL("https://youtu.be/5qap5aO4i9A");
From this you will get the url it matches, if it return empty array then it didn't match any of the list.

Map Method in JavaScript

I was asked to define a function that would accept an array of strings, and use the map method to create another array with the trimmed strings.
My output trimmed the strings, however, it still said it was wrong. Can anyone tell me why?
function cleanNames(){
let cleanNames = [" Eric", " Nanci", " Luna"];
let trimmedNames = cleanNames.map(function (elem) {
console.log(elem.trim());
});
}

You need to return the trimmed string in the map function.
array.map(function(ele){
return ele.trim();
})

You've almost got it, but you're missing two return statements. Since this sounds like homework, I'll let you figure out where.

You can try something like:
const cleanNames = () => {
/* you declare your variables */
const names = [" Eric", " Nanci", " Luna"];
/* You map your array */
names.map((el) => {
/* You access each index and cut the blank spaces with the Trim () method */
console.log(el.trim())
})
}
/* You call your function */
cleanNames()

This will work to you. The problem is because you are not expecting an array and you are not returning the new array with the new array of trimmed strings
function trimFunc(stringArray) {
return stringArray.map(string => string.trim());
}

try the below solution:
function cleanNames(arr) {
return arr.map(i => i.trim());
}
console.log(cleanNames(['njue', ' kamau', ' kimani','kalonzo']));

Regex using array.filter in javascript

I'm trying to use a regular expression to filter the name column in a csv file that has be put into an object array. Everything works fine if I type the exact value.
values I want "king" to match are below:
kingkong, king kong, king-kong, king_kong, king11, kongking, kong-king, kong_king, kong king, 11king
I've tried using filter and find methods but I want to use filter to return multiple values if they exist. I have tried the following regex but can't figure out the proper sytax if it is even correct.
const CSVToJSON = require('csvtojson');
const user = "king";
CSVToJSON().fromFile("./locations.csv").then(source => {
var found = source.filter(function(v, i){
return ((v["name"]== /\bking.*/g));
})

You can use the following approach.
const CSVToJSON = require('csvtojson');
CSVToJSON().fromFile("./locations.csv").then(source => {
var found = source.filter(function(v, i){
return ((v["name"].match(/king/g)));
});

return statement could be something like
return ((/king/g).test(v["name"]));
OR
return ((v["name"].match(/king/g)));
Both should work

However, your sample patterns show that king might stand either at the beginning or at the end of the target (bot can't have both prefix and suffix). If I am right, that means you don't need regex for that.
const CSVToJSON = require('csvtojson');
const user = "king";
CSVToJSON().fromFile("./locations.csv").then(source => {
var found = source.filter((v, i) => v.startsWith(user) || v.endsWith(user))
/*rest of the code */
});
If king can stand anywhere, you can simply use includes instead.

This is what worked, I'm totally new to JavaScript:
const user = args;
var regex = new RegExp(user, "g");
CSVToJSON().fromFile("./locations.csv").then(source => {
var found = source.filter(function(v, i){
return ((v["name"].match(regex)));
})

What's the best way to delete specific characters in a JavaScript array?

Currently, I have a huge JavaScript array where each element is like this:
[{"open":235.86,
"high":247.13,
"low":231.5,
"close":244.1,
"volume":55025735,
"date":"2019-05-01T21:00:00.000Z"}
...
I need to remove everything except the price after high. What is the most efficient way I can do this?
I've tried popping the individual elements, but I can't help but feel as if there is a more efficient/easier way to do this.
So hopefully the ending array would just be [235.86].

The below code should work. It's efficient enough :D
for (i in arrayName){
// Loops through array
delete arrayName[i].high
delete arrayName[i].low
delete arrayName[i].close
delete arrayName[i].volume
delete arrayName[i].date
// Deletes unwanted properties
}
console.log(arrayName)
// Print output

One potential solution would be to map the array to a new array like so:
const yourArray = [
{"open":235.86, "high":247.13, "low":231.5, "close":244.1, "volume":55025735},
{"open":257.52, "high":234.53, "low":220.2, "close":274.1, "volume":23534060},
]
const mappedArray = yourArray.map(el => el.open);
// mappedArray = [235.86, 257.52]
Check out the MDN documentation for the map method, Array.prototype.map()
Note: The above example uses ECMAScript 6 arrow functions and implicit returns. It is functionally equivalent to:
const yourArray = [
{"open":235.86, "high":247.13, "low":231.5, "close":244.1, "volume":55025735},
{"open":257.52, "high":234.53, "low":220.2, "close":274.1, "volume":23534060},
]
const mappedArray = yourArray.map(function(el){
return el.open
});

You can use reduce for this scenario. Example
var temp = [{"open":235.86, "high":247.13, "low":231.5, "close":244.1, "volume":55025735, "date":"2019-05-01T21:00:00.000Z"}];
var highValArray = temp.reduce((arr, t) => {
return arr.concat(t['high']);
}, []);
You can learn more about reduce function at the MDN website.

This should work:
your_array.map((item) => {
return item.high
})