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的角度来看，每个标记都有不同的节点值，即使是相同的单词)

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

谢谢

Answer 1

尝尝这个。

<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

Answer 2

据我对你的问题的理解，这应该行得通。

var allText = $("body").text().replace(/<[^>]*>/g, "");
var words = allText.split(' ');
for(var i=0;i<words.length;i++)
{
  $(div).append("<span id = 'word-'"+i+">"+words[i]+"</span>")
}