Conteggi caratteri e parole

Gli argomenti di questa pagina

  • Conteggio caratteri mancanti e caratteri usati in un controllo di testo
  • Conteggio caratteri mancanti direttamente sul foglio
  • Scrive i caratteri mancanti in un tag HTML distinto da un preciso ID
  • Numero dei caratteri ed il numero delle parole con funzione split()
  • Numero dei caratteri ed il numero delle parole con metodo match()
  • Scrivere in un ID anzichè in un controllo del form

In questa pagina raccolgo alcuni script che, tramite funzioni JS, controllano le attività che si svolgono in un controllo posto in un form.

Conteggio caratteri mancanti e caratteri usati in un controllo di testo

La funzione conta_mancanti() restituisce sia il numero di caratteri mancanti che quelli usati.
La funzione viene richiamata usando gli eventi onkeyup, onblur e onfocus dell'area di testo.
Perchè la funzione JS conta_mancanti() sia correttamente utilizzata sono necessari alcuni requisiti:
il form ha il nome "modulo"
l'area di testo da monitorizzare ha il nome "testo" e tramite gli eventi onkeyup, onblur e onfocus invoca la funzione
la casella di testo che riceve il conteggio dei caratteri ha il nome "quanti".
Se a qualcuno di questi controlli viene cambiato il nome, occorre intervenire anche nella funzione JS per renderla compatibile col form che si sta monitorizzando.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function conta_mancanti(){
    var lenMax=50
    var strlength=document.modulo.testo.value.length
    total = eval("50")
    char = eval(document.modulo.testo.value.length)
    left = eval(total - char)
    if (left <= "-1") {
        var dif = eval(char - lenMax)
        var value = document.modulo.testo.value.substr(0,char-dif);
        document.modulo.testo.value = value;
        var left = "0"
    }
    document.modulo.quanti.value=left + ' (' + char + ' caratteri inseriti)'
}

1
2
3
4
5
6
7
8
9
<form name="modulo" method="post" action="">
<textarea name="testo" 
onkeyup="conta_mancanti()" 
onblur="conta_mancanti()" 
onfocus="conta_mancanti()" 
rows="5" cols="34"></textarea>
<br />
<input type="text" name="quanti" />max 50
</form>

max 50

Conteggio caratteri mancanti direttamente sul foglio

La funzione displaylimit() restituisce il numero di caratteri mancanti.
La funzione usa a sua volta altre due funzioni che svolgono alcuni controlli sul lavoro che si sta eseguendo.
La funzione displaylimit() viene richiamata nel punto del foglio dove si desidera visualizzarne il risultato tramite un piccolo script JS che richiama la funzione e viene collocato in quel punto.
L'invocazione della funzione displaylimit() avviene usando alcuni parametri:
il nome referenziato della casella di testo, cioè indicando il nome del form ed il nome della casella di testo
il numero di caratteri da accettare.
Se si cambia il nome del form e/o della casella di testo, occorre indicarli anche nei parametri da inviare alla funzione.
Il vantaggio di questa soluzione è che il form ed il codice che richiama la funzione viene scritto tutto nella pagina in uso.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var ns6=document.getElementById&&!document.all
function restrictinput(maxlength,e,placeholder){
    if (window.event&&event.srcElement.value.length>=maxlength)
        return false
    else if (e.target&&e.target==eval(placeholder)&&e.target.value.length>=maxlength){
        var pressedkey=/[a-zA-Z0-9\.\,\/]/ 
        if (pressedkey.test(String.fromCharCode(e.which)))
            e.stopPropagation()
    }
}

function countlimit(maxlength,e,placeholder){
    var theform=eval(placeholder)
    var lengthleft=maxlength-theform.value.length
    var placeholderobj=document.all? document.all[placeholder] : document.getElementById(placeholder)
    if (window.event||e.target&&e.target==eval(placeholder)){
        if (lengthleft<0)
            theform.value=theform.value.substring(0,maxlength)
        placeholderobj.innerHTML=lengthleft
    }
}

function displaylimit(theform,thelimit){
    var limit_text='<b><span id="'+theform.toString()+'">'+thelimit+'</span></b> caratteri rimanenti.'
    if (document.all||ns6)
        document.write(limit_text)
    if (document.all){
        eval(theform).onkeypress=function(){ return restrictinput(thelimit,event,theform)}
        eval(theform).onkeyup=function(){ countlimit(thelimit,event,theform)}
    } else if (ns6){
        document.body.addEventListener('keypress', function(event) { restrictinput(thelimit,event,theform) }, true); 
        document.body.addEventListener('keyup', function(event) { countlimit(thelimit,event,theform) }, true); 
    }
}

1
2
3
4
5
6
7
<form name="sampleform" method="post" action="">
<textarea name="prova" rows="5" cols="34"></textarea><br />
</form>
<p>Qui sotto i caratteri mancanti</p>
<script language="JavaScript" type="text/javascript">
displaylimit("document.sampleform.prova",50)
</script>

Qui sotto i caratteri mancanti

Scrive i caratteri mancanti in un tag HTML distinto da un preciso ID

La funzione displayRemLength() restituisce il numero di caratteri mancanti al limite fissato e lo scrive in un tag HTML definito tramite uno specifico ID.
La funzione displayRemLength() viene richiamata usando l'evento onkeyup dell'area di testo.
In realtà l'evento onkeyup richiama due funzioni:
evalEntryLength() che calcola il numero di caratteri coi parametri: il nome del campo ed il numero massimo di caratteri accettabili. Gli altri parametri sono solo di servizio.
displayRemLength() che stampa il numero di caratteri rimanenti; il parametro esposto come argomento indica il nome dell'ID del tag dove scrivere il risultato.
Il risultato viene scritto nel tag <span id="charCount">. Se si vuole una particolare formattazione per il numero scritto dal JS nello <span>, basta dare delle regole CSS per l'ID charCount: #charCount{...........}.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
charCount = 1;
maxCharCount = 2000;
function displayRemLength(fieldName) {
    remField = document.getElementById(fieldName);
    remField.innerHTML = (maxCharCount - charCount > 0) ? maxCharCount - charCount : 0;
}

function evalEntryLength(curField, maxLimit, discardXtra, errClass, normalClass) {
    maxCharCount = maxLimit;
    var fieldLength = getCharCount(curField);    
    if (fieldLength > maxLimit) {
        if (errClass != "") {
            curField.className = errClass;
        }
        if (discardXtra) {
            showAllowedLength(curField, maxLimit);
        }
    } else if (normalClass != "") {
        curField.className = normalClass;
    }
}

function getCharCount(curField) {
    charCount = curField.value.length;    
    return charCount;
}

function showAllowedLength(curField, maxLimit) {
    curField.value = curField.value.substr(0, maxLimit);
    window.status = curField.value;
}

1
2
3
4
5
6
<form name="sample" method="post" action="">
<textarea name="prova" 
onkeyup="evalEntryLength(this, 50, true, '', ''); displayRemLength('charCount');"  
rows="5" cols="34"></textarea><br />
</form>
<span id="charCount">50</span> caratteri rimanenti

50 caratteri rimanenti

Numero dei caratteri ed il numero delle parole con funzione split()

La funzione countwords() stampa in due distinte caselle di testo il numero di parole ed il numero dei caratteri inseriti in una area di testo.
La funzione countwords() viene richiamata usando gli eventi onkeyup, onblur e onfocus dell'area di testo senza alcun parametro.
Per questo motivo occorre che ci sia corrispondenza tra il nome del form, dell'area di testo e delle due caselle di testo disegnate nell'HTML della pagina con quelli che legge la funzione. Se un nome di uno qualsiasi di questi elementi viene cambiato, occorre cambiarlo sia nell'HTML della pagina che nello script JS.

La funzione countwords() esegue due lavori:
il conteggio delle parole contenute nella stringa in esame
il conteggio dei caratteri nella stessa stringa.
Mentre per contare i caratteri il problema si risolve contando la lunghezza dell'oggetto string tramite la proprietà length, per contare le parole ho trovato con l'aiuto di un esperto l'uso della funzione "split" associato ad una espressione regolare. Con questa funzione viene usata la funzione "split". Si possono mettere tutti i caratteri per i quali si vuole splittare la frase all'interno delle parentesi quadre. In questa funzione si aggiunge "l'apostrofo" ed altri caratteri di punteggiatura oltre agli "spazi vuoti". Questo metodo tuttavia non è molto performante usandolo così com'è. Infatti se ci fossero spazi all'inizio e alla fine, o se la punteggiatura non venisse spaziata, il conteggio delle parole non sarebbe corretto. Di conseguenza occorre aggiungere altro codice usando un ciclo FOR per controllare l'esistenza di eventuali sottostringhe vuote.

1
2
3
4
5
6
7
8
9
10
11
12
function countwords() {
    var formtext=document.theform.text.value;
    var righe=formtext.split(/[\s'.,:;!?]+/g);
    var somma=0;
    for(i=0;i<righe.length;i++) {
        if (righe[i] != "") {
            somma++;
        }
    }    
    document.theform.parole.value= somma; 
    document.theform.caratteri.value= formtext.length;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form method="post" name="theform" action="">
<table>
<tr>
<td colspan="2">
<textarea name="text" 
onkeyup="countwords()" 
onblur="countwords()" 
onfocus="countwords()" 
rows="5" cols="34"></textarea>
</td>
</tr>
<tr>
<td>Num parole</td>
<td>Num car</td>
</tr>
<tr>
<td><input type="text" name="parole" /></td>
<td><input type="text" name="caratteri" /></td>
</tr>
</table>
</form>
Num parole Num car

Numero dei caratteri ed il numero delle parole con metodo match()

1
2
3
4
5
6
function count_all_words() {
    var formtext=document.my_form.messaggio.value;
    var re=/\b[\wàèéìòù@-]+\b/gi
    document.my_form.nun_words.value = re.test(formtext) ? formtext.match(re).length : 0;
    document.my_form.num_char.value= formtext.length;
}

Attenzione: il browser potrebbe mostrare in modo non corretto la espressione regolare che si deve usare:
la giusta sintassi è la seguente:
var re=/\b[\wàèéìòù@-]+\b/gi

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form method="post" name="my_form" action="">
<table>
<tr>
<td colspan="2">
<textarea name="messaggio" 
onkeyup="count_all_words()" 
onblur="count_all_words()" 
onfocus="count_all_words()" 
rows="5" cols="34"></textarea>
</td>
</tr>
<tr>
<td>Num parole</td>
<td>Num car</td>
</tr>
<tr>
<td><input type="text" name="nun_words" /></td>
<td><input type="text" name="num_char" /></td>
</tr>
</table>
</form>
Num parole Num car

Scrivere in un ID anzichè in un controllo del form

Questa è la funzione countwords() modificata per scrivere il risultato direttamente nella pagina anzichè in un coltrollo del form. In questo caso alla funzione è stato modificato il nome per farla convivere con le altre funzioni di questa pagina.

1
2
3
4
5
6
7
8
9
10
11
12
function countwords_in_span() {
    var formtext=document.new_form.new_text.value;
    var righe=formtext.split(/[\s'.,:;!?]+/g);
    var somma=0;
    for(i=0;i<righe.length;i++) {
        if (righe[i] != "") {
            somma++;
        }
    }
    document.getElementById('parole').innerHTML = somma;
    document.getElementById('caratteri').innerHTML = formtext.length;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form method="post" name="new_form" action="">
<table>
<tr>
<td colspan="2">
<textarea name="new_text" 
onkeyup="countwords_in_span()" 
onblur="countwords_in_span()" 
onfocus="countwords_in_span()" 
rows="5" cols="34"></textarea>
</td>
</tr>
</table>
</form>
Parole inserite: <strong><span id="parole">0</span></strong><br />
Caratteri inseriti: <strong><span id="caratteri">0</span></strong>
Parole inserite: 0
Caratteri inseriti: 0

 

 



settore tecnico il sito di lorettabweb il Forum di sostegno
il forum il forum il forum