创建文本区域和分析按钮

时间:2017-06-09 19:00:10

标签: javascript css html5

我正在做大学作业。我遇到了很多困难并且卡住了。我的同学没有帮助我,导师也没有回应。我希望我可以在这里得到一些帮助/理解。我正在进行的当前任务今天到期是:

创建一个包含textarea和“analyze”按钮的页面。结果区域将显示x个字符的单词的频率。例如,文本“一二三”包含2个3个字符的单词和1个5个字符的单词。对原始设计的改进是去掉任何可能会使计数出现偏差的无关字符。

我现在刚刚开始,所以我会在更新时添加代码。我知道HTML部分不会有问题,JavaScript将成为我的问题。从我得到的,我将需要一个功能,计算每个单词中的单词和字符。但它需要排除空格和字符,如:,。'; /。我以前没有碰过这段代码,所以关于如何构建javascript的任何输入都会有所帮助。此外,他似乎要我列出有多少单词具有相同的字符?我读得对吗?

到目前为止我的代码:

<!DOCTYPE html>
<html>

<body>

    <textarea id="txtarea">
    </textarea>
    <input type="button" id="analyze" value="Analyze" onclick="myFunction()" />

    <p id="demo"></p>
    <p id="wcnt"></p>

    <script>
        function myFunction() {
            var str = document.getElementById("txtarea").value;
            var res = str.split(/[\s\/\.;,\-0-9]/);
            var n = str.length;
            document.getElementById("demo").innerHTML = "There are " + n + " characters in the text area.";
            for (var i = 0; i < res.length; i++) {

                s = document.getElementById("txtarea").value;
                s = s.replace(/(^\s*)|(\s*$)/gi, "");
                s = s.replace(/[ ]{2,}/gi, " ");
                s = s.replace(/\n /, "\n");
                document.getElementById("wcnt").innerHTML = "There are " + s.split(' ').length + " words in the text area.";
            }

        }
    </script>

</body>

</html>

现在我需要弄清楚如何计算每个单词的字符然后输出有多少单词有x个字符。如5个单词有4个字符,依此类推。有什么建议吗?

3 个答案:

答案 0 :(得分:1)

您很可能必须使用JavaScript的split函数和正则表达式来定义您不想包含的所有字符。然后遍历生成的数组并计算每个单词中的字符。

var words = document.getElementById("words");
var analyze = document.getElementById("analyze");

analyze.addEventListener("click", function(e) {
    var str = words.value;
    var res = str.split(/[\s\/\.;,\-0-9]/);
    for(var i = 0; i < res.length; i++) {
      alert(res[i].length);
    }
});
<textarea id="words">This is a test of this word counter thing.</textarea>
<br/>
<button id="analyze">
   Analyze
</button>

答案 1 :(得分:1)

&#13;
&#13;
var textarea = document.getElementById("textarea"),
    result = {}; // object Literal to hold  "word":NumberOfOccurrences

function analyzeFrequency() {

  // Match/extract words (accounting for apostrophes)
  var words = textarea.value.match(/[\w']+/g); // Array of words
  
  // Loop words Array
  for(var i=0; i<words.length; i++) {
    var word = words[i];
    // Increment if exists OR assign value of 1
    result[word] = ++result[word] || 1; 
  }
  console.log( result );
}


analyzeFrequency(); // TODO: Do this on some button click
&#13;
<textarea id="textarea">
  I am working on my college-homework.
  Homework I am having a lot of difficulty with it and getting stuck.
  My class mates are not helping me and the instructor hasn't responded.
  I am hoping I might get some help/understanding here.
</textarea>
&#13;
&#13;
&#13;

请注意Homeworkhomework(小写)如何注册为两个不同的字词,我会留给您修复它 - 如有必要,请执行analyzeFrequency()触发器点击某个按钮。

答案 2 :(得分:0)

您的教师不希望您列出单词可能具有相同的字符,而是相同的字符数。基本算法:

  1. 将文本区域的值指定给变量。
  2. 将该字符串值转换为数组。在javascript中,这可以使用包含字符类的正则表达式的String split方法来完成。
  3. 遍历该数组,检查每个元素的长度。对于每个元素,递增计数对象的属性,其属性名称是元素的长度。
  4. 迭代计数对象的属性列表。将结果区域的每个属性名称及其值输出到结果区域。