Javascript Bug in Capitalizing First Letter of Each Word in Textarea

Question

I am a small blogger and I don't have enough knowledge about Javascript. I have a two problems related to capitalize first letter of each word while typing in textarea. Some where on Stack Overflow I've found the js code given below. It's working fine but there is a bug in that.

Problem 1: When a user type in single line it capitalize all words but it does NOT capitalize first word after every line break or say when user hits the Enter to go to next line it keeps first letter small not capitalize.

Problem 2: If user put a comma or full stop right before the word, then it also does not capitalize the word.

What I Want! In any condition all the words should be capitalize and automatically provide a space before words if user does not give space after comma, full stop, hyphen, exclamation mark and rest of the basic special characters.

Live Example

Following is my code:

 $(window).load(function() { $.fn.capitalize = function() { $.each(this, function() { var split = this.value.split(' '); for (var i = 0, len = split.length; i < len; i++) { split[i] = split[i].charAt(0).toUpperCase() + split[i].slice(1).toLowerCase(); } this.value = split.join(' '); }); return this; }; $('input#author').on('keyup', function() { $(this).capitalize(); }).capitalize(); $('textarea#comment').on('keyup', function() { $(this).capitalize(); }).capitalize(); }); $(window).load(function() { $('input#email').keyup(function() { $(this).val($(this).val().toLowerCase()); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <textarea minlength="120" id="comment" name="comment" cols="45" rows="8" aria-required="true" placeholder="Shayari"></textarea>

Answer 1

You could try to update your code as following

$(window).load(function() {

  $.fn.capitalize = function() {
    $.each(this, function() {
      var lines = this.value.split('\n');
      for (var i = 0; i < lines.length; i++) {
          var split = lines[i].split(' ');
          for (var j = 0, len = split.length; j < len; j++) {
            split[j] = split[j].charAt(0).toUpperCase() + split[j].slice(1).toLowerCase();
          }

          lines[i] = split.join(' ');
      }
      this.value = lines.join('\n');
    });
    return this;
  };

  $('input#author').on('keyup', function(e) {
    var $control = $(e.currentTarget);
    // Give space after comma, full stop, hyphen, exclamation mark 
    var newValue = $control.val().replace(/([\,\.\-\!])(\w)/g, '$1 $2');
    $control.val(newValue);
    $(this).capitalize();
  }).capitalize();

  $('textarea#comment').on('keyup', function(e) {
    var $control = $(e.currentTarget);
    // Give space after comma, full stop, hyphen, exclamation mark 
    var newValue = $control.val().replace(/([\,\.\-\!])(\w)/g, '$1 $2');
    $control.val(newValue);
    $(this).capitalize();
  }).capitalize();

  $('input#email').on('keyup', function() {
    $(this).val($(this).val().toLowerCase());
  });      

});

I've created an example at https://jsfiddle.net/r4w43L2k/5/ , you could check it.