最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Scan a specific div and show the 3 most used words - Stack Overflow

programmeradmin5浏览0评论

Here is my markup:

<body>
  <div id="headbox">
    <p>Whatever...</p>
  </div>
    <div id="feed">
    <div>
    <p>I hate cats</p>
    </div>
    <div>
    <p>I like cats</p>
    </div>
    <div>
    <p>I like cats</p>
    </div>
    <div>
    <p>I like cats</p>
    </div>
  </div>
</body>

The deal is I need a script that counts all words which appear in the <div id="feed">.

The output should be wrapped in <p> tags or <span> tags.

<h3>The top 3 used words in this feed:</h3>
1.&nbsp;<p>cats</p>&nbsp;4x
2.&nbsp;<p>like</p>&nbsp;3x
3.&nbsp;<p>hate</p>&nbsp;1x

This would be the output.

As you can see the word (or better the letter) I was not considered. Every word under 3 letters will be not considered by the counting.

Here is my markup:

<body>
  <div id="headbox">
    <p>Whatever...</p>
  </div>
    <div id="feed">
    <div>
    <p>I hate cats</p>
    </div>
    <div>
    <p>I like cats</p>
    </div>
    <div>
    <p>I like cats</p>
    </div>
    <div>
    <p>I like cats</p>
    </div>
  </div>
</body>

The deal is I need a script that counts all words which appear in the <div id="feed">.

The output should be wrapped in <p> tags or <span> tags.

<h3>The top 3 used words in this feed:</h3>
1.&nbsp;<p>cats</p>&nbsp;4x
2.&nbsp;<p>like</p>&nbsp;3x
3.&nbsp;<p>hate</p>&nbsp;1x

This would be the output.

As you can see the word (or better the letter) I was not considered. Every word under 3 letters will be not considered by the counting.

Share Improve this question edited Sep 29, 2011 at 14:51 pimvdb 155k80 gold badges311 silver badges356 bronze badges asked Sep 29, 2011 at 14:15 TomkayTomkay 5,16021 gold badges65 silver badges94 bronze badges 3
  • 1 Have you tried I like turtles? – vol7ron Commented Sep 29, 2011 at 14:22
  • 1 Yes. Turtles make great pets. You should try turtles. :) – Jonathan M Commented Sep 29, 2011 at 14:26
  • Not to be a jerk but this question deserves to be downvoted because it "does not show any research effort". Come on, Tomkay, you've gotta at least try something... – maerics Commented Sep 29, 2011 at 14:56
Add a ment  | 

3 Answers 3

Reset to default 8

Just loop through the innerHTMLs, split the text on spaces, and use each value of the resulting array to add to or update a master array indexed by the words found with values being the counts of the words.

Split the inner text of the target element by whitespace, count the word frequency, sort by most frequent, and format the top 3 per your requirements.

Something like this (untested):

var getMostFrequentWords = function(words) {
  var freq={}, freqArr=[], i;
  // Map each word to its frequency in "freq".
  for (i=0; i<words.length; i++) {
    freq[words[i]] = (freq[words[i]]||0) + 1;
  }
  // Sort from most to least frequent.
  for (i in freq) freqArr.push([i, freq[i]]);
  return freqArr.sort(function(a,b) { return b[1] - a[1]; });
};
var words = $('#feed').get(0).innerText.split(/\s+/);
var mostUsed = getMostFrequentWords(words);
// Now you can prepare "mostUsed.slice(0,3)" as the top 3 words/count.

You'll need to modify it to reject words shorter than 3 characters but you get the idea.

var text = document.getElementById('myDiv').textContent.split(' ');
var words = {};
text.forEach(function(n, i, ary){
    if(n.length > 3) {
        words[n] = (words[n] || 0) + 1;
    }
});

That's what I would do to sort the words. And in the HTML somewhere I will have an ol element for auto-numbering

var ol = document.getElementById('myOl');
var sorted_words = [];
for(var i in words) if(words.hasOwnProperty(i) {
    sorted_words.push([i, words[i]]);
}
sorted_words.sort(function(a, b){
    return  b[0] - a[0];
})
.reverse()
.slice(0, 3)
.forEach(function(n, i, ary){
    var li = document.createElement('li')
            .appendChild(document.createElement('p'))
            .textContent = n[1] + " " + n[0] + "x";
    ol.appendChild(ul);
});

Something like this should work...

发布评论

评论列表(0)

  1. 暂无评论