从 JQuery 响应创建 Dictionary/Object

Question

这个JQuery$$('tbody[class="MuiTableBody-root"]')[5].innerTextreturns

"Subtotal   [=12=].00
Total   [=12=].00
Total Price/Unit    [=12=].00"

美元金额后有一个换行符，字符串中有额外的空格。

如何插入 in/or 创建一个字典来存储上面的响应，如下所示？

商店={ 'Subtotal'：0.00 美元， 'Total'：0.00 美元， 'Total Price/Unit': $0.00" }

DOM:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>

<tbody class="MuiTableBody-root">
  <tr class="MuiTableRow-root">
    <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">Subtotal</td>
    <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">[=13=].00</td>
  </tr>
  <tr class="MuiTableRow-root">
    <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">Total</td>
    <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">[=13=].00</td>
  </tr>
  <tr class="MuiTableRow-root">
    <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">Total Price/Unit</td>
    <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">[=13=].00</td>
  </tr>
</tbody>
</table>

我在响应中尝试了正则表达式。为什么只匹配2个？

Answer 1

您可以使用 matchAll() 应用于 return 匹配迭代器的正则表达式，您可以使用 Array.from() 将其映射到 [key, value] 对数组，然后可以传递给 Object.fromEntries 以生成您的最终对象。

const response = `Subtotal   [=10=].00
Total   [=10=].00
Total Price/Unit    [=10=].00`

const regex = /(.*?)(?=$)($\d+.\d+)(?=[\r|\n]|$)/g;

// return iterator from matchAll() 
const matchIterator = response.matchAll(regex);

// pass the iterator to Array.from() and use built in map() 
// to return a [key, value] array with white space removed by trim()
const keyValueArr = Array.from(matchIterator, ([_, key, value]) => ([key.trim(), value.trim()]));

// pass the array to Object.fromEntries()
const finalObject = Object.fromEntries(keyValueArr);

// Or all in one call...
const 
  reg = /(.*?)(?=$)($\d+.\d+)(?=[\r|\n]|$)/g,
  object = Object.fromEntries(
    Array.from(response.matchAll(reg), ([_, key, value]) => ([key.trim(), value.trim()])));

const response = `Subtotal   [=11=].00
Total   [=11=].00
Total Price/Unit    [=11=].00`

const 
  reg = /(.*?)(?=$)($\d+.\d+)(?=[\r|\n]|$)/g,
  object = Object.fromEntries(
    Array.from(response.matchAll(reg), ([_, key, value]) => ([key.trim(), value.trim()])));


console.log(object);

或者使用DOM遍历

const 
  rows = document.querySelectorAll('.MuiTableBody-root tr'),
  object = Object.fromEntries(
      [...rows].map(r => [...r.cells].map(c => c.innerText.trim()))
    );

console.log(object);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>

<tbody class="MuiTableBody-root">
  <tr class="MuiTableRow-root">
    <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">Subtotal</td>
    <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">[=13=].00</td>
  </tr>
  <tr class="MuiTableRow-root">
    <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">Total</td>
    <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">[=13=].00</td>
  </tr>
  <tr class="MuiTableRow-root">
    <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">Total Price/Unit</td>
    <td class="MuiTableCell-root jss93 MuiTableCell-body MuiTableCell-alignRight">[=13=].00</td>
  </tr>
</tbody>
</table>

Answer 2

通过迭代每一行和单元格以获取单个修剪文本值，将多个 tbody 元素映射到对象数组的方法

const data = $('tbody.MuiTableBody-root').map((i, tbod) => {
  return [...tbod.rows].reduce((a, row) => {
    const [k, v] = [...row.cells].map(cell => cell.textContent.trim())
    return (a[k] = v, a);   
  }, {})
}).get();

console.log(data)

.as-console-wrapper {max-height: 100%!important;top:0}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody class="MuiTableBody-root">
    <tr>
      <td>Subtotal</td>
      <td>[=12=].00</td>
    </tr>
    <tr>
      <td>Total</td>
      <td>[=12=].00</td>
    </tr>
    <tr>
      <td>Total Price/Unit</td>
      <td>[=12=].00</td>
    </tr>
  </tbody>
  <tbody class="MuiTableBody-root">
    <tr>
      <td>Subtotal</td>
      <td>.00</td>
    </tr>
    <tr>
      <td>Total</td>
      <td>.00</td>
    </tr>
    <tr>
      <td>Total Price/Unit</td>
      <td>.00</td>
    </tr>
  </tbody>
</table>

Answer 3

我猜你需要这样的东西

let res = `Subtotal   [=10=].00
Total   [=10=].00
Price/Unit    [=10=].00`;

let parts = res.split('\n').map(item => item.split(' ').filter( i=> i != ""));

let myObj = parts.reduce(function(map, obj) {
    map[obj[0]] = obj[1];
    return map;
}, {});

从 JQuery 响应创建 Dictionary/Object

Create a Dictionary/Object from a JQuery Response

javascript

webdriver-io