☰

任意のDOM要素のJavascriptの単語数カウント 質問する

tag-icon • tag-icon javascript
任意のDOM要素のJavascriptの単語数カウント 質問する

たとえば、div 内の単語数を数える方法があるかどうか知りたいです。次のような div があるとします。

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

次に、JS 関数に整数 4 を返すようにします。

これは可能ですか? フォーム要素ではこれを実行しましたが、非フォーム要素では実行できないようです。

何か案は？

グ

ベストアンサー1

DIVがのみテキストを入れる場合はキス:

var count = document.getElementById('content').innerHTML.split(' ').length;

div に HTML タグを含めることができる場合は、その子を走査してテキスト ノードを探す必要があります。

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;

これはjQueryライブラリがその効果を達成するために使用するのと同じロジックです。text()関数。jQuery は非常に優れたライブラリですが、この場合は必要ありません。ただし、DOM 操作や AJAX を頻繁に行う場合は、jQuery をチェックしてみるとよいでしょう。

編集:

Gumbo のコメントにもあるように、上記の文字列の分割方法では、連続する 2 つのスペースが 1 つの単語としてカウントされます。そのようなことが予想される場合 (予想しない場合でも)、単純なスペース文字ではなく正規表現で分割して、これを回避するのが最善でしょう。そのことを念頭に置いて、上記の分割を行う代わりに、次のようにしてください。

var count = words.split(/\s+/).length;

唯一の違いは、私たちが何を渡すかということだスプリット関数。

おすすめ記事