Javascript，解析变量中的多个值

Question

我有一个工作 html 表单(在 laravel 中)，它使用 javascript 调用来使用 Ajax。

现在我正在使用控制台日志来确保我的点击事件显示它所执行的变量。

但是，由于我的值如下，我在一个变量中获得多个值，我想知道是否有一种方法将它们解析为自己的值。

例如，在我的表单中，我有多个共享表格单元格的值:

<form id="saveLineup">
@foreach($lists as $list)

  <tr style="text-align:center;">
      <td id="groupNumber">{{$list['product']}} - {{$list['product_NAME']}}</td>
      <td id="detailColor">{{$list['detail']}}/{{$list['COLOR']}} - {{$list['description']}}</td>
      <td id="category">{{$list['CATEGORY']}}</td>
      <td><input id="addToLineup"> type="checkbox" <?php if ($list['LINE_UP'] == 1) echo "checked='checked'"; ?>></td>
  </tr>  

@endforeach
</form>

但是当我记录我的变量时，我得到了

category: "categoryOne" //which is correct
detailColor: "123/Blue - Description"
productNumber: 123 - productOne

我想做的是解析这些并将其全部作为单独的值，如下所示:

category:"categoryOne"
detail: "123"
color: "Blue"
productNumber: "123"
productDescription: "productOne"

有没有办法在我的 JS 中做到这一点？

$("#addToLineup").click(function (e) {

  var productNumber = document.getElementById("productNumber").innerHTML = productNumber;
  var detailColor = document.getElementById("detailColor").innerHTML = detailColor;
  var category = document.getElementById("category").innerHTML = category;

  updatedata.productNumber = productNumber;
  updatedata.detailColor = detailColor;
  updatedata.category = category;

  $.ajax({
    url: "/test/addToLineup",
    data: updatedata,
    _token: phpVariables.csrfToken,
    type: "POST",
    beforeSend: function () {
      showLoading(element);
    },
    success: function (data) {
      location.reload();
    },
  });
});

Answer 1

我相信最简单的方法就是像这样分割变量:

var detailColor = "123/Blue - Description";
var productNumber = "123 - productOne";

var first = detailColor.split(' - ');
var just_color = first[0].split('\/');
var detail = just_color[0];
var color = just_color[1];

var second = productNumber.split(' - ');
var product_number = second[0];
var product_description = second[1];

console.log(detail , color, product_number, product_description);