radlikewhoa / countable Goto Github PK
View Code? Open in Web Editor NEWAdd live paragraph-, word- and character-counting to an HTML element.
Home Page: https://sacha.me/Countable
License: MIT License
Add live paragraph-, word- and character-counting to an HTML element.
Home Page: https://sacha.me/Countable
License: MIT License
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.
Will the tool support Chinese in the future?
I run the demo, found that it dose not support Chinese.
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)
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
hi, in countbale homepage i copied npm install command but return 404 error.
please edit countable name to lowercase style.
thanks
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)
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.
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 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 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.
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 😄
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.
###
for example is not a word. Don't count it. Markdown uses it for headings.
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.
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".
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
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.
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?
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
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?
The site https://sacha.me/Countable and sacha.me/countable are broken.
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))
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.
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, 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!
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.
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 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.
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.
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!
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.
it don't work with any textarea editor as tiny and give zero
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?
An array of jquery elements does not result in "true" for "Array.isArray(elements)". Recommend putting this back to checking elements.length
.
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.
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.