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