We Keep Coding

query-string pick method returns the first match from a filter and corrupted URL

I am trying to clean a URL and only keep some parameters that I need in order to parse them
so I was using pick method providing it the url, and the filter which is a regex test method
here I am testing to check if the key in the query parameter matches the regular expression
const groupRegex = new RegExp('^(GRP_)[a-zA-Z0-9/-]','g');
export const parseGroups= (url:string)=>{
let pickedURL = qs.pick(url,(key,value)=>groupRegex.test(key));
console.log(pickedURL);
}
var url=`http://localhost:3000/tat?GRP_Bob[]=SW&GRP_sa[]=QW&GRP_sa[]=AA&projects[]=MP,PM&releases[]=2021.4,2022.1`
parseGroups(url)
for example http://localhost:3000/tat?GRP_Bob[]=SW&GRP_sa[]=QW&GRP_sa[]=AA&projects[]=MP,PM&releases[]=2021.4,2022.1
it should return http://localhost:3000/tat?GRP_Bob=SW&GRP_sa=QW&GRP_sa=AA
yet it only tests for the first request parameter only and logs
http://localhost:3000/tat?GRP_Bob%5B%5D=SW
I am trying to clean the url from any other parameters that doesn't match my regular expression
so I can parse the URL and extract the object
so it can be like this for example
{
GRP_Bob:["SW"],
GRP_sa:["QW","AA"]
}
Instead of having other parameters parsed also which are not necessary. I know I can just parse the url normally, and then loop on the returned query object, and remove any key that doesn't match the regex, but is there anything wrong I am doing in the above snippet?
UPDATE:
I changed the filter function to be (key,value)=>key.startsWith('GRP_'))
export const parseGroups= (url:string)=>{
let pickedURL = qs.pick(url,(key,value)=>key.startsWith('GRP_'));
console.log(pickedURL);
let parsedURL = qs.parseUrl(pickedURL)
console.log(parsedURL.query)
}
var url=`http://localhost:3000/tat?GRP_Bob[]=SW&GRP_sa[]=QW&GRP_sa[]=AA&projects[]=MP,PM&releases[]=2021.4,2022.1`
parseGroups(url)
and the pickedURL logged this http://localhost:3000/tat?GRP_Bob%5B%5D=SW&GRP_sa%5B%5D=QW&GRP_sa%5B%5D=AA which is likely to be correct.
it came out like that
GRP_Bob[]: "SW"
GRP_sa[]: (2) ['QW', 'AA']
So I am confused actually what's going on with the regular expression approach, and why the keys in the second approach have [] in it?

Ah yeh! This one is a rare gotcha and totally unexpected every time I see it. RegExp actually has state. See Why does JavaScript's RegExp maintain state between calls? and Why does Javascript's regex.exec() not always return the same value?.
In your case, you don't need the g flag, so removing that should also fix your problem since that makes the regex stateless.

Regex to define the number of appearances substituted [duplicate]

I'd like to know how to replace a capture group with its uppercase in JavaScript. Here's a simplified version of what I've tried so far that's not working:
> a="foobar"
'foobar'
> a.replace( /(f)/, "$1".toUpperCase() )
'foobar'
> a.replace( /(f)/, String.prototype.toUpperCase.apply("$1") )
'foobar'
Would you explain what's wrong with this code?

You can pass a function to replace.
var r = a.replace(/(f)/, function(v) { return v.toUpperCase(); });
Explanation
a.replace( /(f)/, "$1".toUpperCase())
In this example you pass a string to the replace function. Since you are using the special replace syntax ($N grabs the Nth capture) you are simply giving the same value. The toUpperCase is actually deceiving because you are only making the replace string upper case (Which is somewhat pointless because the $ and one 1 characters have no upper case so the return value will still be "$1").
a.replace( /(f)/, String.prototype.toUpperCase.apply("$1"))
Believe it or not the semantics of this expression are exactly the same.

I know I'm late to the party but here is a shorter method that is more along the lines of your initial attempts.
a.replace('f', String.call.bind(a.toUpperCase));
So where did you go wrong and what is this new voodoo?
Problem 1
As stated before, you were attempting to pass the results of a called method as the second parameter of String.prototype.replace(), when instead you ought to be passing a reference to a function
Solution 1
That's easy enough to solve. Simply removing the parameters and parentheses will give us a reference rather than executing the function.
a.replace('f', String.prototype.toUpperCase.apply)
Problem 2
If you attempt to run the code now you will get an error stating that undefined is not a function and therefore cannot be called. This is because String.prototype.toUpperCase.apply is actually a reference to Function.prototype.apply() via JavaScript's prototypical inheritance. So what we are actually doing looks more like this
a.replace('f', Function.prototype.apply)
Which is obviously not what we have intended. How does it know to run Function.prototype.apply() on String.prototype.toUpperCase()?
Solution 2
Using Function.prototype.bind() we can create a copy of Function.prototype.call with its context specifically set to String.prototype.toUpperCase. We now have the following
a.replace('f', Function.prototype.apply.bind(String.prototype.toUpperCase))
Problem 3
The last issue is that String.prototype.replace() will pass several arguments to its replacement function. However, Function.prototype.apply() expects the second parameter to be an array but instead gets either a string or number (depending on if you use capture groups or not). This would cause an invalid argument list error.
Solution 3
Luckily, we can simply substitute in Function.prototype.call() (which accepts any number of arguments, none of which have type restrictions) for Function.prototype.apply(). We have now arrived at working code!
a.replace(/f/, Function.prototype.call.bind(String.prototype.toUpperCase))
Shedding bytes!
Nobody wants to type prototype a bunch of times. Instead we'll leverage the fact that we have objects that reference the same methods via inheritance. The String constructor, being a function, inherits from Function's prototype. This means that we can substitute in String.call for Function.prototype.call (actually we can use Date.call to save even more bytes but that's less semantic).
We can also leverage our variable 'a' since it's prototype includes a reference to String.prototype.toUpperCase we can swap that out with a.toUpperCase. It is the combination of the 3 solutions above and these byte saving measures that is how we get the code at the top of this post.

Why don't we just look up the definition?
If we write:
a.replace(/(f)/, x => x.toUpperCase())
we might as well just say:
a.replace('f','F')
Worse, I suspect nobody realises that their examples have been working only because they were capturing the whole regex with parentheses. If you look at the definition, the first parameter passed to the replacer function is actually the whole matched pattern and not the pattern you captured with parentheses:
function replacer(match, p1, p2, p3, offset, string)
If you want to use the arrow function notation:
a.replace(/xxx(yyy)zzz/, (match, p1) => p1.toUpperCase()

Old post but it worth to extend #ChaosPandion answer for other use cases with more restricted RegEx. E.g. ensure the (f) or capturing group surround with a specific format /z(f)oo/:
> a="foobazfoobar"
'foobazfoobar'
> a.replace(/z(f)oo/, function($0,$1) {return $0.replace($1, $1.toUpperCase());})
'foobazFoobar'
// Improve the RegEx so `(f)` will only get replaced when it begins with a dot or new line, etc.
I just want to highlight the two parameters of function makes finding a specific format and replacing a capturing group within the format possible.

SOLUTION
a.replace(/(f)/,(m,g)=>g.toUpperCase())
for replace all grup occurrences use /(f)/g regexp. The problem in your code: String.prototype.toUpperCase.apply("$1") and "$1".toUpperCase() gives "$1" (try in console by yourself) - so it not change anything and in fact you call twice a.replace( /(f)/, "$1") (which also change nothing).
let a= "foobar";
let b= a.replace(/(f)/,(m,g)=>g.toUpperCase());
let c= a.replace(/(o)/g,(m,g)=>g.toUpperCase());
console.log("/(f)/ ", b);
console.log("/(o)/g", c);

Given a dictionary (object, in this case, a Map) of property, values, and using .bind() as described at answers
const regex = /([A-z0-9]+)/;
const dictionary = new Map([["hello", 123]]);
let str = "hello";
str = str.replace(regex, dictionary.get.bind(dictionary));
console.log(str);
Using a JavaScript plain object and with a function defined to get return matched property value of the object, or original string if no match is found
const regex = /([A-z0-9]+)/;
const dictionary = {
"hello": 123,
[Symbol("dictionary")](prop) {
return this[prop] || prop
}
};
let str = "hello";
str = str.replace(regex, dictionary[Object.getOwnPropertySymbols(dictionary)[0]].bind(dictionary));
console.log(str);

In the case of string conversion from CamelCase to bash_case (ie: for filenames), use a callback with ternary operator.
The captured group selected with a regexp () in the first (left) replace arg is sent to the second (right) arg that is a callback function.
x and y give the captured string (don't know why 2 times!) and index (the third one) gives the index of the beginning of the captured group in the reference string.
Therefor a ternary operator can be used not to place _ at first occurence.
let str = 'MyStringName';
str = str.replace(/([^a-z0-9])/g, (x,y,index) => {
return index != 0 ? '_' + x.toLowerCase() : x.toLowerCase();
});
console.log(str);

How can I perform a global replace on a variable?

I have a basic replace function, but I need it to perform a global replace, as it seems to be stopping on the first instance. I do not want to do it with a Regex. Applying the global attribute seems easy enough in most examples, but I am passing in a variable as the value to be replaced, and /g is having no impact. What am I doing wrong? Here is the example without the /g:
test string
"Why is my ^%friend so ^%? Maybe I need a ^!% one, abrand^!% one"
Simple replace function
function translate(oddStr) {
var tagDictionary = {};
tagDictionary['^%'] = 'odd';
tagDictionary['^!%'] = 'new';
Object.keys(tagDictionary).forEach( function (tag) {
oddStr = oddStr.replace(tag, tagDictionary[tag]);
});
return oddStr;
};
This function returns the first instance of each replaced, as expected. How can I apply /g to the tag variable in the forEach?

Use a split-join combo like this:
oddStr = oddStr.split(tag).join(tagDictionary[tag]);

"Why is my ^% friend so ^%? Maybe I need a ^!% one, abrand ^!% one".replace(/\^%/g, 'odd').replace(/\^!%/g, 'new')
"Why is my odd friend so odd? Maybe I need a new one, abrand new one"
If you need to create the regular expression from string, you can use RegExp constructor: new RegExp('\\^%', 'g').
If you don't have control over the tag-dictionary and it is coming from some external resource, then you will have to properly escape the tags.
Instead of using adhoc symbols for templating you should ideally use something like lodash.template

You need to escape your regex special characters (^=Start of string)
function translate(oddStr) {
var tagDictionary = {
'\\^%' : "odd",
'\\^!%' : 'new'
};
Object.keys(tagDictionary).forEach( function (tag) {
var r = new RegExp(tag, "g");
oddStr = oddStr.replace(r, tagDictionary[tag]);
});
return oddStr;
};
console.log(translate("Why is my ^%friend so ^%? Maybe I need a ^!% one, a brand ^!% one"));

preg_match_all to javascript

Can anyone help converting this PHP regex pattern to a JavaScript compatible one?
PHP
preg_match_all('/(?ims)([a-z0-9\s\.\:#_\-#,]+)\{([^\}]*)\}/', $data, $matches);
Javascript
matches=data.match(/(?ims)([a-z0-9\s\.\:#_\-#,]+)\{([^\}]*)\}/);
Thanks

To mimic the PHP output, you need to look at more than only the regular expression. For a single match, the JavaScript match method will do the trick, but for multiple matches it will no longer return the captured groups. In fact, there is no out-of-the-box statement in JavaScript that is equivalent to preg_match_all.
The method that comes closest is regex.exec, being the only method that can both return the captured groups and multiple matches. But it does not return all the matches in one go. Instead you need to iterate over them, for instance like this:
for (matches = []; result = regex.exec(data); matches.push(result));
Now the regular expression needs also some adjustments:
In Javascript the modifiers (ims) cannot be specified like you have it, they must be specified at the end, after the closing slash. Note that in PHP you can do the same.
Secondly, Javascript has no support for the s modifier. But in your case this is not a problem, as your regular expression does not rely on it -- you would get the same results without that modifier.
In order for the exec method to return multiple matches, the regular expression must use the g modifier, which is not needed nor allowed in PHP's preg_match_all -- the _all in the method name already takes care of that.
So, in JavaScript, the regular expression will be defined like this:
var regex = /([a-z0-9\s\.\:#_\-#,]+)\{([^\}]*)\}/gim;
Finally, the matches are returned in a different format than in PHP. Let's say the data is "Alpha{78} Beta{333}", then PHP will return:
[["Alpha{78}"," Beta{333}"],["Alpha"," Beta"],["78","333"]]
But the above JavaScript code returns that data in a transposed way (rows and columns are swapped):
[["Alpha{78}","Alpha","78"],[" Beta{333}"," Beta","333"]]
So, if you also want that to be the same, you need to transpose that array. Here is a generic transpose function you could use for that:
function transpose(a) {
return a[0].map(function (val, c) {
return a.map(function (r) {
return r[c];
});
});
}
So putting it all together, this will do the job:
function transpose(a) {
return a[0].map(function (val, c) {
return a.map(function (r) {
return r[c];
});
});
}
// test data:
var data = "Alpha{78} Beta{333}";
var regex = /([a-z0-9\s\.\:#_\-#,]+)\{([^\}]*)\}/gim;
// collect all matches in array
for (var matches = []; result = regex.exec(data); matches.push(result));
// reorganise the array to mimic PHP output:
matches = transpose(matches);
console.log(JSON.stringify(matches));
// for this snippet only:
document.write(JSON.stringify(matches));
Output:
[["Alpha{78}"," Beta{333}"],["Alpha"," Beta"],["78","333"]]

replacing curley braces with new text

il8n = {
'en-us':{
hello:"Hello Everyone",
goodbye:"See ya later",
welcome:"Hello how are you?",
design:"Kandi Designs"
}
};
function translate(){
var userLang = navigator.language || navigator.userLanguage;
var body = document.body || document.getElementsByTagName('body')[0];
var html = body.innerHTML;
body.innerHTML = body.innerHTML.replace(/({T_(.*?)})/g, il8n[userLang.toLowerCase()][$1.replace(/{T_|},'').toLowerCase()]);
}
translate();
Basically what I want to do is get rid of {T_Hello} to Hello Everyone but since I suck at regex my capture groups and using $1 I can't get this correctly. Can anyone assist in this a wee bit?

You have the right idea. $1, however, is not a variable where you use it. Change the second argument to replace to this:
function (match, $1) {
return il8n[userLang.toLowerCase()][$1.toLowerCase()];
}
replace can take a function as an argument. Then, shorten the capture group in the regex to this:
/{T_(.*?)}/g
This saves you some unnecessary string processing inside the replace function. On an unrelated note, regarding performance, you might want the server to send the appropriate il8n object based on the Accept-Language header, or, even better, do the insertions itself instead of relying on flaky and slow client-side code (making it cacheable).

Based on your il8n object keys you could do this to check for T_ followed by any uppercase letters.
/T_([A-Z]+)/
You could add lowercase or numbers to it too:
/T_([A-Za-z0-9]+)/

This should work:
body.innerHTML = body.innerHTML.replace(
/({T_(.*?)})/g,
function (s) { return il8n [userLang.toLowerCase()] [s.replace(/{T_|}/g,'').toLowerCase()]; }
);
The second argument of replace() can be a string or a function that takes so many arguments as there are ()-groups in the regular expression, which in your case is one.
Indeed, if you write
s.replace (/a/g, 'b')
then, obviously, replace() receives two strings. However, if you write
s.replace (/a/g, f(x))
then again, replace() receives two strings, the second being the string returned from f(x), so if f(x) returns 'b', then the two expressions above are equivalent. Since f(x) is executed before replace() has a chance to see it, it cannot use the special variables like $1, since at the point of call they are not defined.
If you want the code to be executed by replace(), then it should be executable code:
replace (/a/g, function (x) { return ' [' + x + '] found! '; } )
so that at the point of call, the function object is formed and this function is called inside replace with the argument $1 each time (note the global modifier g in the regex).
Note that your code will only work if placed below the text or called onload(), not above the text:
<body>
{T_hello} reader!
<script>
your code
</script>
<body>
works, but
<body>
<script>
your code
</script>
{T_hello} reader!
<body>
doesn't, because when it is executed, there is nothing still in <body>. The best place to call it is in <body onload='translate()'>.
I also corrected a typo in your code: s.replace(/{T_|} should be s.replace(/{T_|}/.
And another error in your code is: s.replace(/{T_|}/ should be s.replace(/{T_|}/g, because it is supposed to make two replacements, not one.