从输入中检索前 5 个单词时遇到问题

Question

我有以下脚本，其功能应该是从一个输入中检索前 5 个单词并在第二个输入中键入它们，但它没有按预期工作。

$('#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">

当我粘贴较长的文本（超过 5 个字）时，脚本只是在第二个输入中粘贴相同的文本，但这不是它应该如何工作的。它应该只从整个文本中获取前 5 个单词，并仅将它们粘贴到第二个输入中。或者如果文本小于5个单词，它应该在第二个输入中同步输入第一个输入的字母，并在完成第五个单词后停止。任何想法如何做到这一点？

Answer 1

更新版本：

下面的代码应该满足你的所有要求

• 只要标题不包含 5 个单词
• 从内容中取出前 5 个单词

我认为您的 if 语句太复杂了，并且由于某种原因相互抵消。以下代码仅适用于一个 if 语句以降低复杂性。可以进一步优化（见下文）。

我在第二个输入中粘贴了When I paste longer text (longer than 5 words) the script 并得到了When I paste longer text...。

$('#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">

---

除此之外，您还可以缩短此行：

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

以下将只取前 5 个，然后用中间的空格连接它们：

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

此外，数组可以简单地减少到 5 个元素，以防您不需要其他元素。然后它看起来像这样：

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