在contenteditable中添加新行時，字數錯誤

我計算contenteditable中的字數。我用空格分割它。當你輸入一個新行時會出現問題。它不會計算您正在新行上寫的單詞，直到您添加一個空格。在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>以及某些瀏覽器在合併行時添加 。

任何想法？謝謝！

編輯： 感謝低於他的聰明方法傑弗森，我設法解決這個問題。出於某種原因，我必須做-1上word_count以顯示正確的字數：

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

來源

2013-02-21 Alex

sashok - 優秀的問題。很詳細。感謝您使用jsfiddle – 2013-02-21 18:06:16

計數關閉，甚至沒有輸入： 'console.log（content_text.replace（/ [^ \ w]/g，「」）.split（/ \ s + /））;'第一個索引是一個空的字符串。 – epascarello 2013-02-21 18:11:31

您可以使用此：

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

這樣你的所有元素迭代裏面你div和只獲取文本，在它們之間放置一個「\ n」。

來源

2013-02-21 18:31:40

'buffer'是一個字符串，我不把它放在代碼中，但我想你明白這將如何工作 – 2013-02-21 18:37:54

謝謝，聰明的解決方案。我用我的答案編輯我的問題，使用你的方法。 – Alex 2013-02-21 23:20:23

傑斐遜的回答非常好，它幫助我完成同樣的問題。我遇到的問題是我的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

道歉線計數增加這是一個答案，而不是作爲傑斐遜的答案評論，但是我的名聲太低，讓我去做。儘管如此，我覺得這是值得指出的。

來源

2016-03-04 16:30:23

在contenteditable中添加新行時，字數錯誤

回答

相關問題