javascript正则表达式解析数组语法字符串几乎可以正常工作

Question

So I'm parsing strings (from a URL) that have an array-like syntax, such as:

variable[foo]
variable[foo][bar]

I need EACH of the indexes (in square brackets) to be it's own capturing group, and I need it to work with one OR MORE indexes... My regex ALMOST works, but only captures the FINAL index, not the proceeding ones, so works perfect with one index.

here you can see my best attempt, and when you hover over the second example, you'll see that group_4 becomes captured group #2 and the rest are lost. I need the captured groups to match the example names.

Just for good measure, here you can see my whole solution for parsing the regex results into actual javascript objects.

getUrlParams: function() {
        let query = decodeURIComponent(window.location.search);

        let paramRegex = /[&?]([\w[\]\-%]+)=([\w[\]\-%/,\s]+)(?=&|$)/igm;
        let arrayRegex = /([\w]+)(?:(?:\[|%5B)([\w]+)(?:]|%5D))+/igm;

        let params = {};

        let match = paramRegex.exec(query);
        while (match !== null) {
            if (match && match[1]) {

                let array = arrayRegex.exec(match[1]);
                while(array !== null) {
                    if (array && array[1] && array[2]) {
                        console.log("ARRAY: ", array);
                         let deepParam = {};
                         deepParam[array[2]] = match[2];
                         if (array[1] in params) {
                             $.extend(params[array[1]], deepParam);
                         } else {
                             params[array[1]] = deepParam;
                         }
                    } else {
                        params[match[1]] = match[2];
                    }

                    array = arrayRegex.exec(match[1]);
                }
            }
            match = paramRegex.exec(query);
        }
        return params;
    },

This code works great with only one index, but once the regex captures multiple indexes, this code will have to handle it too.

Any help is much appreciated.

UPDATE:

Here is my final function solution, based on bowheart's very elegant code.

    getUrlParams: function() {
    let query = decodeURIComponent(window.location.search);
    let paramRegex = /[&?]([\w[\]\-%]+)=([\w[\]\-%/,\s]+)(?=&|$)/igm;

    let params = {};

    let match = paramRegex.exec(query);
    while (match !== null) {
        if (match && match[1] && match[2]) {
            let key = match[1];
            let val = match[2];
            let arrayKeys = key.split(/\[|]/g).filter(node => node);
            populateObject(params, arrayKeys, val);

        }
        match = paramRegex.exec(query);
    }

    return params;

    function populateObject(obj, keys, val) {
        if (keys.length === 1) return obj[keys[0]] = (isNaN(+val) ? val : +val);
        let nextKey = keys.shift();
        if (!obj[nextKey]) obj[nextKey] = isNaN(+keys[0]) ? {} : [];

        populateObject(obj[nextKey], keys, val);
    }
},

Answer 1

Try this regex:

(?:[\?|\&]([\w]+))|((?:\[|%5B)(\w+)(?:]|%5D))

It captures each group value as an independent match

Answer 2

What on earth gave you the idea to accomplish all this with two massive regular expressions? Just...Don't do that. You'll probably live longer. You will need regex to some degree, but always keep it as short as possible.

Here's a solution, if you're interested. You'll notice it's shorter, much easier to read, and accomplishes all the requirements:

 // Recursively populates nested objects/arrays. function populateObj(obj, keys, val) { if (keys.length === 1) return obj[keys[0]] = val let nextKey = keys.shift() if (!obj[nextKey]) obj[nextKey] = isNaN(+keys[0]) ? {} : [] populateObj(obj[nextKey], keys, val) } let params = {} let search = '?filters[name]=sa&filters[group_2][group_3][group_4]=4&order_bys[0][field]=name&order_bys=desc' search.slice(1).split('&').forEach(pair => { let [key, val] = pair.split('=') key = key.split(/\\[|]/g).filter(node => node) populateObj(params, key, val) }) // Just for display: document.body.innerHTML = JSON.stringify(params, null, ' &nbsp;').replace(/\\n/g, '<br>') 

The basic algorithm is:

• Split the GET params on '&' , then split each param into a key-val pair on '=' .

• Regex out any square brackets in the keys to get all nodes for nested arrays/objects.

• Recursively traverse an object, creating child objects/arrays when necessary, and assign the given value to the last node.

  • Create an array if the next key is numeric. Otherwise, create an object.

(Note from your regexr snippet that order_bys[0][field]=name and order_bys=desc params are incompatible as one indicates that order_bys is a zero-indexed array and the other that it's a string. Not sure where you got that data...).

Answer 3

Split on square brackets and filter out empty strings:

"variable[foo][bar]".split(/\]|\[/).filter(s => !!s)
> [ "variable", "foo", "bar" ]