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"></sp开发者_StackOverflow中文版an>

Thanks.

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/

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 →

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.

Something like:

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

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