Javascript 在contenteditable中添加新行时字数错误

我在一个

contenteditable

中计算单词数。我用空格分割它。当您输入新行时，问题就出现了。在添加空格之前，它不会计算您当前在新行上书写的单词

除此之外，在下面的示例中，如果您将示例文本拆分为两行，则在执行此操作时，它将“吃掉”一个单词：

我猜这个问题的存在是因为HTML元素之间没有空格：

somethingsare cool

它的字符串应该是“somethingsare cool”

以下是我的代码：

function wordCount() {
var content_text = $('#post_content').text(),
    char_count = content_text.length,
    word_count = 0;
    // if no characters, words = 0
    if (char_count != 0) 
      word_count = content_text.replace(/[^\w ]/g, "").split(/\s+/).length;
$('.word_count').html(word_count + " words  •  " + char_count + " characters");
}

我尝试替换一些HTML标记：

word_count = content_text.replace(/&nbsp;/g, " ").replace(/<div>/g, "<p>").replace(/<\/div>/g, "</p>").replace(/<\/p><p>/g, " ").split(/\s+/).length;

您可以使用以下选项：

$("#post_content").children().each(function(index, el){buffer += $(el).text()+"\n"})

---

通过这种方式，您可以对

div

中的所有元素进行迭代，只获取文本，在它们之间加一个“\n”。

Jefferson的回答非常好，它帮助我解决了同样的问题。 我遇到的问题是我的

contenteditable

div的内容没有完全包装在HTML标记中

例如，my

div

包含以下HTML代码：

This is my first line<div>This is my second line</div>

这返回了10行计数

---

很抱歉将此添加为一个答案，而不是对杰斐逊的答案的评论，但是我的声誉太低，不允许我这么做。不过，我觉得有必要指出上面的问题。

sashok——这是一个很好的问题。非常详细。感谢您使用jsfiddleCount，它甚至没有按enter键就关闭了：

console.log（content\u text.replace（/[^\w]/g，”）.split（/\s+/）第一个索引是一个空字符串。
缓冲区
是一个字符串，我不把它放在代码中，但我想你知道它是如何工作的谢谢，聪明的解决方案。我用你的方法用我的答案编辑了我的问题。
This is my first line<div>This is my second line</div>

$("#post_content").contents().each(function(index, el){buffer += $(el).text()+"\n"})