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

Question

function test(data) {
  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;
}

console.log(test("MyWords"));

我遇到了"$("theWords [i] ......."这句话语法的麻烦

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

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

Answer 1

我设法使用更多 jQuery 来构建要显示的单词列表，从而实现您所做的工作。希望有帮助：D。

$(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");
}
});

<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>