天天看點

正規表達式實作 限制文字輸入個數漢子,數字,英文單詞

html:

<textarea style=" height: 60px;"  check="required" id='limitNum' οnkeyup="words_deal();"></textarea>
<p class='syNum'>剩餘<span id="textCount">20</span>個字</p> 
           

js:

var valDom = document.getElementById("limitNum");
var numDom = document.getElementById("textCount");
var zLen;
           
function words_deal(){
    	zLen = 20;//最多允許輸入20個字,每個英文單詞算一個,标點不計算個數
        var str = valDom.value;//擷取文本域的值
        //判斷是否包含中文:if(/^[\u4e00-\u9fa5]/.test("名字"))        
        var regH = /^[\u4e00-\u9fa5]/;//漢字
        var regY = /^[a-zA-Z]/;//英文
        var regN=/\d/g;//數字
        var regK=/\s/g;//空格
        var regZ=/./g;//總長
        //var lenN=str.match(regN).length;
       // var lenK=str.match(regK).length;
       // var lenZ=str.match(regZ).length;
       // var lenH = str.match(regH).length;
        var strlen = str.length;
        if(strlen > 0){//如果字元串長度大于0
            for(var i=0;i<strlen;i++){//周遊字元串
                var strIndex = str.charAt(i);//擷取for循環目前字元
                if(regY.test(strIndex)){//判斷是否為英文,英文以單詞為機關,不是以英文字母
                    if(i+1<=strlen){
                        var strNext = str.charAt(i+1);
                        if(!regY.test(strNext)){
                            //如果下一個不是英文
                            zLen--;
                            if(zLen<=0){//達到字數限制
                                limitNum(i,str);
                                return false;
                            }
                        }
                    }else{
                        //最後一個字元
                        zLen--;
                        if(zLen<=0){
                            limitNum(i,str);
                            return false;
                        }

                    }
                }else{
                    //var kflag = regK.test(strIndex);
                    var hflag = regH.test(strIndex);//漢子
                    var nflag = regN.test(strIndex);//數字
                    if(hflag || nflag){
                        zLen--;
                        if(zLen<=0){
                            limitNum(i,str);
                            return false;
                        }
                    }
                }
            }
            numDom.innerText=zLen;
        } else{
            numDom.innerText='20';
        }

    }
           

超出字數限制的處理

function limitNum(i,str){
        var newStr = str.substr(0, i+1);//此處不能截取 0,19.因為存在英文單詞或者标點
        valDom.value = newStr;
        numDom.innerText=0;
    }
           

總結:主要是英文單詞的判斷,一般英文單詞與單詞之間會存在空格,是以判斷一個英文單詞是否結束,就是找到他的下一個字元是否是英文單詞。如果是那麼不做處理繼續周遊下一個。其次是正規表達式的利用,可以百度的。再有就是字元串的周遊方法

繼續閱讀