使用 jQuery 计算段落中的字符（*not* for input/textarea）

Question

如何在 jQuery 中计算出 ap/div 标签的字符计数器？

基本上我想显示不同的 css 值，如果字符值 >=50。

已经为此苦苦挣扎了几个小时:)

Answer 1

用

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

Answer 2

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

Answer 3

在所有超过 50 个字符的 div 和 p 元素上放置一个"long"类：

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

但是，如果您不知道自己拥有多少内容，那么大概这些内容是由服务器动态生成的，对吗？ 如果是这种情况，让服务器（它知道将多少内容放入这些容器中）在生成要发送的页面时动态添加类不是更有意义吗？ 为什么要依赖 jQuery？

Answer 4

试试这个片段，即使文本的长度大于 50 个字符，它也能工作。

您还可以计算段落的字符位数。 （不包括换行符和空格键）

 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>

我提供了这个例子来简化使用和兼容性。