javascript - JQuery ':contains' 将其转换为 Javascript

Question

我的问题是，代码是用 Jquery 编写的，我想将它转换成 Javascript，但我找不到关于 contains 的 javascript 文档。

如果您想知道这是如何工作的，那么让我解释一下。表格内有“CRITICAL”和“SAFE”字样，这将计算表格内有多少 CRITICAL。所以这里的预期输出是:

6

顺便说一句，添加类名或 ID 不是一个选项，因此请尽可能不要使用类名或 ID 名。

文件.php

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
<tr>
 <td>CRITICAL </td>
 <td>CRITICAL </td>
 <td>CRITICAL </td>
 <td>SAFE</td>
</tr>
<tr>
 <td>SAFE</td>
 <td>CRITICAL </td>
 <td>CRITICAL </td>
 <td>CRITICAL </td>
</tr>
</table>

JS 文件

var test = $('td:contains(CRTICAL)');

console.log(test.size());

Answer 1

您可以创建一个可重用的函数，它接受需要搜索的元素数组和文本，然后从该函数返回计数:

var test = document.querySelectorAll('table tr td');

function getCount(elem, text) {
  var count = 0;
  for (var i = 0; i < elem.length; i++) {
    if (elem[i].innerText.trim().indexOf(text) !== -1) {
      count++;
    }
  }
  return count;
}


console.log('CRITICAL-->' + getCount(test, 'CRITICAL'));
console.log('SAFE-->' + getCount(test, 'SAFE'));

<table>
  <tr>
    <td>CRITICAL </td>
    <td>CRITICAL </td>
    <td>CRITICAL </td>
    <td>SAFE</td>
  </tr>
  <tr>
    <td>SAFE</td>
    <td>CRITICAL </td>
    <td>CRITICAL </td>
    <td>CRITICAL </td>
  </tr>
</table>