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

Question

所以我正在解析具有类似数组语法的字符串(来自 URL)，例如:

variable[foo]
variable[foo][bar]

我需要每个索引(在方括号中)成为它自己的捕获组，并且我需要它与一个或多个索引一起使用...我的正则表达式几乎可以工作，但只捕获最终索引，而不是后续索引，因此与一个索引完美配合。

here您可以看到我的最佳尝试，当您将鼠标悬停在第二个示例上时，您会看到 group_4 成为捕获的组 #2，其余的都丢失了。我需要捕获的组来匹配示例名称。

为了更好地衡量，在这里您可以看到我将正则表达式结果解析为实际 JavaScript 对象的整个解决方案。

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;
    },

此代码仅适用于一个索引，但一旦正则表达式捕获多个索引，此代码也必须处理它。

非常感谢任何帮助。

更新:

这是我的最终函数解决方案，基于bowheart非常优雅的代码。

    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

到底是什么让您想到用两个庞大的正则表达式来完成这一切？只是……别那样做。你可能会活得更久。在某种程度上，您将需要正则表达式，但始终保持尽可能短。

如果您有兴趣，这里有一个解决方案。您会发现它更短，更容易阅读，并且满足所有要求:

// 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>')

基本算法是:

• 将 GET 参数拆分为 '&'，然后将每个参数拆分为 '=' 上的键值对。

  <

• 正则表达式取出键中的任何方括号，以获取嵌套数组/对象的所有节点。

• 递归遍历一个对象，必要时创建子对象/数组，并将给定值分配给最后一个节点。

  • 如果下一个键是数字，则创建一个数组。否则，创建一个对象。

(从您的正则表达式片段中请注意，order_bys[0][field]=name 和 order_bys=desc 参数不兼容，因为表明 order_bys 是一个零索引数组，另一个是字符串。不确定您从哪里获得该数据...)。