Question

我正在尝试从表格中获取日期：

<th>Dates:</th>
<td>
   <a href="/dates">
      <span> 22 February 2019 </span> (UK)
      <span> 19 February 2019 </span> (DE)
   </a>
</td>

首选输出：

dates {
 date1: '22 February 2019',
 country1: 'UK',
 date2: '19 February 2019',
 country2: 'DE'
}

编辑：国家不是必须的，它们是第二个目标，我主要关心日期。

可接受的输出：

dates {
 date1: '22 February 2019',
 date2: '19 February 2019'
}

我正在尝试通过对待每个孩子确定其类型来循环每个孩子元素以获取输出：

$(document).on("click", ".btn-getdates", function() {
  var dates = $(document).find('tr th:contains("Dates")').next('td');
  $(dates).children().each(function() {
    console.log($(this).text());
  });
});

但我得到以下输出：

2019年2月22日（英国）2019年2月19日（德国）

如何将日期存储在对象中？

Answer 1

查看内联评论：

// Get the anchor
let anchor = document.querySelector("[href='/dates']");

let result = {};

// Get the two spans
let span1 = anchor.querySelector("span");
let span2 = anchor.querySelector("span:nth-child(2)");

// Extract the first date and country
result.date1 = span1.textContent.trim();
result.country1 = span1.nextSibling.nodeValue.trim();  // <-- This is a text node

// Then the second:
result.date2 = span2.textContent.trim();
result.country2 = span2.nextSibling.nodeValue.trim();  // <-- This is a text node

console.log(result);

<table>
<tr>
<th>Dates:</th>
<td>
   <a href="/dates">
      <span> 22 February 2019 </span> (UK)
      <span> 19 February 2019 </span> (DE)
   </a>
</td>
</tr>
</table>

Answer 2

如果您实际上有多个表单元格，并且每个单元格的模式都是一致的：

dd Month yyyy (XX)

然后，下面的演示将使用自动的键名分配功能，用于无限量的日期和单元格：

date1:..., country1:..., date2:..., country2:... ... dateN:..., countryN:...

演示

演示中评论的详细信息

// Declare empty object
var dates = {};
// Extract the text of all links within cells
var str = $('td a').text();
// Regex pattern that matches: dd Month yyyy OR (XX)
var rgx = /\b[0-9]{1,2}\b \b[A-Za-z]+?\b \b[0-9]{4}\b|\([A-Z]{2}\)/g;
// Counter for while loop
var count = 0;
// Serial counter for keys
var serial = 1;
// Regex String method exec() matches vs. string
var res = rgx.exec(str);
/*
while the result is NOT null...
...increment count...
...if count is an odd number...
...assign the match to date* key...
...otherwise increment serial...
...assign the match to country* key...
...find the next match
*/
while(res !== null) {
  count++;
  if (count % 2 === 1) {
    dates['date'+(serial)] = res[0];
  } else {
      serial+=1;
    dates['country'+(serial-1)] = res[0];
  }
  res = rgx.exec(str);
}

console.log(dates);

table,
th,
td {
  border: 1px solid #000
}

<table>
  <tr>
    <th>Dates:</th>
    <td>
      <a href="/dates">
        <span> 22 February 2019 </span> (UK)
        <span> 19 February 2019 </span> (DE)
      </a>
    </td>
    <td>
      <a href="/dates">
        <span> 13 February 2019 </span> (CA)
        <span> 2 February 2019 </span> (US)
        <span> 19 January 2019 </span> (IT)
        <span> 5 January 2019 </span> (FR)
      </a>
    </td>
    <td>
      <a href="/dates">
        <span> 13 December 2018 </span> (CN)
        <span> 11 December 2018 </span> (JP)
      </a>
    </td>
  </tr>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

通过所有不同的子元素进行JS循环

2 个答案:

演示