文章/答案/技术大牛

发布

社区首页 >问答首页 >文本分析网页

问文本分析网页
EN

Code Review用户

提问于 2014-06-14 20:08:21

回答 1查看 1.8K关注 0票数 7

对于作业作业，我制作了一个网页，其中有一个文本区域。用户输入一些文本，点击分析按钮，输出应该是给定数量字符的单词频率的列表。

例如，“一二三”是三个字符的两个单词和一个五个字符的单词。

这是可行的，但还有改进的余地吗？

HTML:

<body>
<h3>Text Input</h3>
<textarea id="text" placeholder="type something..." rows="20" cols="80"></textarea>
<button id="analyse">Click to analyze</button>
<h3>Results</h3>
<div id="results"></div>
</body>

JavaScript:

function getWordInfo() { 
    var text1 = document.getElementById("text").value;
    var text2 = text1.replace(/[^\d\w ]+/g," ");
    var text3 = text2.split(/[ ]+/);
    return text3;
}

function firstLoop() {
    var text = getWordInfo();
    var wordMap = [];
    var i =0;
    var looplength = text.length;
    for ( i ;i < looplength; i++) {
        wordMap.push(text[i].length)
    }
    return wordMap;
}

function objCon(name,count) { //object constructor
    this.name = name;
    this.count = count;
}

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

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

function objArrParse() { //updates the object with word info
    var array1 = firstLoop();
    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() { //object array truncation 
    var array1 = objArrParse();
    var len = array1.length;
    for (var i = 0;i < len; i++) {
        if (array1[i].count === 0) {
            array1.splice(i, 1);
            len--;
            }
        }
    return array1;
}

function formatter() {
    var strAr = objArrTrun();
    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;
}

function clearBox(elementID) {
    document.getElementById(elementID).innerHTML = "";
}

function analyseButtonClick() {
    clearBox("results");
    var html = " ";
    var str = formatter();
    var len = str.length;
    for (var i = 0; i < len; i++) {
        html += "<p>" + str[i] + "<p>";
}
    document.getElementById("results").innerHTML += html;
}

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

window.onload = init;

javascript

strings

homework

回答 1

Code Review用户

回答已采纳

发布于 2014-06-14 21:34:55

这里有一种不同的方法，使用DOM而不是innerHTML，并使用文档片段一次性添加并提高性能。另外，您不需要那么多regex，特别是如果您正在复制/粘贴它们；按任何空格字符拆分并从结果数组中删除空元素就可以了。

然后，您可以使用内置的高阶函数(如map和reduce )来最小化for循环的使用，并使代码更加简洁：

var doc = document;

var extend = function(a, b) {
  Object.keys(b).forEach(function(k){a[k] = b[k]});
  return a;
};

var elem = function(tag, props) {
  return extend(doc.createElement(tag), props);
};

/**
 * @param words {Array}
 * @returns {Object} Frequency of words per length
 */
var frequency = function(words) {
  return words.filter(Boolean).reduce(function(acc, x) {
    acc[x.length] = ++acc[x.length] || 1;
    return acc;
  },{});
};

var empty = function(x) {
  while (x.hasChildNodes())
    x.removeChild(x.lastChild);
  return x;
};

/**
 * @param freq {Object} Frequence of words per length
 * @returns {Node} Document fragment
 */
var resultOf = function(freq) {
  return Object.keys(freq).reduce(function(frag, k) {
    frag.appendChild(elem('p', {
      textContent: 'Words with '+ k +' chars: '+ freq[k]
    }));
    return frag;
  }, doc.createDocumentFragment());
};

var textarea = doc.getElementById('text');
var button = doc.getElementById('analyse');
var result = doc.getElementById('results');

button.addEventListener('click', function() {
  var res = resultOf(frequency(textarea.value.split(/\s+/)));
  empty(result).appendChild(res);
});

演示：http://jsbin.com/motoy/1/edit

要了解更多关于这些成语的知识，我建议阅读JavaScript Allonge和功能JavaScript。有关JavaScript文档，请访问MDN

票数 3

页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://codereview.stackexchange.com/questions/54269

复制

相似问题

问文本分析网页
EN

HTML:

JavaScript:

回答 1

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问文本分析网页EN

HTML:

JavaScript:

回答 1

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问文本分析网页
EN