DokuWiki

It's better when it's simple

User Tools

Site Tools


tips:wordcounter

Adding a Word/Charcounter to the Editform

Adding the following JavaScript code to your conf/userscript.js (if it does not exist, just create it) will add an automatic word and character counter at the top right of the edit textarea. The count is updated on each keyup event and will show word and character counts of the currently edited section and the whole page.

conf/userscript.js
/**
 * Script to add a wordcounter on the edit form
 * https://www.dokuwiki.org/tips:wordcounter
 *
 * @author Andreas Gohr <andi@splitbrain.org>
 * @author Lars Flintzak
 * @license GPL 2
 */
 
var wordcounter_timeout;
 
function wordcounter(text){
    var list = text.split(/[^\w\-_]+/);
    var len  = list.length;
    if(list[len-1] == '') len--;
    if(list[0] == '') len--;
    if(len < 0) len=0;
    return len;
}
 
function charcounter(text){
    var list = text.split(/[^\w\-_]+/);
    var len  = text.length;
    if(list[len-1] == '') len--;
    if(list[0] == '') len--;
    if(len < 0) len=0;
    return len;
}
 
// replaced next line as per https://www.dokuwiki.org/devel:jqueryfaq [Rik, 2013-10-20]
// addInitEvent(function(){
jQuery(function(){
    // replaced next line as per https://www.dokuwiki.org/devel:jqueryfaq [Rik, 2013-10-20]
    // var form = $('dw__editform');
    var $form = jQuery('#dw__editform'); 
    var form = $form[0];
    if(!form) return;
    var div = document.createElement('div');
    div.id = 'word__counter__output';
    div.style.position = 'absolute';
    div.style.width    = '80px';
    div.style.right = '50px';
    div.style.top   = (findPosY(form.elements.wikitext)+10)+'px';
    div.style.color = '#0a0';
 
    form.appendChild(div);
    var all = wordcounter(form.elements.prefix.value);
        all += wordcounter(form.elements.suffix.value);
 
    var zei_all = charcounter(form.elements.prefix.value);
        zei_all += charcounter(form.elements.suffix.value);
 
    // replaced next line as per https://www.dokuwiki.org/devel:jqueryfaq [Rik, 2013-10-20] 
    // addEvent(form.elements.wikitext,'keyup',function(){
    jQuery(form.elements.wikitext).keyup(function(){
        if(wordcounter_timeout) window.clearTimeout(wordcounter_timeout);
        wordcounter_timeout = window.setTimeout(function(){
            var len = wordcounter(form.elements.wikitext.value);
            var zei = charcounter(form.elements.wikitext.value);
            div.innerHTML =
                'Section: <br />'+
                '&nbsp;&nbsp;'+zei+' chars<br />'+
                '&nbsp;&nbsp;'+len+' words<br />'+
                'Total: <br />'+
                '&nbsp;&nbsp;'+(zei_all+zei)+' chars<br />'+
                '&nbsp;&nbsp;'+(all+len)+' words';
        },1000);
        return true;
    });
});

Discussion

Can this be turned into a plugin that generates statistics on the number of words in the entire DokuWiki environment? I would like a feature similar to Microsoft Word's Word Counter tool so I can have some measurement of my progress. –Steven Vance

I can't get any of the word count scripts to work, either as userscript.js, as a plugin, or as a greasemonkey script. Is there anything that works with “Binky?” [Kevin Dunn]

same problem as [Kevin Dunn] is there a way to run this with HRUN? or can i check somehow if userscript.js is already running with or without errors? Thanks [kbsit]

Another alternative solution is using a good word count & character count tool freely available on the web, such as Word Count Tools ,Word Counter ,Character Count Tool or Counting Characters.

Issue

ReferenceError: findPosY is not defined

a revised version

I changed the script to add wordcounter below the summary bar. Cause I'm a newbie on javascript, I just cut out some unresolved parts (counting for section, floating on textarea) 8-o. It works on 2014-05-05a Ponder Stibbons. – In-Bon Kuh

conf/userscript.js
/**
 * Script to add a wordcounter below the summary bar
 * https://www.dokuwiki.org/tips:wordcounter
 *
 * @author Andreas Gohr <andi@splitbrain.org>
 * @author Lars Flintzak
 * @license GPL 2
 */
 
var wordcounter_timeout;
 
function wordcounter(text){
    var list = text.split(/[^\w\-_]+/);
    var len  = list.length;
    if(list[len-1] == '') len--;
    if(list[0] == '') len--;
    if(len < 0) len=0;
    return len;
}
 
function charcounter(text){
    var list = text.split(/[^\w\-_]+/);
    var len  = text.length;
    if(list[len-1] == '') len--;
    if(list[0] == '') len--;
    if(len < 0) len=0;
    return len;
}
 
jQuery(function(){
    var $form = jQuery('#dw__editform'); 
    var form = $form[0];
    if(!form) return;
 
    var div = document.createElement('div');
    div.id = 'word__counter__output';
    div.style.color = '#0a0';
    div.style.padding = '0.2em 0.2em';
 
    var $summary = jQuery('.editBar .summary');
    var summary = $summary[0];
    summary.appendChild(div);
 
    jQuery(form.elements.wikitext).keyup(function(){
        if(wordcounter_timeout) window.clearTimeout(wordcounter_timeout);
        wordcounter_timeout = window.setTimeout(function(){
            var len = wordcounter(form.elements.wikitext.value);
            var zei = charcounter(form.elements.wikitext.value);
            div.innerHTML =
                'text count: &nbsp;'+(zei)+' chars, &nbsp&nbsp;'
                +(len)+' words';
        },1000);
        return true;
    });
});
tips/wordcounter.txt · Last modified: 2021-03-25 12:18 by tylergloria

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki