javascript - 怎么解析呢？将 json 对象值转换为特定输入

Question

我正在尝试计算字母表和其他字符中大写字母“A”和小写字母“a”等的每个实例。输入来自文本字段，其内容由用户填充。我目前已经能够将结果输出为 JSON，但我想将每个字母指定为特定输入的值。

我的脚本当前正在输出到警报。但我想知道如何获取 'A' 计数的值，以显示为 id="A"的 div 输入框中的值。我还意识到它目前忽略了大写与小写，但这是另一个问题。这可能是 jQuery .each() 的用途吗？

示例

输入:苹果

输出:

{"A":0,"a":2,"B":0,"b":0,"C":0,"c":2,"D":0,"d":0,"E":0,"e":1,"F":0,"f":0,"G":0,"g":0,"H":0,"h":0,"我":0,"我":5,"J":0,"j":0,"K":0,"k":1,"L":0,"l":5 ,"M":0,"m":0,"N":0,"n":0,"O":0,"o":0,"P":0,"p":1,"Q":0,"q":0,"R":0,"r":2,"S":0,"s":3,"T":0,"t":1,"U":0,"u":1,"V":0,"v":2,"W":0,"w":1,"X":0,"x":0,"Z":0 ,"z":0}

这是我当前的 HTML:

var stringBase = ['A', 'a', 'B', 'b', 'C', 'c', 'D', 'd', 'E', 'e', 'F', 'f', 'G', 'g', 'H', 'h', 'I', 'i', 'J', 'j', 'K', 'k', 'L', 'l', 'M', 'm', 'N', 'n', 'O', 'o', 'P', 'p', 'Q', 'q', 'R', 'r', 'S', 's', 'T', 't', 'U', 'u', 'V', 'v', 'W', 'w', 'X', 'x', 'Z', 'z'];
var countObject = {};

$("#submit").click(function() {
  var exampleString = 'i will practice survival skills';

  function characterCount(word, character) {
    var count = 0;
    for (var i = 0; i < word.length; i++) {
      if (word[i] === character) {
        count++;
      }
    }
    return count;
  }
  for (var i = 0, l = stringBase.length; i < l; i++) {
    var currentChar = stringBase[i];
    countObject[currentChar] = characterCount(exampleString, currentChar);
  }
  var result = JSON.stringify(countObject)
  alert(result);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-1">
  <p class="font-letter">A</p>
  <input id="A" class="font-input"></input>
</div>
<div class="col-lg-1">
  <p class="font-letter">a</p>
  <input id="a" class="font-input"></input>
</div>
<div class="col-lg-1">
  <p class="font-letter">B</p>
  <input id="B" class="font-input"></input>
</div>
<div class="col-lg-1">
  <p class="font-letter">b</p>
  <input id="b" class="font-input"></input>
</div>
<div class="col-lg-1">
  <p class="font-letter">C</p>
  <input id="C" class="font-input"></input>
</div>

<textarea class="form-control" rows="20" id="copyInput"></textarea>

<button class="btn btn-primary" id="submit">Submit</button>

Answer 1

你只需要这样做!

答案只是计算字符数并将其计数存储为键值对。它甚至计算空白“”

$("#submit").click(function() {
  var countObject = {};
  var exampleString = $('#copyInput').val();
   
  // for counting characters
  for(var i=0;i<exampleString.length;i++){
      if(!countObject[exampleString[i]]){
        countObject[exampleString[i]] = 1
      }
      else{
      countObject[exampleString[i]] = countObject[exampleString[i]]+1
      }
  }

  // for displaying char count in HTML
  for (var key in countObject){
      if (countObject.hasOwnProperty(key)) {
           if(document.getElementById(key)){
              document.getElementById(key).value = countObject[key];
           }
      }
  }
})



//for sorting; Not needed for your case
/*
const orderedCharCount = {};
Object.keys(countObject).sort().forEach(function(key) {
  orderedCharCount[key] = countObject[key];
});

console.log(JSON.stringify(orderedCharCount));
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="form-control" rows="3" id="copyInput"></textarea>

<button class="btn btn-primary" id="submit">Submit</button>
<div class="col-lg-1">
  <p class="font-letter">A</p>
  <input id="A" class="font-input"></input>
</div>
<div class="col-lg-1">
  <p class="font-letter">a</p>
  <input id="a" class="font-input"></input>
</div>
<div class="col-lg-1">
  <p class="font-letter">B</p>
  <input id="B" class="font-input"></input>
</div>
<div class="col-lg-1">
  <p class="font-letter">b</p>
  <input id="b" class="font-input"></input>
</div>
<div class="col-lg-1">
  <p class="font-letter">C</p>
  <input id="C" class="font-input"></input>
</div>