Hi I would like to do a Word Count in my RTE (Rich Text Editor) with javascript can also use with jquery. But it should not count the html tags and repeating white spaces.

Sample Text:

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

The javascript should display 5 only.

Is there any javascript code for this and that is also fast to calculate the Word Count?

Thanks!

Hi I would like to do a Word Count in my RTE (Rich Text Editor) with javascript can also use with jquery. But it should not count the html tags and repeating white spaces.

Sample Text:

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

The javascript should display 5 only.

Is there any javascript code for this and that is also fast to calculate the Word Count?

Thanks!

• javascript
• jquery
• html
• rich-text-editor
• word-count

• 1 have you seen this answer? stackoverflow./a/14010497/622287 – kevnk Commented Jun 29, 2016 at 14:12
• @kevnk I tried the accepted answer and it gives me this different result after pasting my sample text: Characters (no spaces): 39 Characters (and spaces): 41 Words: 3 Lines: 1 – howardtyler Commented Jun 29, 2016 at 14:13
• This can be done with jQuery.text() and String.split() and the Array.length property. Probably in one line. – tpdietz Commented Jun 29, 2016 at 14:13
• thanks @tpdietz but do you have any idea how will it be? – howardtyler Commented Jun 29, 2016 at 14:14
• @howardtyler what have you tried already? – Sam Hood Commented Jun 29, 2016 at 14:16

4 Answers 4

Try something like this: You get the html in the div then you remove all tags and replace them with spaces. You remove (trim) all left and right spaces and finally you split the string into an array. The length is your answer.

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./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>

  var words = [];
  function getWords(elements) {
    elements.contents().each(function() {
      if ($(this).contents().length > 0) return getWords($(this));
      if ($(this).text()) words = words.concat($(this).text().split(" "));
    })

  }

  getWords($('<div>').html('<p>11 22&nbsp; 33</p><p>44</p>5<br></div>'));
  console.log(words,words.length);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can do something tricky by using jQuery by creating an element with the content.

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can use Countable.js for live word counting, although it doesn't ignore HTML tags.