jQuery字串擷取詳解

admin發表於2018-12-31
jQuery字串

擷取指定長度字串操作在網站建設中大量使用，尤其是在新聞列表這種型別的操作中大量應用。

下面就通過一段程式碼例項介紹一下它的實現過程。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
*{
  margin:0;
  padding:0;
  font-family:"宋體", Arial, Helvetica, sans-serif;
}
#best{
  width:300px;
  height:200px;
  border:1px solid #ccc;
  margin:60px auto 0;
  line-height:1.6;
  font-size:14px;
  padding:10px 0 0 10px
}
.blank{
  font-size:18px;
  font-weight:bold;
  text-align:center;
  padding:20px
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
jQuery.fn.limit=function(){ 
   var self = $("div[limit]"); 
   self.each(function(){ 
    var objString = $(this).text(); 
    var objLength = $(this).text().length; 
    var num = $(this).attr("limit"); 
    if(objLength > num){ 
      $(this).attr("title",objString); 
      objString = $(this).text(objString.substring(0,num) + "..."); 
    } 
  }) 
} 
$(function(){ 
  $(document.body).limit(); 
}) 
</script>
</head>
<body>
<div id="best">
  <div limit="12">計算字串的長度長度長度長度</div>
  <div limit="10">這邊有優化很公開這邊</div>
  <div limit="12">這邊有優化很公開長度長度很公開長度</div>
  <div limit="12">計算字長度長度</div>
  <div limit="10">這邊有優化很邊有優化很邊有優化很邊有優化很邊有優化很</div>
</div>
</body>
</html>

實現了擷取字串的功能，下面簡單介紹一下它如何實現此效果的:

一.實現原理:

獲取div中文字的長度，然後和通過和屬性limit規定的長度進行對比，如果超出長度則使用擷取指定的長度，後面用...替代。

二.程式碼註釋:

（1）.jQuery.fn.limit=function(){}，用以為jQuery擴充套件一個例項函式，jQuery物件可以呼叫此函式。

（2）.var self = $("div[limit]"),用以獲去具有limit屬性的div物件集合。

（3）.self.each(function(){ }，可以讓獲取的讓div物件集合中的每一個物件遍歷執行一次指定的函式。

（4）.var objString = $(this).text()，獲取div的文字內容，這裡的this是指當each()函式進行遍歷時當前div。

（5）.var objLength = $(this).text().length，獲取當前div中文字內容的長度。

（6）.var num = $(this).attr("limit")，獲取div中limit屬性值，在這裡用作了指定的字元長度。

（7）.if(objLength > num){},div中文字內容長度大於指定長度這執行指定的程式碼。

（8）.$(this).attr("title",objString)，將div的title屬性值設定為div中的內容。

（9）.objString = $(this).text(objString.substring(0,num) + "...")，擷取指定長度字串，超出的用省略號代替。

三.相關閱讀:

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

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

相關文章