Как подсчитать слова, используя элемент, используя Javascript?

Question

Общее количество слов будет отображаться в верхней части Textarea., Когда я ввожу или вставляю несколько слов.

На самом деле, мне нужно общее количество слов, когда я использовал элемент <textarea id="text"></text>.

Но я не могу получить общее количество слов, используя <div id="text"></div>

Можно ли считать все слова в пределах элемента <div id="text"></div>?

JS для подсчета слов.

counter = function() { 
    var value = $('#text').val(); 

    if (value.length == 0) { 
     $('#wordCount').html(0);   
     return; 
    } 

    var regex = /\s+/gi; 
    var wordCount = value.trim().replace(regex, ' ').split(' ').length; 
    $('#wordCount').html(wordCount);  
}; 

$(document).ready(function() {  
    $('#text').change(counter); 
    $('#text').keydown(counter); 
    $('#text').keypress(counter); 
    $('#text').keyup(counter); 
    $('#text').blur(counter); 
    $('#text').focus(counter); 
}); 

Может ли кто-нибудь помочь мне решить эту проблему?

Answer 1

text Используйте вместо val:

var value = $.trim($('#text').text()); 

val даст вам значение по value атрибута. Принимая во внимание, что text предоставит вам innerText элемента (div).

Оптимизация

var counter = function() { 
    var value = $.trim($(this).text()); // Trim spaces 

    if (value.length === 0) { 
     $('#wordCount').text(0); 
     return; 
    } 

    var wordCount = value.replace(/\s+/g, ' ').split(' ').length; 
    $('#wordCount').text(wordCount); 
}; 

$(document).ready(function() { 
    $('#text').on('change keydown keypress keyup blur focus', counter); 
}); 

Answer 2

Проблема в том, что val() будет извлекать значение textarea без проблем, однако div не имеет value свойство.

Для этого, чтобы работать с div элементов, вы должны изменить val() к text():

var value = $('#text').text(); 

Answer 3

Я думаю, вам это нужно:

counter = function() { 
    var value = $('#text').text(); //<----change .val() to .text() 

    if (value.length == 0) { 
     $('#wordCount').html(0);   
     return; 
    } 

    var regex = /\s+/gi; 
    var wordCount = value.trim().replace(regex, ' ').split(' ').length; 
    $('#wordCount').html(wordCount);  
}; 

$(document).ready(function() {  
    counter(); //<---call the function here. 
}); 

---

Вам нужно вызвать функцию на йот потому что для всех событий, которые вы привязали к div, требуется какое-то событие, которое может произойти пользователем.