Wayne May

I recently had to come up with an Object Oriented approach to a word counter.  I personally LOVE the MooTools framework, which makes OO so much easier, but since the project was mainly developed in jQuery, I had to stick with what was there.  So I developed a little Class called Word Count which can count words, characters, and characters left.

Here is an example of the implementation

HTML:

<h3>Word Count</h3>
<textarea id="TextField_1"></textarea>
<span id="WordCount_1">0</span>
<hr />
<h3>Character Count (with Spaces)</h3>
<textarea  id="TextField_2"></textarea>
<span id="WordCount_2">0</span>
<hr />
<h3>Character Count (ignoring spaces)</h3>
<textarea id="TextField_4"></textarea>
<span id="WordCount_4">0</span>
<hr />
<h3>Character Countdown</h3>
<textarea id="TextField_3"></textarea>
<span id="WordCount_3">1000</span>

Implementation Javascript:

        <script type="text/javascript">
            $(document).ready( function() {
                	$('#TextField_1').keyup( function() {
                        wc = new WordCount();
                        wc.setTarget($(this));
                        wc.setOutput($('#WordCount_1'));
                        wc.getWordCount();
                    });
                    $('#TextField_2').keyup( function() {
                        wc = new WordCount();
                        wc.setTarget($(this));
                        wc.setOutput($('#WordCount_2'));
                        wc.getCharCount(false);
                    });
                    $('#TextField_3').keyup( function() {
                        wc = new WordCount();
                        wc.setTarget($(this));
                        wc.setOutput($('#WordCount_3'));
                        var count = wc.getCharCountdown(1000);
                        if( count == 990 ) alert( 'hit' );
                    });
                    $('#TextField_4').keyup( function() {
                        wc = new WordCount();
                        wc.setTarget($(this));
                        wc.setOutput($('#WordCount_4'));
                        wc.getCharCount(true);
                    });
            });
        </script>

jQuery Class:

/* jQuery Word Counter */
function WordCount() {
	//Private Members & Menthods
	var target;
	var outputTo;

	//Function Custom Trim
	var customTrim = function ( value )	{
	    return value.replace( /^\s+|\s+$/g, '' );
	};

	//Function Update Output
	var updateOutput = function ( value ) {
		outputTo.html( value );
	};
	//Remove Repeating Spaces
	var removeSpaces = function( value ) {
		while ( value.indexOf('  ') > -1 )
		{
			value = value.split('  ').join(' ');
		}
		return value;
	};
	//Public Members & Menthods
	return {
		//Function Set Target Div
		setTarget: function(newTarget) {
			target = newTarget;
		},
		//Function Set Output Div/Span
		setOutput: function(newOutput) {
			outputTo = newOutput;
		},
		//Function Get Word Count
		getWordCount: function() {
			var trimmed = customTrim(target.val());
			trimmed = removeSpaces( trimmed );
			if( trimmed.length < 1 ){
		    	updateOutput( 0 );
		    }
		    else {
		    	updateOutput( trimmed.split(' ').length );
		    }
		},
		//Function Get Character Count
		getCharCount: function( noSpaces ) {

			var spaces = 0;
			var trimmed = target.val();
			if( noSpaces === true )
			{
				trimmed = customTrim(target.val());
				trimmed = removeSpaces( trimmed );
				spaces = trimmed.split(' ').length-1;
			}
		    if( trimmed.length < 1 ){
		    	updateOutput( 0 );
		    }
		    else {
		    	updateOutput( trimmed.length - spaces );
		    }
		},

		//Function Get Character Countdown
		getCharCountdown: function( initialCount ) {
			var trimmed = target.val();
		    if( trimmed.length <= 0 ){
		    	updateOutput( initialCount );
		    }
		    else {
		    	updateOutput( initialCount - trimmed.length );
		    }
			return ( initialCount - trimmed.length );
		},

		//Function Call Word Count
		callWordCount: function( target, output ) {
			if ( target.length > 0) {
				this.setTarget( target );
				this.setOutput( output );
				this.getWordCount();
			}
		}
	};
};