Having problem with retrieving first 5 words from input-CodePudding

I have the following script which functionality should be to retrieve the first 5 words from one input and type them in a second input, but it isn't working as expected.

$('#review_content').on('keyup change paste click input', function () {
  
  var contentVal = $('#review_content').val();
  var contentValSplit = $('#review_content').val().split(' ');
  
  var headerValSplit = $('#review_header').val().split(' ');
  
  if(headerValSplit.length < 6) {
      if(contentValSplit.length > 6) {
          var $five = contentValSplit[0]   ' '   contentValSplit[1]   ' '   contentValSplit[2]   ' '   contentValSplit[3]   ' '   contentValSplit[4];
          $('#review_header').val($five   "...");
      } else {
          $('#review_header').val(contentVal   "...");
      }
  } 

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>


<input id="review_content">
<input id="review_header">

When I paste longer text (longer than 5 words) the script is just pasting the same text in the second input, but that's not how it should work. It should get only the first 5 words from the whole text and paste only them in the second input. Or if the text is smaller than 5 words, it should synchronously type the letters from the first input in the second one and stop after finishing the fifth word. Any ideas how to do that?

CodePudding user response：

Updated version:

The following code should mach all your requirements

As long as the header does not contain 5 words
Take the first 5 words from the content

I think your if statements were too complex, and for some reason counter working each other. Following code works with only one if statement to reduce complexity. Can be optimized even further (see below).

I pasted When I paste longer text (longer than 5 words) the script and got When I paste longer text... in the second input.

$('#review_content').on('keyup change paste click input', function () {      
  var headerValSplit = $('#review_header').val().split(' ');
  
  if(headerValSplit.length < 6) {
      var contentVal = $('#review_content').val();
      var contentValSplit = $('#review_content').val().split(' ');
      var $five = contentValSplit[0]   ' '   contentValSplit[1]   ' '   contentValSplit[2]   ' '   contentValSplit[3]   ' '   contentValSplit[4];
      $('#review_header').val($five   "...");
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>


<input id="review_content">
<input id="review_header">

Besides that, you can also shorten this line:

var $five = contentValSplit[0]   ' '   contentValSplit[1]   ' '   contentValSplit[2]   ' '   contentValSplit[3]   ' '   contentValSplit[4];

The following would only take the first 5, and then joins them with a space in between:

var $five = contentValSplit.slice(0, 5).join(' ');

Also, the array can simply be reduced to 5 elements, in case you don't need the other elements anyway. Then it would look like this:

contentValSplit.length = 5;
$('#review_header').val(contentValSplit.join(' ')  "...");