按标签名称使用元素计数时计数不正确

Question

我使用的代码是：

function findOccurrences(string) {
  var elements = document.getElementsByTagName('*');
  var foundCount = 0;

  for (var i = 0, il = elements.length; i < il; i++) {
    if (!elements[i].textContent || !elements[i].textContent.match(string)) {
      continue;
    }
    foundCount++;
  }

  return +foundCount;
}

<strong><strong>text here (</strong></strong>
<span id="anm_tot" class="wysiwyg-font-size-normal">&nbsp;</span>
<strong>) </strong>
<script>
  var countElement = document.getElementById('anm_tot');
  countElement.textContent = findOccurrences('¤');
</script>

在页面本身中，我隐藏了该字符以进行计数。

（发现为另一个 stackoverflow 用户建议的代码）

另一个“复杂性”是，所有内容都必须在 ZenDesk 知识库页面上进行。同样，我过去在这方面做得更好，但在中风和癌症之后，我的知识出现了漏洞。

它确实计数，但计数不正确 - 它应该与 Command-F 计数相同（抱歉在 Mac 上工作），但它返回 12，而 Command-F 返回 5。

我需要一个准确的计数。这不是一个最佳解决方案，但却是迄今为止我能够开始工作的唯一解决方案。我尝试过其他选项，例如计算 LI 元素，但我需要将计数显示为我正在编辑的知识库页面的一部分，但我无法让该计数显示在页面本身上。

Answer 1

为了避免多次计算相同的文本段落，您应该仅分析包含页面上所有其他元素的最外层 DOM 元素（=容器，在本例中：第一个

<div>

）。这是一个工作片段：

function findOccurrences(string){
 // wrong method:
 console.log("wrong:",[...document.querySelectorAll("*")]
 .reduce((a,c)=>a+[...c.textContent.matchAll(string)].length,0));
// correct method:
console.log("correct:",[...document.querySelector("div").textContent.matchAll(string)].length);
}
findOccurrences('¤')

<div>¤<div>¤<br><span>¤<b>¤</b>¤</span>
</div></div>