Question

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

最重要的是，在下面的示例中，如果将示例文本拆分为两行，则在执行此操作时将“吃掉”一个单词：

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

<div>some things</div><div>are cool</div>它的字符串“有些东西很酷”。

这是我的代码：

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 &nbsp;&bull;&nbsp; " + 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;

没有任何运气。我需要放弃它是<p>还是<div>，有些浏览器在合并线时添加 。

有什么想法吗？谢谢！

修改感谢Jefferson的聪明方法，我设法解决了这个问题。出于某种原因，我必须在word_count上执行-1以显示正确的单词数：

function wordCount() {
  var content_div = $('#post_content'),
      content_text,
      char_count = content_div.text().length,
      word_count = 0;
  // if no characters, words = 0
  if (char_count != 0) 
    content_div.children().each(function(index, el) {
      content_text += $(el).text()+"\n";
    });
  // if there is content, splits the text at spaces (else displays 0 words)
  if (typeof content_text !== "undefined")
    word_count = content_text.split(/\s+/).length - 1;
  $('.word_count').html(word_count + " words &nbsp;&bull;&nbsp; " + char_count + " characters");
}

Answer 1

您可以使用：

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

通过这种方式，您可以迭代div中的所有元素，只获取文本，在它们之间添加“\ n”。

Answer 2

杰斐逊的答案很棒，它帮助我完成了同样的问题。我遇到的问题是我的contenteditable div的内容并未完全包含在HTML标记中。

例如，我的div包含以下HTML代码：

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

通过使用$.children()，它忽略了第一行，只返回了5的字数。为了解决这个问题，我改为使用$.contents()。修改后的代码如下：

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

这返回了10行数。

道歉，将此作为答案，而不是对杰斐逊答案的评论，但是我的声誉太低，不允许我这样做。我觉得值得指出上面的内容。

在contenteditable中添加新行时，字数统计错误

2 个答案: