前端字符统计

点击查看代码

<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>