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

试试这个。

.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

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>")
}