计算 DOM 字符串中的单词答案

【问题标题】：Count words in DOM string计算 DOM 字符串中的单词
【发布时间】：2017-04-06 20:28:20
【问题描述】：

我有以下 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 字符串中的单词？

谢谢

【问题讨论】：

标签： javascript jquery html dom

【解决方案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

【讨论】：

谢谢，但它不适用于包含内联标签的单词，例如 <b>，例如：
Hello 你好吗你？
（它会把hello这个词分成几个词）
@user2678018 因此，如果发现“Hello”，您想将其视为一个单词吗？
是的..因为大多数编辑器会将其呈现为一个单词（加粗2个字母）
难题..我正在尝试使用它..但没有任何效果..你找到方向了吗？
@user2678018 很难想象这样的词。不。盗版的没有人会给几个单词的字符加上 b/i/u 标签。用户将应用于整个单词。

【解决方案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>")
}

【讨论】：

不正确的解决方案，您在这里删除标签。