[How To] Word Counter (jQuery)

Sanctuary · 07-18-2013, 09:31 AM

If you haven't already, check out my tutorial on how to make a character counter with jQuery (it's almost identical to this one!):
http://www.discussionzone.net/Thread-How...ter-jQuery

Final result demo: http://imsanctuary.info/jq/word/

First, we'll start with our basic HTML doc.

Spoiler:Code:
<!doctype html>
<html lang="en">
<head>
	<title> Word Counter </title>
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
	
</head>
<body>

<script type="text/javascript" src="wordCount.js"></script>

</body>
</html>

Now add a textarea inside the <body> tags, for the text
The code for it would be:

Spoiler:Code:
<textarea id="text" cols="60" rows="15" placeholder="Type here..."></textarea>

Now, we're going to add a <div> to display the number of characters we're typing.
Add this code below (or above, your choice) the <textarea> tags.

Spoiler:Code:
<div>
	<p>Word: <span id="num">0</span></p>
</div>

Now you're going to make a new file named "wordCount.js".
This will be the entire code inside that file (I'll explain what it does with comments):

Spoiler:Code:
$('#text').keyup(function() {              // When we type/del a char, the number changes
	var text = $('#text').val().replace(/\s+/gi, ' ').split(' ').length;        // Taking the number of words from the textarea and giving us the length of it
	$('#num').html(text);             // Displays the number of characters we've typed
});

Save that, and you're done! Smile

[How To] Word Counter (jQuery)
Author Message