javascript - 计算 DOM 字符串中的单词数

Question

我有以下 HTML 字符串:

<div><p>Hello <b>how are</b> you?</div>

我想循环 HTML 字符串 DOM 并用 span 标签包裹每个单词，并将单词编号作为 id，因此结果将如下所示:

<div><p><span id="word-1">Hello</span> <b><span id="word-2">how</span> <span id="word-3">are</span></b> <span id="word-4">you?</span></div>

我尝试使用JQuery方法$.parseHTML但没有运气来计算单词数，因为 DOM 节点值可以包含多个单词..

此外，如果单词内部有内联标签，如 <b>/<i>所以从 DOM 的 Angular 来看，每个标签都有不同的节点值，即使它是相同的单词)

知道如何解决这个问题吗？如何计算 HTML DOM 字符串中的单词数？

谢谢

Answer 1

试试这个。

HTML

<div id="content">
  <div><p>Hello <b>how are</b> you?</div>
</div>

脚本

var textNodes = $("#content *").contents().filter(function() {
    return this.nodeType === 3;
});

var counter = 1;
for(var i = 0;i<textNodes.length;i++)
{
    var val = $(textNodes).eq(i).text();
  var words = val.split(" ");
  var final = "";

  for(var j = 0;j<words.length;j++)
  {
    if(words[j].trim() != "")
    {
        final += "<span id='"+ counter +"'>"+ words[j] +" </span>";
      counter++;
    }
  }

  $($(textNodes)[i]).replaceWith(final);
}

Jsfiddle Link