Removing param values from a string

[csdude55]

I create a string from location.search, but I want to remove defined params and their values. Like this:

// location.search = "?cs=dude&h=4&z=3&tester=foo&this=that&start=0&lorem=ipsum";

var saveName =
 location.search.replace(/([?&])(?:h|z|s|start|startview|return_here)=[^&]+&?/gi, "$1")

After I run it, I'm left with:

?cs=dude&z=3&tester=foo&this=that&lorem=ipsum

Which is almost right, but it kept the "z" param in there. Which makes me worry that, in other samples, it'll make other mistakes.

I'm not sure if I'm right on this, but I imagine the /g modifier making it run in passes; so on the first pass it removes h=[^&]+&?, leaving:

?cs=dude&z=3&tester=foo&this=that&start=0&lorem=ipsum

So why doesn't it catch z=[^&]+&? on the second pass?

Worse, if I change it up to:

?cs=dude&z=3&h=4&tester=foo&this=that&start=0&lorem=ipsum

(putting the z param before the h param)

it DOES catch it!

I know that I could split location.search on the & to create an array, delete elements, then rebuild it. But I'd much rather keep it to the one-liner if I can.

Thoughts?

[NickMNS]

You're complicating your life for nothing. See this:
[developer.mozilla.org...]

cue broken record...
It is not supported by IE,
BUT!
There is a polyfill (see bottom of page) I think it is likely well worth the effort to implement it and save yourself some pain.

[lucy24]

([?&])(?:h|z|s|start|startview|return_here)=[^&]+&?

The pattern includes & (or ?) at both ends, so every other one is skipped. Luckily you don’t need the & at the end, since it is immediately preceded by [^&]+
What if a parameter comes through with a null value? Maybe it should be [^&]* instead.

[csdude55]

Haha, Nick, wouldn't life be so much easier if everyone would just forget about IE? I'm hesitant to import core.js just for this, too. I'm already using jQuery, but so far I'm not finding anything similar. I found $.param() that goes the other direction, but fat lot of good that does! LOL

Lucy, the issue I had when I didn't have the trailing & was that I would end up with repeated &&& in the result; eg, this:

?cs=dude&z=3&h=4&tester=foo&this=that&start=0&lorem=ipsum

becomes this:

?cs=dude&&&tester=foo&this=that&&lorem=ipsum

I could double down with TWO regexes, but I'm not sure if that's the best approach:

loc.replace(/([?&])(?:h|z|s|start|startview|return_here)=[^&]*/gi, "$1")
  .replace(/&&+/, '&');

[lucy24]

I would end up with repeated &&& in the result

Yes, it is often easier to adopt a “two steps forward, one step back” approach rather than beat your brains out trying to do it all at once. After the main replacement, do a supplemental
([?&])&+ >> \1
(or $1 or whatever it is) as an entirely separate function.

Can the unwanted parameters ever occur as the very first parameter in the string? If not, the whole thing can probably be simplified a bit.

[csdude55]

Can the unwanted parameters ever occur as the very first parameter in the string?

What I'm actually doing is creating a name for the page that I can use to store data temporarily via localStorage.getItem() or sessionStorage.getItem(). This is an "autosave" feature for my contenteditable, so if they go away and come back then they don't lose what they've typed.

I need the page names to stay the exact same, though, or it won't work. It's not a tragedy if it fails sometimes, but I'd like to keep that to a minimum.

These params are variables that I use and could throw away for this particular feature; the page number for pagination, the page number of the previous page (which would be lost if they leave the page anyway), a param that plugs in a timestamp to limit caching, etc. The internal links always have them in the same order, and I set Google to ignore them to avoid duplicated pages. But if they follow a link shared on social media then there's no guarantee of which order they would be in.

So I guess that I have to assume they could be in any order, just to be safe :-(

At this point, I think I'll just run with the two regexes. It's not ideal, but if Lucy doesn't know a way to make the regex work as a one-liner than I'mma gonna assume that it can't be done! LOL

[NickMNS]

Haha, Nick, wouldn't life be so much easier if everyone would just forget about IE?

It is not a question of being easier. Maintaining IE compatibility comes at a cost, an ever increasing cost, and a cost that is not easily quantified. But this thread is a very basic example, you are spending a lot of time writing code that is standard in JS. In addition to that you then need to maintain this legacy code moving forward.

I gather that IE users probably contribute very little to your bottom line. So you are spending the most on the customer that pay you the least.

A quick check of my traffic (which is not probably a good representation of the "average user") shows that on > 250k sessions less than 0.1% of the users were using IE. That traffic is worth a few pennies if that. Now I realize that you may get more IE traffic, but I can't imagine that all that traffic could be worth more than 1 hour of your time.

[Kendo]

Sounds like a lot of fuss for something that can be simplified.

Why don't you get the request params and simply rebuild the link using only the params that you want to send forward?

[csdude55]

@Kendo, I'm not sure that there's a "simple" way to get params via JavaScript, other than splitting on the & and then splitting on the = in a loop?

I thought about building the link in PHP using $_GET, but I'm really not sure that it would be faster or easier. But at least I could guarantee the order of the params.

[NickMNS]

Here, this should work in IE no regex.

 var exclusions = [ 'h', 'z', 's', 'start', 'startview', 'return_here']
 window.location.search
 .slice(1,-1) // get rid of the leading ?
 .split("&") // split up each param
 .filter( // filter function
  function(param){ // check each param
   return exclusions.indexOf( // against the list of exclusions
    param.split('=')[0] // only use the param without the value.
   ) < 0 
  }) 

[csdude55]

Do you think that would be better / faster / more reliable / greater longevity than a regex?

After Kendo's post, I was thinking along the lines of building it in PHP (typed, not tested):

<?php
$str = '';
foreach ($_GET as $name => $val) {
 if ($key != 'h' &&
   $key != 'z' &&
   $key != 's' &&
   $key != 'start' &&
   $key != 'startview' &&
   $key != 'return_here') {
  if ($str != '') $str .= '&';
  $str .= $name . '=' . $val;
}

echo <<<EOF
<script>
var saveName = $str;
</script>

EOF;

[NickMNS]

Do you think that would be better / faster / more reliable / greater longevity than a regex?

I don't know the whole story about how, why and where the code is used so it is difficult say. I'll give a general answer:
Faster?
I don't know, you could test it, but it is likely a moot point if the script runs only once or twice on the user's device then there is no really benefit to optimizing for speed.

more reliable?
IMO it is, regex is a readability nightmare, in a year or two you wont remember what that code was meant to do. Add to that the fact that the exclusions are passed in as an array, this means that it will be easy to add and remove values when that time comes, you could even hold the array in a DB table so that it can be updated without touching the front-end code.

greater longevity?
I'm not sure what you mean by that but I think my answer above addresses it.

PHP vs JS?
Again it's hard to say without the whole story. But running the script server side will require a little more work from your server, if every user on every request needs this then that might be the correct choice (this likely negligible in the greater scheme of things) , but if this is the result of some user action that only occurs intermittently then you're probably be better off doing it client side. Another PHP approach could be to send it from the server as needed with an AJAX request but then you'll need an additional server endpoint and the user will need to wait for the round trip.

[csdude55]

greater longevity?
I'm not sure what you mean by that but I think my answer above addresses it.

I was thinking along the lines of, continuing to work when I'm dealing with IE 24.4 or whatever.

I don't know the whole story about how, why and where the code is used so it is difficult say.

The system I built is an autosave for the contenteditable. I set the name of localStorage.getItem() and sessionStorage.getItem() to "saveName", so if they leave and come back then the info they've typed will be saved. But that means that I need the page URL to be identical in order for it to work.

If it DOESN'T work then it's not a tragedy or anything, but I'd like to eliminate that possibility as much as possible.

[Kendo]

I'm not sure that there's a "simple" way to get params via JavaScript

Are the params known to you? If so, then just get the ones that you want using REQUEST query.