字体大小根据单词的数量而变化

时间:2016-03-14 02:34:12

标签: javascript jquery html

 wordCount = {}; theWords = []; allWords = data.match(/\b\w+\b/g);   //get all words in the document

    for(var i = 0; i < allWords.length; i = i + 1){
      allWords[i] = allWords[i].toLowerCase();
      var word = allWords[i];
      if(word.length>5){
        if(wordCount[word]){
          wordCount[word] = wordCount[word]+1;
        }
        else{
          wordCount[word] = 1;
        }
      }
    }
 var theWords = Object.keys(wordCount); // all words over 5 characters
 var result = "";
  for(var i = 0; i < theWords.length; i = i + 1){
      result = result + " " + theWords[i];
      $("theWords.eq[i]").css("fontSize" , (wordCount.length + 50) + 'px');

  }
  return result;
}

我遇到了线条#34; $(&#34; theWords [i] .......&#34;

的语法问题

我意识到这是一个简单的问题,而不是社区的学术问题,但我一直在摸索这种语法一段时间,并且无法找到任何特定的论坛来纠正我的语法错误。

我试图根据单词在文档中出现的次数来改变字体大小  wordCount =出现的计数。
 theWords =我希望将规则应用于

的所有单词

1 个答案:

答案 0 :(得分:0)

我设法使用更多的jQuery来构建要显示的单词列表。希望它有所帮助:D。

&#13;
&#13;
$(document).ready(function() {
  
var data = $(".sometext").text();

wordCount = {}; theWords = []; allWords = data.match(/\b\w+\b/g);   //get all words in the document

for (var i = 0; i < allWords.length; i++){
  allWords[i] = allWords[i].toLowerCase();
  var word = allWords[i];
  if (word.length > 5) {
    if (wordCount[word]) {
      wordCount[word] = wordCount[word] + 1;
    } else {
      wordCount[word] = 1;
    }
  }
}

var theWords = Object.keys(wordCount); // all words over 5 characters
  
for(var i = 0; i < theWords.length; i = i + 1) {
  $('<span/>', {
    'text': theWords[i] + " ",
    'class': theWords[i]
  }).appendTo('.result');
}
  
for(var i = 0; i < theWords.length; i++) {
  $("." + theWords[i]).css("font-size", 15 + wordCount[theWords[i]]*5 + "px");
}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="sometext">javascript is a language that could be a language without such things as language but not without things as parenthesis. language is the bigest word here.</p>

<hr>

<div class="result"></div>
&#13;
&#13;
&#13;