如何使用 javascript 计算包含 html 标签的字数？答案

【问题标题】：How to make a word count that contains html tags using javascript?如何使用 javascript 计算包含 html 标签的字数？
【发布时间】：2016-11-01 07:28:47
【问题描述】：

您好，我想在我的 RTE（富文本编辑器）中使用 javascript 进行字数统计，也可以使用 jquery。但它不应该计算 html 标记和重复的空格。

示例文本：

11 22&nbsp; 33445 </div>

javascript 应该只显示 5。

是否有任何 javascript 代码可以快速计算字数？

谢谢！

【问题讨论】：

你看到这个答案了吗？ stackoverflow.com/a/14010497/622287
@kevnk 我尝试了接受的答案，粘贴示例文本后它给了我不同的结果：字符（无空格）：39 字符（和空格）：41 字：3 行：1跨度>
这可以通过 jQuery.text() 和 String.split() 以及 Array.length 属性来完成。可能在一行中。
谢谢@tpdietz，但你知道会怎么样吗？
@howardtyler 你已经尝试了什么？

标签： javascript jquery html rich-text-editor word-count

【解决方案1】：

  var words = [];
  function getWords(elements) {
    elements.contents().each(function() {
      if ($(this).contents().length > 0) return getWords($(this));
      if ($(this).text()) words = words.concat($(this).text().split(" "));
    })

  }

  getWords($('<div>').html('<p>11 22&nbsp; 33</p><p>44</p>5<br></div>'));
  console.log(words,words.length);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

嗨@vladu lonut，谢谢，但应该是5。这可能吗？

【解决方案2】：

您可以通过使用 jQuery 创建一个包含内容的元素来做一些棘手的事情。

var str = '<p>11 22&nbsp; 33</p><p>44</p>5<br></div>';

var len = 0;
// create a temporary jQuery object with the content
$('<div/>', {
    html: str
  })
  // get al child nodes including text node
  .contents()
  // iterate over the elements
  .each(function() {
    // now get number or words using match and add 
    len += (this.textContent.match(/[\w\d]+/g) || '').length;
  });

console.log(len);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

嗨@pranav C Balan，这太棒了，谢谢！你能解释一下是什么使它起作用吗？因为我想学习更多的js技术。也让其他人了解你是如何做到的。

【解决方案3】：

试试这样的：您在 div 中获取 html，然后删除所有标签并用空格替换它们。您删除（修剪）所有左右空格，最后将字符串拆分为一个数组。长度就是你的答案。

var cont = $("#content").html();
cont = cont.replace(/<[^>]*>/g," ");
cont = cont.replace(/\s+/g, ' ');
cont = cont.trim();
var n = cont.split(" ").length
alert(n);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
<p>11 22&nbsp; 33</p><p>44</p>5<br></div>

【讨论】：

嗨@roxoradev 这太棒了！更有条理。你能解释一下你在那里做的代码，特别是你做的正则表达式，因为我想知道你的正则表达式是什么意思。谢谢！ :)
第一个正则表达式包含 html 标记，这些标记会被空格替换。第二个正则表达式删除多个空格，例如 a b -> a b。如果您认为我帮助了您，您可以将此答案标记为解决方案。谢谢：D

【解决方案4】：

您可以使用 Countable.js 进行实时字数统计，尽管它不会忽略 HTML 标记。

【讨论】：