Countable.js — Docs

Available methods

In this section of the documentation, an asterisk (*) denotes a method argument that is optional. Defaults are noted for all optional arguments.

Countable.on(elements, callback, options)

This method enables full live-counting on an element. Use the callback function to process the counted values.

Name
Type
Description
elements
Nodes
All elements that should receive the Countable functionality.
callback
Function
The callback to fire whenever the element's value changes. Refer to the Callback section for more information on this.
options *
Object
An object to modify Countable's behaviour. Refer to the Options section of this documentation for a list of available options and their default values. 
const area = document.getElementById('area')
Countable.on(area, counter => console.log(counter))

Countable.off(elements)

In order to remove the Countable functionality from an element, call Countable.off().

Name
Type
Description
elements
Nodes
All elements whose Countable functionality should be unbound. 
const area = document.getElementById('area')
Countable.off(area)

Countable.count(targets, callback, options)

There might be situations where you only want to count paragraphs, words and characters of an element once, i.e. if you want to display the word count of an article on your blog. In order to achieve this, call Countable.count().

This method is aliased as Countable.count().

Name
Type
Description
targets
Nodes|String
All elements whose text should be counted.
callback
Function
The callback to fire whenever the element's value changes. Refer to the Callback section for more information on this.
options *
Object
An object to modify Countable's behaviour. Refer to the Options section of this documentation for a list of available options and their default values. 
const area = document.getElementById('area')
Countable.count(area, counter => console.log(counter))

Countable.enabled(element)

Countable also provides a handy method to check if live-counting functionality is enabled on an element.

Name
Type
Description
element
Element
A single element. 
const area = document.getElementById('area')
Countable.enabled(area)

Callback

Both Countable.on() and Countable.count() require a callback function. Your callback function is called with a single parameter, an object containing the following properties.

You can refer back to your element using this inside the callback function.

Name
Description
paragraphs
The number of paragraphs.
sentences
The number of sentences.
words
The number of words.
characters
The number of characters.
all
The number of all characters, including spaces and newlines.

Options

Countable.on() and Countable.count() both accept a third argument, an options object that allows you to change how Countable treats certain aspects of your element's text.

Name
Default
Description
hardReturns
false
Use two returns to seperate a paragraph instead of one.
stripTags
false
Strip HTML tags before counting the values.
ignoreReturns
false
Ignore returns when calculating the `all` property.
ignoreZeroWidth
true
Ignore zero-width characters when calculating the values. 
const area = document.getElementById('area')

Countable.on(area, counter => console.log(counter), {
  stripTags: true
})