Update uri hash javascript

Question

I find it hard to believe this hasn't been asked but I can find no references anywhere. I need to add a URI hash fragment and update the value if it already is in the hash. I can currently get it to add the hash but my regex doesn't appear to catch if it exists so it adds another instead of updating.

    setQueryString : function() {
        var value = currentPage; 
        var uri = window.location.hash;
        var key = "page";
        var re = new RegExp("([#&])" + key + "=.*#(&|$)", "i");
        var separator = uri.indexOf('#') !== -1 ? "&" : "#";
        if (uri.match(re)) {
            return uri.replace(re, '$1' + key + "=" + value + '$2');
        }
        else {
            return uri + separator + key + "=" + value;
        }
    },

Also if this can be made any cleaner while preserving other url values/hashes that would be great.

example input as requested

Starting uri value: www.example.com#page=1 (or no #page at all)

then on click of "next page" setQueryString gets called so the values would equal:

var value = 2;
var uri = '#page1'
var key = 'page'

So the hopeful output would be '#page2'.

You seem to ask several questions here, one is about getting a regexp to capture a specific pattern, another is about reading and updating the current page fragment (hash) value. I suggest you start by isolating the regexp issue, define various cases and non-cases (string examples) to test and read up on regular expressions in JS. — Tomas Langkaas
– Tomas Langkaas, Commented Sep 6, 2016 at 12:44
@TomasLangkaas I don't think it is really multiple questions when one (the regex) is the explicit reason why the other is not working. I stated I can already update the hash just that the regex doesn't seem to catch if it already exists thus allowing me to update it. The overall hash question is here just to provide context and to elicit better/alternative routes. — DasBeasto
– DasBeasto, Commented Sep 6, 2016 at 13:04
@DasBeasto, it is still unclear for me whether you want help with how to update a fragment from #page=(number) to #page=(number + 1) or how to capture some unspecified regexp pattern (the ampersands confuse me), or both (or something else). If you could clarify a bit more, it would be easier to assist. — Tomas Langkaas
– Tomas Langkaas, Commented Sep 6, 2016 at 13:15
@TomasLangkaas Sorry for the confusion. I want #page=(number) with number being the value var value = currentPage (current page being an int). This value can be any int, in the example it just so happens to go up by one. The regex is there to check if the url already contains #page=1 (or #foo=bar&page=1 which is the reason for the ampersand) so it updates the value instead of making it #page=1&page=2, which is where my current problem lies, I have it updating the hash overall but the regex isn't catching it so I am getting the latter. — DasBeasto
– DasBeasto, Commented Sep 6, 2016 at 13:24

Tomas Langkaas · Accepted Answer · 2016-09-06 21:40:01Z

As to your regex question, testing if the pattern #page=(number) or &page=(number) is present combined with capturing the number, can be done with the regex /[#&]page\=(\d*)/ and the .match(regex) method. Note that = needs escaping in regexes.

If the pattern exists in the string, result will contain an array with the integer (as a string) at result[1]. If the pattern does not exist, result will be null.

//match #page=(integer) or &page=(integer)

var test = "#foo=bar&page=1";
var regex = /[#&]page\=(\d*)/;
var result = test.match(regex);

console.log(result);

If you want to dynamically set the key= to something other than "page", you could build the regex dynamically, like the following (note that backslashes needs escaping in strings, making the code a bit more convoluted):

//dynamically created regex

var test = "#foo=bar&page=1";
var key = "page"
var regex = new RegExp("[#&]" + key + "\\=(\\d*)");
var result = test.match(regex);

console.log(result);

Collectives™ on Stack Overflow

Update uri hash javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related