Count characters in paragraph using jQuery (*not* for input/textarea)

Question

How do I work out in jQuery a character counter of a p/div tag?

Basically i want to show a different css value IF the character value >=50.

Been struggling f

Answer 1

Use

$("#myDiv").text().length;

Answer 2

Try this snippet it works even if the text's length was greater than 50 characters.

You can also calculate the character digits of the paragraph. (Excluding new lines and space bars)

window.setInterval(function() {
  var txt = $("#txt").val();
  var parLength = $("#data").text().length;
  var charLength = txt.replace(/ /g, '').replace(/\n/g, '').length;
  $("#data").text(txt);
  $("#calcLength").text("The paragrapgh's length is: " + parLength);
  $("#calcChar").text("The amount of characters is: " + charLength);
}, 10);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="txt" placeholder="Enter text here..." style="height:100px;width:250px"></textarea>
<p id="data"></p>
<p id="calcLength"></p>
<b>Note: even a space character is calculated through the length function</b>
<p id="calcChar"></p>
<b>Note: a space bar,and every empty line is trimmed in the second calculated value</b>

I have provided this example to make it simple for use and compatability.

Answer 3

var $div = $('#mydiv');
if($div.text().length >= 50) {
    $div.addClass('class');
}

Answer 4

Put a "long" class on all div and p elements with more than 50 characters:

$("p, div").filter(function(){
  return $(this).text().length >=50;
}).addClass('long');

If you don't know how much content you have, though, then presumably this content is generated dynamically by the server, right? And if this is the case, wouldn't it make more sense to have the server—which knows how much content it's plopping into these containers—add the class dynamically while generating the page to send? Why rely on jQuery?