Created
September 17, 2014 19:11
-
-
Save marcamillion/0d365673f9d58a83dbda to your computer and use it in GitHub Desktop.
Word & Character Counter in JS - as originally seen: http://jsfiddle.net/deepumohanp/jZeKu/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #border { | |
| border: 1px solid red; | |
| height: 200px; | |
| width: 100%; | |
| } | |
| textarea { | |
| height: 100%; | |
| width: 100%; | |
| border: 0px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Copy & Paste, Word & Character counter</title> | |
| </head> | |
| <body> | |
| <div id="border"> | |
| <textarea id='text'></textarea> | |
| </div> | |
| <button id="count">Count</button> | |
| <div id="result"> | |
| Words: <span id="wordCount">0</span><br/> | |
| Total Characters(including trails): <span id="totalChars">0</span><br/> | |
| Characters (excluding trails): <span id="charCount">0</span><br/> | |
| Characters (excluding all spaces): <span id="charCountNoSpace">0</span> | |
| </div> | |
| <a href="http://deepumohan.com/projects/word-count/">Word Count</a><br/> | |
| <a href="http://www.w3.org/html/logo/"> | |
| <img src="http://www.w3.org/html/logo/badge/html5-badge-h-solo.png" width="63" height="64" alt="HTML5 Powered" title="HTML5 Powered"> | |
| </a> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| counter = function() { | |
| var value = $('#text').val(); | |
| if (value.length == 0) { | |
| $('#wordCount').html(0); | |
| $('#totalChars').html(0); | |
| $('#charCount').html(0); | |
| $('#charCountNoSpace').html(0); | |
| return; | |
| } | |
| var regex = /\s+/gi; | |
| var wordCount = value.trim().replace(regex, ' ').split(' ').length; | |
| var totalChars = value.length; | |
| var charCount = value.trim().length; | |
| var charCountNoSpace = value.replace(regex, '').length; | |
| $('#wordCount').html(wordCount); | |
| $('#totalChars').html(totalChars); | |
| $('#charCount').html(charCount); | |
| $('#charCountNoSpace').html(charCountNoSpace); | |
| }; | |
| $(document).ready(function() { | |
| $('#count').click(counter); | |
| $('#text').change(counter); | |
| $('#text').keydown(counter); | |
| $('#text').keypress(counter); | |
| $('#text').keyup(counter); | |
| $('#text').blur(counter); | |
| $('#text').focus(counter); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment