Question

如何在jQuery中使用p / div标签的字符计数器？

基本上我想在字符值> = 50时显示不同的css值。

用它挣扎了几个小时：）

Answer 1

使用

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

Answer 2

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

Answer 3

将"long"课程放在所有 div和p元素上超过50个字符：

$("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>

我提供了这个示例，以使其易于使用和兼容。

使用jQuery计算段落中的字符（* not *表示输入/ textarea）

4 个答案: