前端开发入门到精通的在线学习网站

网站首页 > 资源文章 正文

前端字符统计,输入或者粘贴都验证通过

qiguaw 2024-09-26 16:22:25 资源文章 18 ℃ 0 评论

<html>

<head>

字数统计

</head>

<body style="padding: 0px 0px 154px;">

<section class="hero" style="height: auto !important;">

<div class="hero-body" style="height: auto !important;">

<div class="container" style="height: auto !important;">

<div class="columns" style="height: auto !important;">

<div class="column is-three-fifths-desktop is-narrow">

<h1 class="title is-info is-4">字数统计</h1>

<div class="field is-horizontal is-info">

<div class="field-body is-info">

<div class="field">

<div class="control">

<textarea class="textarea is-focused" placeholder="输入(或粘贴)统计字数的内容:" rows="20" cols="60" id="content" autofocus=""></textarea>

</div>

</div>

</div>

</div>

<div class="buttons is-right">

<button class="button is-primary is-rounded is-small" type="reset" value="reset" name="reset" οnclick="resetForm()">全部清空</button>

</div>

<div class="field is-grouped is-grouped-multiline" id="copyArea"> <span class="tag is-medium"> 共计: </span>

<div class="control">

<div class="tags has-addons"> <span class="tag is-dark is-medium" id="zishu">0</span> <span class="tag is-primary is-medium">个字数</span> </div>

</div>

<div class="control">

<div class="tags has-addons"> <span class="tag is-dark is-medium" id="zifu">0</span> <span class="tag is-primary is-medium">个字符</span> </div>

</div>

</div>

<div class="field is-grouped is-grouped-multiline"> <span class="tag"> 包含:</span>

<div class="control">

<div class="tags has-addons"> <span class="tag" id="hanzi">0</span> <span class="tag is-danger is-light">个汉字</span> </div>

</div>

<div class="control">

<div class="tags has-addons"> <span class="tag" id="biaodian">0</span> <span class="tag is-info is-light">个标点(全角)</span> </div>

</div>

<div class="control">

<div class="tags has-addons"> <span class="tag" id="zimu">0</span> <span class="tag is-success is-light">个字母</span> </div>

</div>

<div class="control">

<div class="tags has-addons"> <span class="tag" id="shuzi">0</span> <span class="tag is-warning is-light">个数字</span> </div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

<script type="text/javascript">

function $(id) {

return document.getElementById(id);

}

var EventUtil = function() {};

EventUtil.addEventHandler = function(obj, EventType, Handler) {

if (obj.addEventListener) {

obj.addEventListener(EventType, Handler, false);

}

else if (obj.attachEvent) {

obj.attachEvent('on' + EventType, Handler);

} else {

obj['on' + EventType] = Handler;

}

}

if ($("content")) {

EventUtil.addEventHandler($('content'), 'propertychange', countChineseCharacters);

EventUtil.addEventHandler($('content'), 'input', countChineseCharacters);

}


function countChineseCharacters() {

Words = $('content').value;

console.log(Words);

var W = new Object();

var Result = new Array();

var iNumwords = 0;

var sNumwords = 0;

var sTotal = 0;

var iTotal = 0;

var eTotal = 0;

var otherTotal = 0;

var bTotal = 0;

var inum = 0;

for (i = 0; i < Words.length; i++) {

var c = Words.charAt(i);

if (c.match(/[\u4e00-\u9fa5]/)) {

if (isNaN(W[c])) {

iNumwords++;

W[c] = 1;

}

iTotal++;

}

}

for (i = 0; i < Words.length; i++) {

var c = Words.charAt(i);

if (c.match(/[^\x00-\xff]/)) {

if (isNaN(W[c])) {

sNumwords++;

}

sTotal++;

} else {

eTotal++;

}

if (c.match(/[0-9]/)) {

inum++;

}

}

$('hanzi').innerText = iTotal;

$('zishu').innerText = inum + iTotal;

$('biaodian').innerText = sTotal - iTotal;

$('zimu').innerText = eTotal - inum;

$('shuzi').innerText = inum;

document.getElementById("zifu").innerHTML = iTotal * 2 + (sTotal - iTotal) * 2 + eTotal;

}

function resetForm() {

document.getElementById("content").value = "";

$("zishu").innerText =0;

$("zifu").innerText =0;

$("hanzi").innerText =0;

$("biaodian").innerText =0;

$("zimu").innerText =0;

$("shuzi").innerText =0;

}

</script>

</html>

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表