fiddle

Question

对于家庭作业，我必须制作一个包含文本区域的网页。用户输入一些文本，点击分析按钮，输出应该是给定数量字符的单词频率列表。例如，＆＃34;一两三＆＃34;将是三个字符的两个单词和五个字符的一个单词。文本区域工作正常，但我似乎无法显示输出。

这是html：

<body>

<textarea id="text" rows="26" cols="80"></textarea>

<form>
<input type="button" id="analyse" value="Analyse Text">
</form>

<div id="output"></div>

</body>

JavaScript文件有6个功能。第一个函数返回一个数组，该数组存储输入文本区域中每个单词的字符数：

function getWordInfo() {
    var text = document.getElementById("text").value;
    //the variable wordArray uses a regular expression to parse the input
    var wordArray = text.split("/\w\w+/g");
    var arrayLength = wordArray.length;
    var charArray = [];
    for (var i = 0; i < arrayLength; i++) {
        var splitWord = wordArray[i].split("");
        var wordLength = splitWord.length;
        charArray.push(wordLength);
        }
    return charArray;
}

第二个函数是一个简单的对象构造函数，它具有name属性和count属性。 count属性的默认值为0.

function obCon(name,count) { //object constructor
    this.name = name;
    this.count = count;
    count = typeof count !== "undefined" ? count : 0;
}

第三个函数返回一个存储单词对象的数组。每个对象都有一个name属性和一个count属性。 name属性是单词中的字符数。 count属性计算具有给定名称属性的对象出现的次数。

function arCon() { //array constructor 
    var charNum = getWordInfo();
    var arrayLength = charNum.length;
    var obArr = [];
    for (var i = 0; i < arrayLength; i++) {
        if (typeof obArr.indexOf( newOb.name === charNum[i] ) != "undefined" ) { // checks if the object needed exists 
            obArr.indexOf( newOb.name === charNum[i] ).count = obArr.indexOf( newOb.name === charNum[i] ).count + 1;
    }else{
            var newOb = new obCon(charNum[i]);
            newOb.count = newOb.count + 1;
            obArr.push(newOb);
            }
        }
    return obArr;
}

第四个函数是字符串格式化程序，意味着将arCon中的对象格式化为单个可读字符串，然后将其存储在数组中。

function formatter() {
    var strAr = arCon();
    var arrayLength = strAr.length;
    var formatStr = [];
    for (var i = 0; i < arrayLength; i++) {
        var str = "Number of characters: " + strAr[i].name + ", Number of words with this length: " + strAr[i].count;
        formatStr.push(str);
    }
    return formatStr;
}

为事件处理程序调用第五个函数，用于处理分析按钮的单击。单击时，它意味着获取div标签，获取格式化数组，然后循环遍历数组中的每个元素，在其中创建ap元素元素，拉出格式化字符串，将p元素值设置为格式化字符串，然后追加div元素的p元素。

function analyseButtonClick() {
    var div = document.getElementById("output");
    var str = formatter();
    var arrayLength = str.length;
    for (var i = 0; i < arrayLength; i++) {
        var par = document.createElement("p");
        var format = str[i];
        par.value = format;
        div.appendChild(par);
    }
}

第六个函数是一个处理按钮点击的初始化函数。

function init() {
    var button = document.getElementById("analyse");
    button.onclick = analyseButtonClick;
}

window.onload = init;

我通过验证器运行它，它告诉我没有语法错误，因此它必须是逻辑错误。但是，所有的功能似乎都按照他们应该做的去做，所以我不确定我哪里出错了。

edit1：好的，用四个新函数替换了第三个函数。返回getWordInfo返回的数组中最大数字的函数，该函数构造名称属性从2到该数字的对象，更新对象的计数属性的函数，以及删除未使用对象的函数。他们在这里：

function maxNum() {
    var array = getWordInfo();
    var num = Math.max.apply(Math, array);
    return num;
}

function objArrCon() { //object array constructor 
    var num = maxNum();
    var array1 = [];
    for (var i = 2; i === num; i++) {
        var myObj = new objCon(i,0);
        array1.push(myObj);
    }
    return array1;
}

function objArrParse() { //updates the object with word info
    var array1 = getWordInfo();
    var array2 = objArrCon();
    var loopLength1 = array1.length;
    var loopLength2 = array2.length;
    for (var i = 0; i < loopLength1; i++) {
        for (var m = 0; m < loopLength2; m++) {
            if (array2[m].name === array1[i]) {
                array2[m].count++;
            }
        }
    }
    return array2;
}

function objArrTrun() { //removes unused objects
    var array1 = objArrParse();
    var loopLength = array1.length;
    for (var i = 0;i < loopLength; i++) {
        if (array1[i].count === 0) {
        array.splice(i, array1);
        }
    }
    return array1;
}

仍然无法正常工作，但即将到达！

Answer 1

我在jQuery中写过这个，因为1）它不是我的家庭作业，2）将它翻译成普通的JavaScript会很好（对你而言）。您需要重写事件处理程序以及两个getter / setter（$("text area").val()和$("tbody").append()）。

您的主要问题是您的解决方案过于复杂！如果您只想显示长度为Y的字词X，那么您应该执行以下操作：

抓取文本区域的值并存储在text
删除所有非字母数字字符。
将text字符串拆分为存在一个或多个空格的位置，并将其存储在text
遍历数组并根据每个数组元素的长度将每个数组元素映射到wordMap
遍历wordMap并将其附加到您想要结果的DOM中的任何位置

fiddle

<强>的JavaScript

$("#analyze").click(function () {
    var text = $("textarea").val().replace(/[^\d\w ]+/g," ").split(/[ ]+/);
    // this grabs the value of the text area, replaces all non-numerical
    // and non-alphabetical characters with "", and then splits it into an array
    // wherever one or more spaces is present.

    var wordMap = {};
    // makes an object that will be used as an associative array

    text.forEach(function (d) {
    // loops through the array

        // if there is no key called d.length in wordMap
        if (!wordMap[d.length])
            wordMap[d.length] = 1;  // set its count to one
        else
            wordMap[d.length]++;    //otherwise, increment it
    })

    // loop through all the properties of wordMap
    for (var x in wordMap) {
        $("tbody").append("<tr><td>" + x + "</td><td>"
                          + wordMap[x] + "</td></tr");
    }
    console.log(wordMap);
})

<强> HTML

<textarea placeholder="type something..."></textarea>
<button id="analyze">Click to analyze</button>
<div id="results">
    <table>
        <thead>
            <th>Length of Word</th>
            <th>Number of Occurrences</th>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

文本分析网页不起作用

1 个答案:

fiddle