CODEWITHSUNDEEP
jquery
santa
santa

Reputation: 12512

count characters with jQuery

I need to be able to count characters in textarea as the text is typed in, except anything that is surrounded by { }. I need to print the count below the text area. I've seen a few counters in JavaScript but am not sure how to exclude { enclosed text } from it. Do I do it on click?

<textarea id="myInput"></textarea>
Counter: <span id="charCount"></span>

Thanks.

Upvotes: 1

Views: 8596

Answers (4)

Šime Vidas
Šime Vidas

Reputation: 185933

Here you go:

$('#myInput').keyup(function() {
    $('#charCount').text( this.value.replace(/{.*}/g, '').length );
});

Live demo: http://jsfiddle.net/simevidas/8R9DH/

The regex that I use is not the best choice. Use the regex literals provided by @Matt or @Pointy.

Here: 

var input = $('#myInput'),
    count = $('#charCount'),
    limit = 10;

input.keyup(function() {
    var n = this.value.replace(/{.*?}/g, '').length;
    if ( n > limit ) {
        this.value = this.value.substr(0, this.value.length + limit - n);
        n = 10;
    }
    count.text( n );
}).triggerHandler('keyup');

Live demo: http://jsfiddle.net/simevidas/8R9DH/2/

Upvotes: 7

Matt Ball
Matt Ball

Reputation: 359826

Something like this. I used keyup instead of change because the change event only fires on a textarea when it loses focus.

var $input = $('#myInput'),
    $output = $('#charCount'),
    re_strip = /\{.*?\}/g;

$input.keyup(function ()
{
    var val = $(this).val();
    val = val.replace(re_strip, '');
    $output.text(val.length);
});

Demo →

Upvotes: 4

Pointy
Pointy

Reputation: 413737

You can try this:

$('#myInput').change(function() {
  $('#charCount').text(this.value.replace(/{[^}]*}/, '').length);
});

Now here's an important thing to know: usually, you count characters in a textarea to prevent overflowing database fields. Thus it's important to let the user use up all possible characters, but you don't want to cut off anything without warning. The issue is that IE and other browsers do different things with embedded newlines. I don't remember which is which exactly (I'll figure it out and update the answer), but one/some browsers include CR-LF pairs as line separators, and one/some do not.

edit — ok I'm remembering more - the issue is that there's a difference (in some browsers) between the string handed back to JavaScript when you get the <textarea> "value" attribute and the string that the browser will actually post back to the host. (Yes really.) Thus, when you're checking the length, that weird behavior has to be accounted for. Here's the code I use:

var
  adjust = ta.val().match(/[^\r]\n/g),
  alen = adjust ? adjust.length : 0,
  actual = ta.val().length + alen,
  ratio = Math.max(actual/ml);

The variable "ta" there is a <textarea> DOM element. First, the variable "adjust" is set to the the number of newlines found in the value without a preceding carriage return. If there are some found, then that total is subtracted from the plain length of the contents to give "actual", which should be the actual number of characters that the browser would send back to the server if the form were posted.

Upvotes: 3

macarthy
macarthy

Reputation: 3069

Something like: 

$("#myInput").change(function(){

n = this.val().length;
$('#charCount').text = n;
});

Upvotes: 0

Related Questions