JSFiddle - React, Tailwind, and code Playground

by Amged Osman

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="form-group">
   <label for="postContent" class="col-sm-2 control-label">{$this->lang->words['aon_Post']}</label>
    <div class="col-sm-4">
          <textarea id="postContent" class="form-control" name="Post" rows="3"></textarea>
       <p class="help-block"><span id="character-count">140</span> characters remaining.</p>
    </div>
  </div>

JavaScript

$(function(){

        var totallength = 140;
        $('#postContent').on('keydown, keyup', function(e) {
        var length = $(this).val().length;
        var value  = $(this).val();
      //  var urlPattern = new RegExp("(http|ftp|https)://[\w-]+(\.[\w-]*)+([\w.,@?^=%&amp;:/~+#-]*[\w@?^=%&amp;/~+#-])?");
        var urlPattern = new RegExp("^(?:(?:ht|f)tp(?:s?)\:\/\/|~\/|\/)?(?:\w+:\w+@)?((?:(?:[-\w\d{1-3}]+\.)+(?:com|org|net|gov|mil|biz|info|mobi|name|aero|jobs|edu|co\.uk|ac\.uk|it|fr|tv|museum|asia|local|travel|[a-z]{2}))|((\b25[0-5]\b|\b[2][0-4][0-9]\b|\b[0-1]?[0-9]?[0-9]\b)(\.(\b25[0-5]\b|\b[2][0-4][0-9]\b|\b[0-1]?[0-9]?[0-9]\b)){3}))(?::[\d]{1,5})?(?:(?:(?:\/(?:[-\w~!$+|.,=]|%[a-f\d]{2})+)+|\/)+|\?|#)?(?:(?:\?(?:[-\w~!$+|.,*:]|%[a-f\d{2}])+=?(?:[-\w~!$+|.,*:=]|%[a-f\d]{2})*)(?:&(?:[-\w~!$+|.,*:]|%[a-f\d{2}])+=?(?:[-\w~!$+|.,*:=]|%[a-f\d]{2})*)*)*(?:#(?:[-\w~!$ |\/.,*:;=]|%[a-f\d]{2})*)?$/i");
        var checkMatch = urlPattern.test(value);
        
       
            if (checkMatch) {
               alert("ok");
                /*if(value.match(urlPattern)) {
				   alert("ok");
			    }*/
            }
         $('#character-count').text((totallength - length));
         if (length > 140 ){
          $('#character-count').addClass('label label-danger');
         }
         var url = "{$this->settings['board_url']}/schedule/?do=shorten";
          $.ajax({url: url,success:function(result){
           //$("#character-count").html(result);
          }});
  
        });
        
        
});