INPUT - Text Character Counter For Multiple Limits Like FB or Twitter Post Length Checking

by bizamajig

HTML

<textarea id="post-msg" style="width:300px;height:100px"></textarea>
<div id="charcnt-wrap"> 
    <span class="shortenlinks">Links will appear shortened:</span><br> 
    <ul id="linkstoshort"> 
    </ul> 
    <h5 style="margin-bottom:0;">Facebook Limit: <span id="fb-char">420</span></h5><br> 
    <h5 style="margin-top:-12px;">Twitter Limit: <span id="tw-char">140</span></h5> 
</div>

JavaScript

$(function(){
    var message = $("#post-msg").text();
    var twstartchars = 140 - message.length;
    var fbstartchars = 420 - message.length;
    $("#fb-char").text(fbstartchars);
    $("#tw-char").text(twstartchars);
    $("#post-msg").keypress(function (e) {
        var a=$("#post-msg").val().length; 
        var post = $("#post-msg").val();        
    
        var offset = checkPostForURL(post);
        if ( offset ){
            a = a - offset;
        }
    
        $("#fb-char").text((420-a));
        $("#tw-char").text((140-a));
        if ( a > 120 ){
                $("#tw-char").css('color','red');
                if ( a > 380 ){
                        $("#fb-char").css('color','red');
                }
        }else{
                $("#fb-char").css('color','#333');
                $("#tw-char").css('color','#333');
        }
    });
    $("#post-msg").keyup(function () {
        var a=$("#post-msg").val().length;
        var post = $("post-msg").val();
    
        var offset = checkPostForURL(post); 
        if ( offset ){  
            a = a - offset;
        }
    
        $("#fb-char").text((420-a));
        $("#tw-char").text((140-a));
        if ( a > 120 ){
                $("#tw-char").css('color','red');
                if ( a > 380 ){
                        $("#fb-char").css('color','red');
                }
        }else{
                $("#fb-char").css('color','#333');
                $("#tw-char").css('color','#333');
        }
    
    }); 
});

function checkPostForURL(post){
    var matches = new Array();
    var urlexp = new RegExp("(^|[ \t\r\n])((http|https):(([A-Za-z0-9$_.+!*(),;/?:@&~=-])|%[A-Fa-f0-9]{2}){2,}(#([a-zA-Z0-9][a-zA-Z0-9$_.+!*(),;/?:@&~=%-]*))?([A-Za-z0-9$_+!*();/?:~-]))","g");
    
    if ( post != undefined ){
        if ( urlexp.test(post) ){
               var offset = 0;
               $('.shortenlinks').show();
               matches = post.match(urlexp);
    
               $('#linkstoshort').html('');
 ...