從文本框中刪除多餘的單詞

Question

我有一個幾乎完成的腳本，但我無法弄清楚最後一點在這裏。該腳本旨在限制可以輸入到文本區域中的單詞的數量，並且如果它們超過了單詞限制，則會刪除這些額外的單詞。我有超過最大標記爲超額的字數。例如，如果您要輸入102個單詞，那麼過量將是2.如何從文本區域移除這兩個單詞？

jQuery(document).ready(function($) { 
    var max = 100; 
    $('#text').keyup(function(e) { 
     if (e.which < 0x20) { 
      return; 
     } 

     var value = $('#text').val(); 
     var regex = /\s+/gi; 
     var wordCount = value.trim().replace(regex, ' ').split(' ').length; 

     if (wordCount == max) { 
      // Reached max, prevent additional. 
      e.preventDefault(); 
     } else if (wordCount > max) { 


      <!--Edited to show code from user3003216--> 
      <!--Isn't working like this, textarea doesn't update.--> 

      var overage = wordCount - max; 
      var words = value.split(' '); 
      for(var i = 0; i<overage; i++){ 
       words.pop(); 
      } 

     } 
    });   
}); 

Answer 1

最簡單的方法就是計算keypress上的字數並從那裏開始。檢查是否有更多的單詞超過允許的數量。如果是這樣，請刪除所有多餘的單詞：while (text.length > maxWords)。然後，只需將文本框的值替換爲更新的文本。

fiddle

的JavaScript

var maxWords = 10; 
$("#myText").keypress(function (event) { 
    var text = $(this).val().split(" "); // grabs the text and splits it 
    while (text.length > maxWords) {  // while more words than maxWords 
     event.preventDefault(); 
     text.pop(); // remove the last word 
     // event.preventDefault() isn't absolutely necessary, 
     // it just slightly alters the typing; 
     // remove it to see the difference 
    } 
    $(this).val(text.join(" ")); // replace the text with the updated text 
}) 

HTML

<p>Enter no more than 10 words:</p> 
<textarea id="myText"></textarea> 

CSS

textarea { 
    width: 300px; 
    height: 100px;  
} 

您可以通過粘貼超過maxWords（在這種情況下爲10-字符到textarea並按空格）輕鬆測試它是否正常工作。所有額外的單詞將被刪除。

Answer 2

以及它會更好，所以這裏使用Java腳本你去：

var maxWords = 20; 
event.rc = true; 
var words = event.value.split(" "); 
if (words.length>maxWords) { 
    app.alert("You may not enter more than " + maxWords + " words in this field."); 
    event.rc = false; 
} 

Answer 3

你可以把下面的代碼到您的else if聲明..

else if (wordCount > max) { 
    var overage = wordCount - max; 
    var words = value.split(' '); 
    for(var i = 0; i<overage; i++){ 
     words.pop(); 
    } 
} 

如果你想從words得到您的字符串，您可以使用join，如下所示：

str = words.join(' '); 

Answer 4

jsFiddle Demo

您可以使用val重新值文本框。數組slice方法將允許您從數組中拉出前100個單詞。然後加入一個空格，然後將它們粘在文本框中。

$(document).ready(function($) { 
    var max = 100; 

    $('#text').keyup(function(e) { 

     if (e.which < 0x20) { 
      return; 
     } 

     var value = $('#text').val(); 
     var words = value.trim().split(/\s+/gi); 
     var wordCount = words.length; 

     if (wordCount == max) { 
      // Reached max, prevent additional. 
      e.preventDefault(); 
     } else if (wordCount > max) { 
      var substring = words.slice(0, max).join(' '); 
      $("#text").val(substring + ' '); 
     } 
    });   
}); 

Answer 5

雖然你已經接受了答案，我想我也許能提供一個稍微更完善的版本：

function limitWords(max){ 
    // setting the value of the textarea: 
    $(this).val(function(i,v){ 
    // i: the index of the current element in the collection, 
    // v: the current (pre-manipulation) value of the element. 

    // splitting the value by sequences of white-space characters, 
    // turning it into an Array. Slicing that array taking the first 10 elements, 
    // joining these words back together with a single space between them: 
     return v.split(/\s+/).slice(0,10).join(' '); 
    }); 
} 

$('#demo').on('keyup paste input', limitWords); 

JS Fiddle demo。

參考文獻：

• 的JavaScript：
  • Array.prototype.join()。
  • Array.prototype.slice()。
  • String.prototype.split()。
• 的jQuery：
  • on()。
  • val()。