JQuery ': содержит' преобразовать его в Javascript

Question

Моя проблема в том, что код написан на Jquery, я хочу преобразовать его в Javascript, но я не могу найти документацию по javascript about.

Если вы хотите знать, как это работает, тогдамне объяснить.Внутри таблицы есть слова «КРИТИЧЕСКИЙ» и «БЕЗОПАСНЫЙ». Это подсчитает, сколько КРИТИЧЕСКИХ есть внутри таблицы.Таким образом, ожидаемый результат здесь:

6

Кстати, добавление имени класса или идентификатора не является опцией, поэтому, по возможности, не используйте имя класса или имя идентификатора.

file.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 FILE

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

console.log(test.size());

Answer 1

Может быть сделано в одной строке кода

[].slice.call(document.querySelectorAll("td")).filter(el => el.innerText.indexOf("CRITICAL") !== -1)

Объяснение:

1. [].slice.call(document.querySelectorAll("td")) преобразовать возвращение списка узлов с помощью селектора javascript в массивтак что вы можете использовать filter function
2. .filter(el => el.innerText.indexOf("CRITICAL") !== -1 отфильтровать любой элемент td, который не содержит "CRITICAL"

Фрагмент:

var test = [].slice.call(document.querySelectorAll("td")).filter(el => el.innerText.indexOf("CRITICAL") !== -1);

console.log(test.length);

<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>

Answer 2

Вы можете создать для него пользовательскую функцию.

let word = 'CRITICAL';
function contains(elements,string){
  let count= 0;
  elms = Array.from(elements);
  elms.forEach(elm => {
    if(elm.innerText.includes(string)) count++;
  })  
  return count;
}
console.log(contains(document.querySelectorAll('table td'),word));

<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>

Answer 3

Вы можете создать повторно используемую функцию, которая принимает массив элементов и текст, который необходимо найти, а затем возвращает счет этой функции:

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>