javascript - JavaScript-拆分多个返回值

我正在建立一个搜索过滤器。之前一切正常，因为我们一次只允许1个过滤器。所以我会得到这样的回报：

var returnVal = "&filterName=filterProperty"
var filterFields = returnVal.split(['=']);
var filterCategory = filterFields[0];
var filterCatSplit = filterCategory.substr(1);
var filterTitle = filterFields[1];

<h4>filter title</h4>
<ul>
    <li>filter one</li>
</ul>

我只是得到returnVal并将其分割为'='

现在，我们将允许多个值，但我不确定如何将它们全部显示在一个漂亮的列表中。现在，returnVal可以如下所示：

var returnVal = "&sizeFilterName=filterProperty,filterPropery&colorFilterName=filterProperty,filterProperty"

我现在需要这个来像这样返回（或类似的东西）

<h4>Size Filter Name</h4>
<ul>
    <li>Size Filter One</li>
    <li>Size Filter Two etc</li>
</ul>

<h4>Color Filter Name</h4>
<ul>
    <li>Color Filter One</li>
    <li>Color Filter Two etc</li>
</ul>

我以前从来没有拆分和切片过如此众多的变体。我有点迷路了。我希望这足以使我了解我要做什么。

谢谢！

最佳答案

您可以将returnVal传递给URLSearchParams()，然后通过.split()使用返回的数组通过","值执行任务

let returnVal = "&sizeFilterName=filterProperty,filterPropery&colorFilterName=filterProperty,filterProperty";
let params = Array.from([...new URLSearchParams(returnVal)]
             , ([key, value]) => [key, value.split(",").filter(Boolean)]);
// do stuff with `params`
params.forEach(([key, value]) =>
  document.body.insertAdjacentHTML("beforeend", `<h4>Size ${key}</h4>
<ul>
    ${value.map(prop => `<li>Color ${prop}</li>`).join("")}
</ul>`)
);

returnval

javascript - JavaScript-拆分多个返回值