At least on Windows 7. The gradient for the download button is broken:

Also, the counters show stats for the prompt text, when that doesn't happen in Firefox:

Hi, great script!

It would be great if text like "Bonjour !" wasn't counted as two words. You would have to pass the string through a regExp that removed common punctuation characters before splitting into words.

Also, line 66 can be rewritten without the .split i.e. from this:

characters: str ? str.replace(/\s/g, '').split('').length : 0

to this:

characters: str ? str.replace(/\s/g, '').length : 0

Again, great script - apologies for me being pedantic about details like this!

I was using once before every time an update happened which was fine, but I thought it would probably be easier to use live, but it doesnt update.

The element its targeting is driven by a knockout observable like so:

<div id="preview" data-bind="text: someTextObservable"></div>

So that div will change its content every time someTextObservable changes, now I notice in the source code that it is looking for key pressed based events, whereas in this case those would not apply as its a div not an input.

I know there are some events for mutations part of the newer html spec so not sure if you are fussed about supporting them or not, I can go back to just using once whenever it updates which is fine, but just wanted to raise this incase you wanted to extend support.

When using countable on an li element with a value, the following error occurs (in Chrome):

Uncaught TypeError: original.replace is not a function

Tracing this back it's because the li element value is a number, and obviously the replace function belongs to the string prototype. Adding:

   if(typeof(original) !== 'string'){
        original = "";
   }

around line 177 is a kludgy fix... but not great.

This is a feature request to ignore zero width space characters (http://www.fileformat.info/info/unicode/char/200b/index.htm) in the character and word count.

HTML text editors such as Redactor (http://imperavi.com/redactor/) sometimes insert zero width space characters.

I also would like to contribute by sending send a pull request but would like to discuss the functionality first.

~~Countable does not seem to recognise newline characters (line feed / carriage return). If this is intentional,~~ I would like to suggest a new option to optionally enable counting newline characters as well (which are currently omitted in https://github.com/RadLikeWhoa/Countable/blob/master/Countable.js#L190).

Related: https://github.com/TryGhost/Ghost/issues/1432

I'm happy to provide a PR.

I needed to get my mind off of work so I went ahead and fixed the 3 open issues. You can check it out at http://jsfiddle.net/j6nkw/3/

I think this could do with a minified version.

Specific Changes / issues

1. The word counter wasn't greedy enough so it would match " but not "x"
2. Excluding HTML tags required a new RegularExpression. Made it selectable by looking for an omit attribute if it is "on" then html tags aren't counted.
3. Since punycode and Countable are both MIT licensed took the ucs2decode function and used to correct counting for Unicode characters.

See http://pastebin.com/raw.php?i=bZ7dbreC for some example characters that get miscounted. (GitHub won’t let me post them here.)

Perhaps this can help: http://mathiasbynens.be/notes/javascript-encoding It explains the problem in more detail and also offers a solution. You could use Punycode.js to make it really easy.

Could you please publish 3.0.1 on npm ?

npm info countable

{ name: 'countable',
  description: 'Countable is a JavaScript library to add live paragraph-, word- and character-counting to an HTML element.',
  'dist-tags': { latest: '3.0.0' },
  versions: [ '2.0.2', '2.1.0', '2.1.1', '3.0.0' ]

The MDN docs and most browsers document functions such as getElementsByClassName and getElementsByTagName returning HTMLCollections rather than node lists. Unfortunately this doesn't pass the current validation which only checks for [object NodeList]. Something like:

  function _validateArguments (elements, callback) {
    var nodes = Object.prototype.toString.call(elements),
        validObject = nodes === '[object NodeList]' || nodes === '[object HTMLCollection]',
        elementsValid = elements && ((validObject && elements.length) || (elements.nodeType === 1)),
        callbackValid = callback && typeof callback === 'function'

    if ('console' in window && 'warn' in console) {
      if (!elementsValid) console.warn('Countable: No valid elements were found')
      if (!callbackValid) console.warn('Countable: "' + callback + '" is not a valid callback function')
    }

    return elementsValid && callbackValid
  }

But I'm not sure how the tests would work since they seem to be designed for single elements.

… HTML elements as word separators when stripTags option set.

Fixes https://github.com/RadLikeWhoa/Countable/issues/38 by replacing the html entities with their unicode equivalent.

Also parses html block elements as word separators, e.g., <div>one</div><div>two</div> counts as two words, <span>one</span><span>two</span> still counts as just one word.

The default implementation of below does not respect the ignoreReturns: true:

$( window ).on('load', function() {
    Countable.on( 
        document.getElementById('my_area'), 
        counter => console.log(counter),
        {
            ignoreReturns: true
        }
    )  
});

Doing so, the all property still counts returns (enter/newline)

Thus, we always get a wrong character count when doing this:

$( window ).on('load', function() {
    Countable.on( 
        document.getElementById('my_area'), 
        counter => document.getElementById('my_result').innerHTML = counter.all.toString(),
        {
            ignoreReturns: true
        }
    )  
});

The doc clearly states that we shall use that option to Ignore returns when calculating the all property.

Suggestions?

Hi first of all good job on this plugin, the thing is for me, is not working if I have on the same text-area a char counter and your plugin implemented, and the first logic for character counting is not working, no error is thrown Is there any solution for this?

When trying to build an app using Countable, the build fails, seemingly because there is no es5 version of the library. Can an es5 file be auto-compiled into the dist?

An array of jquery elements does not result in "true" for "Array.isArray(elements)". Recommend putting this back to checking elements.length.