jQuery 擷取字串以省略號替代

admin發表於2019-02-22
jQuery字串

本章節介紹一下如何實現擷取字串功能，超出的部分使用省略號替代。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>  
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$.fn.extend({ 
  displayPart:function(){ 
    var displayLength=100; 
    displayLength=this.attr("displayLength") || displayLength; 
    var text=this.text(); 
    if(!text) return "";
    var result = ""; 
    var count = 0; 
    for(var i = 0; i < displayLength; i++) { 
      var _char = text.charAt(i); 
      if(count >= displayLength) break; 
      if (/[^x00-xff]/.test(_char)) count++;
 
      result += _char; 
      count++; 
    } 
    if(result.length < text.length){ 
      result += "..."; 
    } 
    this.text(result); 
  } 
});
$(function(){ 
  $(".displayPart").displayPart(); 
}); 
</script> 
</head>
<body> 
<div class="displayPart" displayLength="20">螞蟻部落歡迎您，只有努力奮鬥才會有美好的未來。</div> 
</body> 
</html>

以上程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$.fn.extend({})，為jQuery物件例項新增物件。

（2）.displayPart:function(){}，設定物件的屬性，屬性值是一個函式，實現擷取字串功能。

（3）.var displayLength=100，預設的擷取長度為100。

（4）.displayLength=this.attr("displayLength") || displayLength，如果設定了擷取長度則使用此值，否則使用預設值。

（5）.var text=this.text()，獲取元素中的文字內容。

（6）.if(!text) return ""，如果文字內容為空則返回一個空字元。

（7）.var result = ""，此變數用來儲存擷取結果。

（8）.var count = 0，此變數用來作為標識，儲存當前字串的長度。

（9）.for(var i = 0; i < displayLength; i++)，遍歷字串中的字元，displayLength是要擷取的長度。

（10）.var _char = text.charAt(i)，獲取指定位置的字元。

（11）.if(count >= displayLength) break，count的值大於displayLength，就說明超出長度了，於是跳出迴圈。

（12）.if (/[^x00-xff]/.test(_char)) count++，判斷當前字元是否是雙位元組的，如果是先將count加1，因為後面還要加1，所以是將雙位元組按照佔2個長度處理。

（13）.result += _char，連線字串。

（14）.count++，對count進行加1操作。

（15）.if(result.length < text.length){result += "...";} ，擷取長度小於字串實際長度，後面跟有省略號。

（16）.this.text(result)，寫入擷取後的字串。

二.相關閱讀:

（1）.attr()參閱jQuery attr()方法一章節。

（2）.text()參閱jQuery text()方法一章節。

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

（4）.break語句參閱JavaScript break與continue語句一章節。 

（5）.test()參閱正規表示式test()一章節。

相關文章