html如何统计字母出现的次数,js统计字符串中每个字符出现的次数

题目介绍：在文本框内随便输入一个字符串，然后计算出该字符串中每个字符出现的次数。如图：

下面看一下实现的方式：

首先简单写下html与上述图中的css

统计字符串中每个字符出现的次数

开始统计

.centerB{

width:600px;

margin:0 auto;

padding:30px 0 0 0;

text-align:center;

}

.centerB h4{

font-size: 18px;

font-weight: 600;

}

.inputB{

border:1px solid #ccc;

padding:5px;

width:200px;

height:20px;

color:#666;

}

.button{

display:inline-block;

height:32px;

padding:0 10px;

line-height: 30px;

font-size:16px;

background: #3c9df9;

color:#fff;

margin-left:3px;

text-decoration: none;

}

.button:hover{

opacity:0.8

}

.output{

padding:30px 0 0 0;

}

接下来定义一个方法来统计字符串中每个字符出现的次数；eg:"abacbcd"这样一个字符我们怎么来实现那，首先我们要对该字符串进行遍历，在遍历时还要定义一个空对象来保存遍历的每个字符及它出现的次数。代码如下：

//统计方法

function checkNum(str){

var newStr=str;

var times={};//定义一个对象用来保存遍历的每个字符及它出现的次数

var max_key=" ";

var max=0;

var out=" ";

for(var i=0;i

if(times[newStr[i]]==null){

times[newStr[i]]=1;//js中可以用方括号语法访问对象的属性eg person.name=person["name"]

}else{

times[newStr[i]]++;

}

}

for(var k in times){//用for in来遍历对象属性

if(max

max=times[k];

max_key=k;

}

out+=k+":"+times[k]+"次"+"\n";

}

return (max_key+"出现次数最多"+":"+max+"次"+"\n"+out);

}

上面基本就可以实现了，接下来我们来完成界面中的要求在点击“按钮”时显示统计结果代码如下：

function btnClick(){

var in_val=document.getElementsByClassName("inputB")[0].value;

var btn=document.getElementsByClassName("button")[0];

var output=document.getElementsByClassName("output")[0];

var out_val=" ";

if(in_val==" "){

output.innerHTML="请输入一个字符串";

}else{

out_val=checkNum(in_val);

output.innerHTML=out_val;

}

}