在datatable中使用regex获取元素的唯一值计数

Question

我有一个数据表，它的结构如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>ABC</td>
<td></td>
<td id="invNumbers0">12345</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>GHI</td>
<td></td>
<td id="invNumbers1">12345</td>
<td></td>
</tr>
<tr>
<td>MNO</td>
<td></td>
<td id="invNumbers2">4566</td>
<td></td>
</tr>
<tr>
<td>STU</td>
<td></td>
<td id="invNumbers3">12345</td>
<td></td>
</tr>
<tr>
<td>ABC</td>
<td></td>
<td id="invNumbers4">2566</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>GHI</td>
<td></td>
<td id="invNumbers5">4566"</td>
<td></td>
</tr>
<tr>
<td>MNO</td>
<td></td>
<td id="invNumbers6">12345</td>
<td></td>
</tr>
<tr>
<td>STU</td>
<td></td>
<td id="invNumbers7">12345</td>
<td></td>
</tr>
</tbody>
</table>

我想要对id从"0"开始的元素中存在的唯一值进行计数；invNumbers"；。重复的值只能计数一次。所以这里的输出应该是计数=3。因为我只有3个唯一的值，即1234545662566。

Answer 1

这里有3个版本的

• ES6带脂肪箭头
• ES2015带功能
• 应该从IE8左右运行的遗留JS

const uniqueCount = [...document.querySelectorAll("td[id^=invNumbers]")]
.reduce((acc, cur) => {
const val = cur.textContent;
if (!acc.includes(val)) acc.push(val);
return acc;
}, []).length;
console.log(uniqueCount)
// no fat arrows =>
const uniqueCount1 = [...document.querySelectorAll("td[id^=invNumbers]")]
.reduce(function(acc, cur) {
const val = cur.textContent;
if (!acc.includes(val)) acc.push(val);
return acc;
}, []).length;
console.log(uniqueCount1)

// Legacy  - not ES2015 or ES6
var cells = document.querySelectorAll("td[id^=invNumbers]"); // supported since IE9 or so
var arr = [];
for (var i = 0; i < cells.length; i++) {
var val = cells[i].innerText;
if (arr.indexOf(val) ===-1) arr.push(val);
}
console.log(arr.length)

<table>
<tbody>
<tr>
<td>ABC</td>
<td></td>
<td id="invNumbers0">12345</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>GHI</td>
<td></td>
<td id="invNumbers1">12345</td>
<td></td>
</tr>
<tr>
<td>MNO</td>
<td></td>
<td id="invNumbers2">4566</td>
<td></td>
</tr>
<tr>
<td>STU</td>
<td></td>
<td id="invNumbers3">12345</td>
<td></td>
</tr>
<tr>
<td>ABC</td>
<td></td>
<td id="invNumbers4">2566</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>GHI</td>
<td></td>
<td id="invNumbers5">4566</td>
<td></td>
</tr>
<tr>
<td>MNO</td>
<td></td>
<td id="invNumbers6">12345</td>
<td></td>
</tr>
<tr>
<td>STU</td>
<td></td>
<td id="invNumbers7">12345</td>
<td></td>
</tr>
</tbody>
</table>

Answer 2

你可以试试这样的东西：

var arr = $('td[id^=invNumbers]').map(function() {
return $(this).text()
}).get();
var unique = arr.filter(function(v, i, a) {
return a.indexOf(v) === i
});

演示

var arr = $('td[id^=invNumbers]').map(function() {
return $(this).text()
}).get();
var unique = arr.filter(function(v, i, a) {
return a.indexOf(v) === i
});
console.log(unique);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>ABC</td>
<td></td>
<td id="invNumbers0">12345</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>GHI</td>
<td></td>
<td id="invNumbers1">12345</td>
<td></td>
</tr>
<tr>
<td>MNO</td>
<td></td>
<td id="invNumbers2">4566</td>
<td></td>
</tr>
<tr>
<td>STU</td>
<td></td>
<td id="invNumbers3">12345</td>
<td></td>
</tr>
<tr>
<td>ABC</td>
<td></td>
<td id="invNumbers4">2566</td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td>GHI</td>
<td></td>
<td id="invNumbers5">4566</td>
<td></td>
</tr>
<tr>
<td>MNO</td>
<td></td>
<td id="invNumbers6">12345</td>
<td></td>
</tr>
<tr>
<td>STU</td>
<td></td>
<td id="invNumbers7">12345</td>
<td></td>
</tr>
</tbody>
</table>