Parse url with arrays in javascript

Question

I have input url from GET method in the following format

rec_test.html?emotion=Happy&myInputs_1%5B%5D=things&myInputs_1%5B%5D=are&myInputs_1%5B%5D=working&myInputs_2%5B%5D=i&myInputs_2%5B%5D=hope&myInputs_3%5B%5D=so

I am trying to parse it with the following code:

function getParameterByName(name){
                    var url = window.location.search;
                    name = name.replace(/[\[\]]/g, "\\$&");
                    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)");
                    results = regex.exec(url);
                    if (!results) return null;
                    if (!results[2]) return '';
                    return decodeURIComponent(results[2].replace(/\+/g, " "));
                }

but when I pass myInputs_1 to the function, it returns null.

I somehow plan on generating the output in the format:

myInput_1 = ['things', 'are', 'working']
myInput_2 = ['i', 'hope']
myInput_3 = ['so']

but I am not able to extract the individual values. Is there a way to achieve the desired output?

edit_1

I learned that %5B is [ and %5D is ], but even if I pass myInput_1[] as parameter to the function, it still returns null, I have no idea why

Jean-Alphonse · Accepted Answer · 2017-10-11 13:26:44Z

2

You could use the URLSearchParams object of a URL instance:

s = "http://example.com/rec_test.html?emotion=Happy&myInputs_1%5B%5D=things&myInputs_1%5B%5D=are&myInputs_1%5B%5D=working&myInputs_2%5B%5D=i&myInputs_2%5B%5D=hope&myInputs_3%5B%5D=so"

url = new URL(s)
searchParams = url.searchParams

console.log(searchParams.getAll("myInputs_1[]"))
// ["things", "are", "working"]

answered Oct 11, 2017 at 13:26

Jean-Alphonse

8165 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adorn Over a year ago

your answer is really concise, but I have a browser compatibility requirement. In future, if possible, people should use this.

davidchoo12 · Accepted Answer · 2017-10-11 13:53:29Z

1

You need to do a while loop when using .exec to find successive matches. Also, I simplified your regex.

function getParameterByName(name){
    var url = decodeURIComponent(window.location.search);
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "=([^&#]*)", 'g');
    var match, result = [];
    while ((match = regex.exec(url)) !== null)
        result.push(match[1]);
    return result;
}

I suggest you go with Jean's answer unless you browser compatibility matters to you.

answered Oct 11, 2017 at 13:53

davidchoo12

1,33115 silver badges27 bronze badges

Comments

chakradhar kasturi · Accepted Answer · 2017-10-11 13:38:43Z

0

Non regex way

function getParamByName(name){
    var value = []
    paramsArray = decodeURIComponent(window.location.search).split("?")[1].split("&")
    paramsArray.forEach(function(d){
        if(d.indexOf(name) > -1){
            value.push(d.split("=")[1])
        }
    })
    return value;
}

answered Oct 11, 2017 at 13:38

chakradhar kasturi

6899 silver badges20 bronze badges

Collectives™ on Stack Overflow

Parse url with arrays in javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related