This component provides a simple word counter using jQuery. It counts the number of characters, words, and paragraphs in a given textarea input field.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Word Counter</title> | |
| <link rel="stylesheet" type="text/css" href="word-count.css"> | |
| </head> | |
| <body> | |
| <h1>Word Counter</h1> | |
| <div class="word-count"> | |
| <textarea name="content"></textarea> | |
| <p><strong>Character Count:</strong> <span class="chars"></span></p> | |
| <p><strong>Word Count:</strong> <span class="words"></span></p> | |
| <p><strong>Paragraph Count:</strong> <span class="paras"></span></p> | |
| </div> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Word Counter</title> | |
| <link rel="stylesheet" type="text/css" href="word-count.css"> | |
| </head> | |
| <body> | |
| <h1>Word Counter</h1> | |
| <div class="word-count"> | |
| <textarea name="content"></textarea> | |
| <p><strong>Character Count:</strong> <span class="chars"></span></p> | |
| <p><strong>Word Count:</strong> <span class="words"></span></p> | |
| <p><strong>Paragraph Count:</strong> <span class="paras"></span></p> | |
| </div> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Word Counter</title> | |
| </head> | |
| <body> | |
| <h1>Word Counter</h1> | |
| <main class="word-count"> | |
| <textarea name="content"></textarea> | |
| <p><strong>Character Count:</strong> <span class="chars"></span></p> | |
| <p><strong>Word Count:</strong> <span class="words"></span></p> | |
| <p><strong>Paragraph Count:</strong> <span class="paras"></span></p> | |
| </main> | |
| <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> | |
| <script src="word-counter.js"></script> | |
| </body> | |
| </html> | |
| <script type="text/javascript" src="word-counter.js"></script> | |
| </body> | |
| </html> | |
| <script type="text/javascript" src="word-counter.js"></script> | |
| </body> | |
| </html> |
| var wordCounter = { | |
| el: '.word-count', | |
| init: function() { | |
| $('textarea', this.el).on('change', (e) => { this.update( $(e.target).val() ); }); | |
| $('textarea', this.el).on('keyup', (e) => { this.update( $(e.target).val() ); }); | |
| }, | |
| update: function(value) { | |
| $('.chars', this.el).html( this.getCharCount(value) ); | |
| $('.words', this.el).html( this.getWordCount(value.trim()) ); | |
| $('.paras', this.el).html( this.getParaCount(value.trim()) ); | |
| }, | |
| /* | |
| * getCharCount: | |
| * - Calculates the number of characters in the field. | |
| * - Counts *all* characters. | |
| */ | |
| getCharCount: function(value) { | |
| return value.length; | |
| }, | |
| /* | |
| * getWordCount: | |
| * - Calculates the number of words in the field. | |
| * - Words are separated by any number of spaces or a semi-colon. | |
| */ | |
| getWordCount: function(value) { | |
| if (value) { | |
| var regex = /\s+|\s*;+\s*/g; | |
| return value.split(regex).length; | |
| } | |
| return 0; | |
| }, | |
| /* | |
| * getParaCount: | |
| * - Calculates the number of paragraphs in the field. | |
| * - Paragraphs are separated by any number of newline characters. | |
| */ | |
| getParaCount: function(value) { | |
| if (value) { | |
| var regex = /\n+/g; | |
| return value.split(regex).length; | |
| } | |
| return 0; | |
| } | |
| }; | |
| wordCounter.init(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment