jQuery擷取字串外掛區分中英文

admin發表於2017-11-01
jQuery字串

擷取字串功能在大量網站都有應用，比如新聞列表這樣的功能，因為新聞的標題長度未必都恰如其分，所以需要根據需要擷取指定長度的字串，下面分享一個jQuery實現的外掛，能夠擷取指定長度的字串，並且區分中英文。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>jQuery擷取字串外掛區分中英文-螞蟻部落</title> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
(function($){ 
  $.extend($,{ 
    fixedWidth:function(str,length,char){ 
      str=str.toString(); 
      if(!char) char="..."; 
      var num=length-lengthB(str); 
      if(num<0){ 
        str=substringB(str,length-lengthB(char))+char; 
      } 
      return str; 
      function substringB(str,length){ 
        var num=0,len=str.length,tenp=""; 
        if(len){ 
          for(var i=0;i<len;i++){ 
            if(num>length) break; 
            if(str.charCodeAt(i)>255){ 
              num+=2; 
              tenp+=str.charAt(i); 
            }
            else{ 
              num++; 
              tenp+=str.charAt(i); 
            } 
          } 
          return tenp; 
        }
        else{ 
          return null; 
        } 
      } 
      function lengthB(str){ 
        var num=0,len=str.length; 
        if(len){ 
          for(var i=0;i<len;i++){ 
            if(str.charCodeAt(i)>255){ 
              num+=2; 
            }
            else{ 
              num++; 
            } 
          } 
          return num; 
        }
        else{ 
          return 0; 
        } 
      } 
    } 
  }); 
})(jQuery); 
var str="螞蟻部落歡迎您，希望您在這裡能夠有一定的收穫";
document.write($.fixedWidth(str,20));
</script> 
</head> 
<body> 
</body> 
</html>

如果字串超出了指定長度，那麼擷取規定的長度，超出的以省略號替代，下面介紹一下此外掛實現過程:

一.實現原理:

（1）.為jQuery類庫新增fixedWidth方法：

通過 $.extend方法實現，此方法為jQuery類直接新增方法，新增靜態方法，關於 $.extend()函式可以參閱 $.extend()函式用法詳解一章節。

（2）.關於中英文區分：

字串的length屬性返回值字串字元的個數，字串中一個英文字元就是一個字元，一個漢字也是一個字元。但是一個英文字元和一個漢字在記憶體佔據的空間不一樣，一個英文字元佔據一個位元組，一個漢字佔據兩個位元組。通過charCodeAt方法判斷，如果返回值大於255，說明是漢字，num加2，否則是英文字元，num加1。

二.程式碼註釋:

（1）.(function($){})(jQuery)，宣告一個匿名函式，並執行此函式，引數是jQuery。

（2）.$.extend($,{})，為jQuery類新增靜態方法。

（3）.fixedWidth:function(str,length,char){}，具有三個引數，str是要被擷取的原字串，length是要被擷取的長度，char是自定義以何種形式表示有內容超出，預設狀態下是"..."，此引數可選。

（4）.var str=str.toString()，轉換為字串。

（5）.if(!char) char="..."，如果沒有沒有提供第三個引數，預設是"..."。

（6）.var num=length-lengthB(str)，要擷取的字元長度減去字元的長度，經過lengthB函式計算，已經區分了中英文。

（7）.if(num<0){}，如果小於0，也就是要擷取的長度小於字串的長度。

（8）.str=substringB(str,length-lengthB(char))+char，擷取指定字串長度，並加上char。

（9）.return str，如果要擷取的長度大於字串的長度，那麼字串將會被原樣返回。

（10）.function substringB(str,length){}，此函式用來擷取字串，具有兩個引數，第一個引數要被擷取的原字串，第二個是要真正被擷取的字串的長度，這個長度是fixedWidth()函式中第二個引數減去被省略字串替代字元的長度。

（11）.var num=0,len=str.length,tenp=""，宣告幾個變數並賦值。

（12）.if(len)，判斷字串是否是空字串。

（13）.for(var i=0;i<len;i++){}，遍歷字串中的每一個字元。

（14）.if(num>length) break，如果num大於真正要被擷取的長度，就跳出本次迴圈。

（15）.if(str.charCodeAt(i)>255)，判斷指定索引的Unicode編碼是否大約255，如果大於就是漢字，如果小於就是英文字元。

（16）.num+=2，將num加2.

（17）.tenp+=str.charAt(i)，將指定索引的字元追加到tenp中。

（18）.else{num++; tenp+=str.charAt(i)}，如果是英文字元，num加1，再將指定索引的字元追加到tenp中。

（19）.return tenp，返回字串。

（20）.function lengthB(str){}，宣告一個函式，用來計算字串的長度，區分中英文，原理這裡就不說了，因為和上面介紹的大同小異。

三.相關閱讀:

（1）.length屬性參閱JavaScript String length屬性一章節。

（2）.charCodeAt()參閱JavaScript String charCodeAt()方法一章節。 

（3）.charAt()參閱JavaScript String charAt()方法一章節。

相關文章