Remove excess words from a textbox

Question

I have a script which is almost complete but I can't figure out the last bit here. The script is meant to limit the amount of words that can be entered into a text area and if they go over the word limit these extra words are removed. I have the amount of words beyond the max labeled as overage. For instance, if you were to enter in 102 words, then the overage would be 2. How would I remove those two words from the text area?

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

well it would be better to use java script so here you go:

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 2

You can put below code into your else if statement..

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

And if you want to get your string back from that words, you can use join like below:

str = words.join(' ');

Answer 3

The easiest way to approach this is just to count the number of words on keypress and go from there. Check whether there are more words than the amount allowed. If so, remove all the excess words: while (text.length > maxWords). Then just replace the value of the text box with the updated text.

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;     
}

You can easily test whether it works by pasting more than maxWords—in this case, 10—words into the textarea and pressing space. All the extra words will be removed.

Answer 4

jsFiddle Demo

You can use val to re-value the text-box. The array slice method will allow you to pull the first 100 words out of the array. Then just join them with a space and stick them back in the text-box.

$(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

While you've already accepted an answer I thought I might be able to offer a slightly more refined version:

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.

References:

• JavaScript:
  • Array.prototype.join().
  • Array.prototype.slice().
  • String.prototype.split().
• jQuery:
  • on().
  • val().