radlikewhoa / countable Goto Github PK

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' ]

It is very common that we could have content of mixed languages such as a paragraph mixed of English and Chinese. A big difference of counting English and CJK words is that CJK does not separate words with spaces (actually "word" and "character" are the same concept in CJK) but they are just adjacent.
For example
The quick brown fox jumps over the lazy dog will be counted as 9 words.
The Chinese translation of that sentence is 敏捷的棕毛狐狸从懒狗身上跃过 it should be counted as 14 words, but the actual result is 1.

This results the issue like TryGhost/Ghost#2656 when writing a blog post of mixed languages.

How can I use countable to solve this problem, I have a HTML like this :

<div class="editor">
      <div class="commentable-section">
       <div class="editable">
       </div>
       <div class="side-comment" >
           </div>
     </div>

     <div class="commentable-section">
       <div class="editable">
       </div>
       <div class="side-comment" >
           </div>
     </div>
</div>

So I like to count only .editable section all together, if I select using .editor class Countable will count also the comments.

The code sample in the 'Countable.count(elements, callback, options)' section written:

Countable.once(area, counter => console.log(counter))

It should be the following as of 3.0 or later

Countable.count(area, counter => console.log(counter))

hi, in countbale homepage i copied npm install command but return 404 error.
please edit countable name to lowercase style.
thanks

I think it would fit perfectly to http://microjs.com/
Instructions are on the bottom (I would do it, but don't want to take credit)

the readme says yarn add Countable (package name starts with upper case). but this package name is wrong.

$ yarn add --dev Countable
yarn add v1.6.0
[1/4] Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/Countable: Not found".

use countable instead of Countable work fine.

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?

HTML tags are still being counted towards the characters with spaces count. Either that counter needs to be written, or the field should be renamed.

Also, it seems like HTML tags are stripped by default with no option to leave them in. That seems like something you'd want to have to opt into rather than not even having an option to opt out...

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?

Right now, it appears that   is not interpreted by the counter as a space. This makes it so html that uses   instead of an actual whitespace character is counted incorrectly.

I think the expected function would be count all whitespace html entities as whitespace in the counter when stripTags: true

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.

There seems to be a bug in IE9's oninput event. The bug causes the event to not fire when characters are deleted (e.g. – backspace, delete, cut).

Countable currently uses oninput if the browser is capable. While IE9 is capable of oninput, it might be better to force IE9 to use the onkeyup event. IE9 does appear to fire onkeyup when characters are deleted.

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: TryGhost/Ghost#1432

I'm happy to provide a PR.

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.

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.

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.

The site https://sacha.me/Countable and sacha.me/countable are broken.

Script fails on Safari 9 with the mentioned error (I observe it built with webpack though).
I believe it is related to support of let: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
(Safari has started to support it from the 10th version)

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:

It doesn't matter on modern browsers (they cache regular expressions), but on older ones, it can be more performant to define regex outside of the function where they're used, so they don't have to be recompiled on every keystroke.

The keydown event fires before the char gets appended, meaning all of your counts will be -1 on browsers which don't let you listen on input.

It would be handy if the script could omit special tags like HTML etc.

So that <a href="http://www.ratherlongandwindyurlhere.com">link</a> would only count the four chars and one word that is "link".

I bower include Countable and concatenate the Countable.js file into a build, but there's no trailing ";" in your library and it causes errors when combined with more than one file.

Is there any way you can add this semicolon to the end?

Hi
I get this error in the chrome console log when loading the page:

Uncaught TypeError: Cannot set property 'Countable' of undefined at Countable.js:406 at Countable.js:16

the site is a foundation 6 site with zurb template

any ideas?

hi

thanks for this great script

if there a way to use a class name to assign countable for present and future elements (added by ajax jquery) ?

thanks in advance for your help

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

### for example is not a word. Don't count it. Markdown uses it for headings.

Hi @RadLikeWhoa

Got this issue on mobile only (Android 7.0.0, Chrome 67)

I have a textarea with maxlength="3", it shows 3 characters but still count (see image below)

Hope anyone fix it soon 😄

If a word begins with a quotation mark in the middle of a sentence, the word doesn't get counted.

Then John replied, "Well isn't this odd."

That should be 7 words, but on your example site it only counts 6.

Will the tool support Chinese in the future？
I run the demo, found that it dose not support Chinese.

it don't work with any textarea editor as tiny and give zero

Is it possible to just have a method like once which instead of taking the element instead just takes the html or word string and processes it?

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!

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.

Hello,

I needed to count sentences for my usage, I think it could be interesting for someones.
Here the code I've used, maybe not perfect but you get the spirit:

sentences: trimmed ? (trimmed.match(/[.?!…\n]+./g) || []).length + 1 : 0

From looking at your code it'd just take setting "main": "Countable.js" in the package.json and running npm publish.

Also if you could publish it as Countable rather than Countable.js it'd be nice too. Neither is taken on npm.

Thanks!

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?

How would I go about adjusting the code to count words in a non-input element?
i.e. an div element with a 'contenteditable' attribute.