Как сделать количество слов, содержащих html-теги, с помощью javascript?

Привет, я хотел бы подсчитать количество слов в своем RTE (Rich Text Editor) с помощью javascript, который также можно использовать с jquery. Но он не должен учитывать теги html и повторяющиеся пробелы.

Образец текста:

<p>11 22&nbsp; 33</p><p>44</p>5<br></div>

JavaScript должен отображать только 5.

Есть ли какой-нибудь код javascript для этого, который также быстро вычисляет количество слов?

Спасибо!


javascript html jquery rich-text-editor word-count
person howardtyler    schedule 29.06.2016    source источник
comment
вы видели этот ответ? stackoverflow.com/a/14010497/622287   -  person kevnk    schedule 29.06.2016
comment
@kevnk Я попробовал принятый ответ, и он дал мне другой результат после вставки моего образца текста: символов (без пробелов): 39 символов (и пробелов): 41 слов: 3 строк: 1   -  person howardtyler    schedule 29.06.2016
comment
Это можно сделать с помощью jQuery.text() и String.split() и свойства Array.length. Наверное, в одну строку.   -  person tpdietz    schedule 29.06.2016
comment
спасибо @tpdietz, но ты хоть представляешь, как это будет?   -  person howardtyler    schedule 29.06.2016
comment
@howardtyler, что ты уже пробовал?   -  person Sam Hood    schedule 29.06.2016
comment
Привет @SamHood. Я пробовал этот код, но получаю 3: var length = $(.text).text().trim().replace(/[\s]+/g, ).split() .length; console.log(длина);   -  person howardtyler    schedule 29.06.2016
comment
@howardtyler ознакомьтесь с принятым ответом на этот вопрос, он может быть полезен в том, что вы пытаетесь сделать stackoverflow.com/questions/12109946/   -  person Sam Hood    schedule 29.06.2016
comment
@howardtyler Вы можете использовать это, но я не знаю о поддержке brwoser innerText.   -  person Mohammad    schedule 29.06.2016
comment
@Mohammad Похоже, все хорошо! Но, возможно, не обязательно надежный caniuse.com/#search=innerText   -  person Sam Hood    schedule 29.06.2016

Ответы (4)


arrow_upward
14
arrow_downward

Попробуйте что-то вроде этого: вы получаете html в div, затем удаляете все теги и заменяете их пробелами. Вы удаляете (обрезаете) все левые и правые пробелы и, наконец, разбиваете строку на массив. Длина — это ваш ответ.

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>

person Roxoradev    schedule 29.06.2016
comment
привет @roxoradev это здорово! более организованный. Можете ли вы объяснить код, который вы там сделали, в частности регулярное выражение, которое вы сделали, потому что я хочу узнать, что означает ваше регулярное выражение. Спасибо! :) - person howardtyler; 29.06.2016
comment
Первое регулярное выражение включает теги html, которые заменяются пробелами. Второе регулярное выражение удаляет несколько пробелов, например, a b -> a b. Если вы думаете, что я помог вам, вы можете отметить этот ответ как решение. Спасибо - person Roxoradev; 29.06.2016

arrow_upward
1
arrow_downward

Вы можете сделать что-то сложное, используя 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);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

person Pranav C Balan    schedule 29.06.2016
comment
привет @pranav C Balan, это потрясающе, спасибо! Можете ли вы объяснить, что заставляет его работать? потому что я хотел бы узнать больше о методах js. А также для того, чтобы другие поняли, как вы это сделали. - person howardtyler; 29.06.2016

arrow_upward
0
arrow_downward

Вы можете использовать Countable.js для подсчета слов в реальном времени, хотя он не игнорирует теги HTML.

person asehgal17    schedule 29.06.2016

arrow_upward

arrow_downward

person    schedule
comment
Привет @vladu lonut, спасибо, но должно быть 5. Это возможно? - person howardtyler; 29.06.2016