javascript - 如何使用javascript整合字符串中字符的计数频率

Question

我有一些简单的HTML代码

<textarea id="text" placeholder="Type text...."></textarea>
<a id="button" class="button"></a>
<textarea id="result" disabled></textarea>

我有一个javascript代码

function getFrequency(string) {
    var freq = {};
    for (var i=0; i<string.length;i++) {
        var character = string.charAt(i);
        if (freq[character]) {
           freq[character]++;
        } else {
           freq[character] = 1;
        }
    }

    return freq;
};

我只想将 js 与 HTML 集成，以计算 id="text"文本区域内的每个字符频率，并在 id="result"文本区域内显示结果。我试过用

document.getElementById("text").value;

但出了点问题，仍然无法正常工作。有什么方法可以轻松做到这一点？

Answer 1

如果你想在打字时这样做，你可以使用文本区域上的 keyup 事件，方法如下

function getFrequency(string) {
    var freq = {};
    for (var i=0; i<string.length;i++) {
        var character = string.charAt(i);
        if (freq[character]) {
           freq[character]++;
        } else {
           freq[character] = 1;
        }
    }

    return freq;
};

window.addEventListener('load', function() {
  const textbox = document.getElementById('text');
  const result = document.getElementById('result');
  
  textbox.addEventListener('keyup', function() {
    const frequency = getFrequency( textbox.value );
    result.value = Object.keys( frequency ).map( key => `${key}: ${frequency[key]}` ).join('\n');
  });
});

<textarea id="text" placeholder="Type text...."></textarea>
<a id="button" class="button"></a>
<textarea id="result" disabled></textarea>

如果你想在点击按钮时执行此操作，你可以像这样更改之前的代码:

document.getElementById('button').addEventListener('click',  function() {
  const frequency = getFrequency( textbox.value );
  result.value = Object.keys( frequency ).map( key => `${key}: ${frequency[key]}` ).join('\n');
});