文本分析网页不工作

Text Analysis webpage does not work

本文关键字：工作 网页 文本      更新时间：2023-09-26

对于家庭作业，我必须制作一个具有文本区域的网页。用户输入一些文本，点击分析按钮，输出应该是给定数量字符的单词频率列表。例如，"one two three"就是两个三个字符的单词和一个五个字符的单词。文本区域工作良好，但我似乎不能得到输出出现。

这里是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属性的对象出现的次数。

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标记，获取格式化的数组，然后循环遍历数组中的每个元素，其中它创建一个p元素元素，提取格式化的字符串，将p元素值设置为格式化的字符串，然后将p元素追加到div标记。

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);
    }
}

第六个函数是init函数，用于处理按钮点击。

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

仍然不工作，但我在那里!

我用jQuery写这个，因为1)它不是我的家庭作业，2)将它转换回正常的JavaScript将是很好的实践(对你来说)。您需要重写事件处理程序，以及两个getter/setter ($("text area").val()和$("tbody").append())。

你的主要问题是你的解决方案太复杂了!如果您想要做的只是显示长度为X的单词的数目Y，那么您应该执行以下操作:

    抓取文本区域的值并存储在text
  1. 删除所有非字母数字字符。
  2. 拆分text字符串，无论存在一个或多个空格，并将其存储在text
  3. 循环遍历数组并根据其长度将每个数组元素映射到wordMap
  4. 循环wordMap并将其附加到DOM中您希望结果为
    5. 的任何位置
<标题>小提琴h1> 
$("#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);
})

相关文章：