Skip to content

Instantly share code, notes, and snippets.

@thatdevgirl

thatdevgirl/word-count.html

Created December 19, 2019 20:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thatdevgirl/0c77878e1a0adfbcba017efb1e6e9c2b to your computer and use it in GitHub Desktop.
Save thatdevgirl/0c77878e1a0adfbcba017efb1e6e9c2b to your computer and use it in GitHub Desktop.
Download ZIP
This component provides a simple word counter using jQuery. It counts the number of characters, words, and paragraphs in a given textarea input field.
Raw
word-count.html
<!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>
Raw
word-count.js
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