JSFiddle - React, Tailwind, and code Playground

by akshatha suchethan

HTML

<textarea name="txtScript" id="word_count" cols="30" rows="10"></textarea>
<br>
Total word count: <span id="display_count">0</span> words. Words left: <span id="word_left">200</span>

JavaScript

$(document).ready(function() {
    $("#word_count").on('keyup', function() {
        var words = this.value.match(/\S+/g).length;
        if (words > 200) {
            // Split the string on first 200 words and rejoin on spaces
            var trimmed = $(this).val().split(/\s+/, 200).join(" ");
            // Add a space at the end to keep new typing making new words
            $(this).val(trimmed + " ");
        }
        else {
            $('#display_count').text(words);
            $('#word_left').text(200-words);
        }
    });
 });