Nombre de mots Javascript pour tout élément DOM donné

Je me demandais si il existe un moyen de compter les mots à l'intérieur d'un div par exemple. Disons que nous avons un div comme ceci:

<div id="content">
hello how are you?
</div>

Alors la JS fonction retourne un entier de 4.

Est-ce possible? Je l'ai fait avec des éléments de formulaire, mais ne semble pas possible de le faire pour les non-forme.

Des idées?

source d'informationauteur givp

javascript

31

Si vous savez que la DIV est seulement va avoir de texte, vous pouvez KISS:
```
var count = document.getElementById('content').innerHTML.split(' ').length;
```
Si le div peut avoir des balises HTML, vous allez avoir à parcourir ses enfants à la recherche pour les nœuds de texte:
```
function get_text(el) {
    ret = "";
    var length = el.childNodes.length;
    for(var i = 0; i < length; i++) {
        var node = el.childNodes[i];
        if(node.nodeType != 8) {
            ret += node.nodeType != 1 ? node.nodeValue : get_text(node);
        }
    }
    return ret;
}
var words = get_text(document.getElementById('content'));
var count = words.split(' ').length;
```
C'est la même logique que la bibliothèque jQuery utilise pour obtenir l'effet de son text() fonction. jQuery est une assez impressionnante bibliothèque qui dans ce cas n'est pas nécessaire. Cependant, si vous vous retrouver à faire beaucoup de manipulation du DOM ou AJAX, alors vous pourriez vouloir vérifier.

MODIFIER:

Comme l'a noté Gumbo dans les commentaires, la façon dont nous coupent les cordes au-dessus de compterait deux espaces consécutifs comme un mot. Si vous vous attendez à ce genre de chose (et même si vous ne le faites pas), il est probablement préférable de l'éviter par fractionnement sur une expression régulière plutôt que sur un simple caractère d'espace. En gardant cela à l'esprit, au lieu de faire au-dessus de split, vous devez faire quelque chose comme ceci:
```
var count = words.split(/\s+/).length;
```
La seule différence étant que nous sommes de passage à la split fonction.
6

Paolo Bergantino deuxième solution est incorrecte pour les chaînes vides ou des chaînes qui commencent ou se terminent par des espaces. Voici la solution:
```
var count = !s ? 0 : (s.split(/^\s+$/).length === 2 ? 0 : 2 +
    s.split(/\s+/).length - s.split(/^\s+/).length - s.split(/\s+$/).length);
```
Explication: Si la chaîne est vide, il y a zéro des mots; Si la chaîne a seulement des espaces, il y a zéro des mots; d'Autre, compter le nombre d'espaces de groupes sans ceux du début et de la fin de la chaîne.
5
```
string_var.match(/[^\s]+/g).length
```
semble que c'est une meilleure méthode que la
```
string_var.split(/\s+/).length
```
Au moins, il ne comptera pas "mot" en 2 mots -- ['mot'] au lieu de ['mot', "]. Et il n'a pas vraiment besoin d'un drôle d'ajouter-sur la logique.
4

Ou simplement l'utiliser Countable.js à faire le travail le plus dur 😉

document.deepText= function(hoo){
    var A= [];
    if(hoo){
        hoo= hoo.firstChild;
        while(hoo!= null){
            if(hoo.nodeType== 3){
                A[A.length]= hoo.data;
            }
            else A= A.concat(arguments.callee(hoo));
            hoo= hoo.nextSibling;
        }
    }
    return A;
}

Je serais assez stricte sur ce qu'un mot est-

function countwords(hoo){
    var text= document.deepText(hoo).join(' ');
    return text.match(/[A-Za-z\'\-]+/g).length;
}
alert(countwords(document.body))

Ou vous pouvez faire ceci:

function CountWords (this_field, show_word_count, show_char_count) {
if (show_word_count == null) {
show_word_count = true;
}
if (show_char_count == null) {
show_char_count = false;
}
var char_count = this_field.value.length;
var fullStr = this_field.value + " ";
var initial_whitespace_rExp = /^[^A-Za-z0-9]+/gi;
var left_trimmedStr = fullStr.replace(initial_whitespace_rExp, "");
var non_alphanumerics_rExp = rExp = /[^A-Za-z0-9]+/gi;
var cleanedStr = left_trimmedStr.replace(non_alphanumerics_rExp, " ");
var splitString = cleanedStr.split(" ");
var word_count = splitString.length -1;
if (fullStr.length <2) {
word_count = 0;
}
if (word_count == 1) {
wordOrWords = " word";
} else {
wordOrWords = " words";
}
if (char_count == 1) {
charOrChars = " character";
} else {
charOrChars = " characters";
}
if (show_word_count & show_char_count) {
alert ("Word Count:\n" + "    " + word_count + wordOrWords + "\n" + "    " + char_count + charOrChars);
} else {
if (show_word_count) {
alert ("Word Count:  " + word_count + wordOrWords);
} else {
if (show_char_count) {
alert ("Character Count:  " + char_count + charOrChars);
}
}
}
return word_count;
}

0

La get_text fonction de Paolo Bergantino la réponse ne fonctionnent pas correctement pour moi quand deux nœuds enfants ont aucun espace entre eux. par exemple <h1>titre</h1><p>point</p> serait retourné comme headingparagraph (avis de manque d'espace entre les mots). Donc, ajouter un espace à la nodeValue corrige ce. Mais il introduit un espace à l'avant du texte, mais j'ai trouvé un nombre de mots de la fonction qui l'habille off (de plus, il utilise plusieurs expressions régulières pour s'assurer qu'il compte mots seulement). Nombre de mots et édité get_text fonctions ci-dessous:
```
function get_text(el) {
ret = "";
var length = el.childNodes.length;
for(var i = 0; i < length; i++) {
var node = el.childNodes[i];
if(node.nodeType != 8) {
ret += node.nodeType != 1 ? ' '+node.nodeValue : get_text(node);
}
}
return ret;
}
function wordCount(fullStr) {
if (fullStr.length == 0) {
return 0;
} else {
fullStr = fullStr.replace(/\r+/g, " ");
fullStr = fullStr.replace(/\n+/g, " ");
fullStr = fullStr.replace(/[^A-Za-z0-9 ]+/gi, "");
fullStr = fullStr.replace(/^\s+/, "");
fullStr = fullStr.replace(/\s+$/, "");
fullStr = fullStr.replace(/\s+/gi, " ");
var splitString = fullStr.split(" ");
return splitString.length;
}
}
```
MODIFIER

kennebec du compteur de mots est vraiment bon. Mais celui que j'ai trouvé inclut un certain nombre comme un mot qui est ce dont j'avais besoin. Encore, c'est facile à ajouter à kennebec. Mais kennebec du texte de récupération de la fonction aura le même problème.
0

string_var.match(/[^\s]+/g).length - 1;

Vous devez vous connecter pour publier un commentaire.