JS实现的文章字符串中某个字符总个数统计在线小工具实例

名称: js在线文字字数统计小工具
要求:需要引入jQuery 2.0
使用:直接复制粘贴整理即可

下面是文字统计小工具代码实例:

所需函数:

//获取中文字符
function getGbkNum(str){
    var reg = /[\u4e00-\u9fa5]/g;
    var result =str.match(reg);
    var count = !result ? 0 : result.length;
    return count;
}
//获取英文字符个数
function getEnNum(str){
    var reg = /[a-z]/ig;
    var result =str.match(reg);
    var count = !result ? 0 : result.length;
    return count;
}

//获取空格个数
function getNullNum(str,c){
    var regex = new RegExp(c, 'g'); 
    var result = str.match(regex);
    var count = !result ? 0 : result.length;
    return count;
}

//获取字符串特殊符号个数
function getOtherNum(str){
    var reg = /[^\w\s]+/g;
    var result =str.match(reg);
    var count = !result ? 0 : result.length;
    return count;
}

前端js代码:

<script type="text/javascript">
    $(function() {
        $("#content").bind('propertychange input',function(){
            var content= $("#content").val();
            var strnum = content.length;
            var gbknum = getGbkNum(content);
            var ennum = getEnNum(content);
            var nullnum = getNullNum(content," ");
            var othernum = getOtherNum(content);
            var sznum = getSzNum(content);
            if(strnum){
                $("#loading").hide(200);
                $("#jsonData").show(500);
                $("#strNum").html('总共'+strnum+'个');
                $("#gbkNum").html('共'+gbknum+'个');
                $("#enNum").html('共'+ennum+'个');
                $("#nullNum").html(nullnum+'个');
                $("#otherNum").html(othernum+'个');
                $("#szNum").html(sznum+'个');
            }else{
                $("#loading").show(500);
                $("#jsonData").hide(200);
            }
        })
    });
script>

前端html代码:

<textarea id="content" rows="15" style="resize: none">textarea>

<pre id="jsonData" style="display: none">
    全文字符串长度:<span id="strNum">span><br>
    其中中文字符有:<span id="gbkNum">span><br>
    其中英文字符有:<span id="enNum">span><br>
    其中空格共有:<span id="nullNum">span><br>
    其他符号共有:<span id="otherNum">span><br>
    数字共有:<span id="szNum">span>
pre>

你可能感兴趣的:(前端开发)