How can I count the number of characters in a textbox using jQuery?
$("#id").val().length < 3
just counts upto 3 character spaces but not the number of characters.
3 Answers
For length including white-space:
$("#id").val().length
For length without white-space:
$("#id").val().replace(/ /g,'').length
For removing only beginning and trailing white-space:
$.trim($("#test").val()).length
For example, the string " t e s t " would evaluate as:
//" t e s t "
$("#id").val();
//Example 1
$("#id").val().length; //Returns 9
//Example 2
$("#id").val().replace(/ /g,'').length; //Returns 4
//Example 3
$.trim($("#test").val()).length; //Returns 7
Here is a demo using all of them.
3 Comments
Rion Williams
That regular expression will do what you need.
Rion Williams
@yak613 It doesn't look like the code that you provided does anything. It will display a count when the page is first loaded, but nothing much after that. If you wanted to display the count as you typed, you could attach an event handler to the keypress, keyup or keydown events similar to this example or if you just wanted to calculate it on the button click, this example should work.
Use .length to count number of characters, and $.trim() function to remove spaces, and replace(/ /g,'') to replace multiple spaces with just one. Here is an example:
var str = " Hel lo ";
console.log(str.length);
console.log($.trim(str).length);
console.log(str.replace(/ /g,'').length);
Output:
20
7
5
Comments
Since none of the given answers to this question has worked for me (I ask myself if jQuery has changed in this regard somehow?), I am adding the solution that does work in my case, i.e. using $('#myelement').text().length; to determine the number of characters inside a tag (defined by tag name or id).
var x = $('h1').text().length;
console.log(x);
$('#solution').text(x);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>How many characters are in this H1?</h1>
<p>This is just some more text.</p>
<p style="font-size: 1.4em;">Solution: There are <span id="solution"></span> characters in the h1 tag, including spaces</p>
$("#id").val().lengthreturns the number of characters in a string. What's the problem?$("#id").val().lengthand when I use.html()to print it out it stays as 0.