整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文為大家介紹三種 js 截取字符串的方法：
方法1：substring() 方法
string.substring(from, to) 方法從 from 位置截取到 to 位置，to 可選，沒有設置時默認到末尾。
<!DOCTYPE html> <html> <body> <script> var str="www.runoob.com!"; document.write(str.substring(4)+"<br>"); // 從第 5 個字符開始截取到末尾 document.write(str.substring(4,10)); // 從第 5 個字符開始截取到第10個字符 </script> </body> </html>
嘗試一下 ?
更多關于substr() 方法請參考文檔：http://www.runoob.com/jsref/jsref-substring.html。
方法2：substr() 方法
substr() 方法可在字符串中截取從開始下標開始的指定數目的字符。
<!DOCTYPE html> <html> <body> <script> var str="www.runoob.com!"; document.write(str.substr(4,6)); // 從第 4 個字符開始截取6個字符 </script> </body> </html>
方法3：slice() 方法
slice(start,end) 方法用于提取字符串的某個部分（從參數 start 到 end 位置），并以新的字符串返回被提取的部分。類似 substring()。
opyClip mac版是Macos上一款高效的剪切板歷史管理軟件，它能夠存儲您以前復制或剪切的所有內容，能夠使您快速的找到您在尋找的文本片段，為您節省了很多時間提高效率。下載地址：https://www.macv.com/mac/828.html
Macv.com
下載完成后，雙擊.pkg文件打開，根據安裝器提示進行安裝即可。
Macv.com
搜索功能
最近剪輯列表
歷史記錄
提高工作效率
Macv.com
時前端開發工作時，經常會需要對字符串進行截斷，比如新聞標題，需要把超出可視區域后需要進行截斷，如下圖：
小編我由主要負責后端開發，最開始是采用后端方法來實現字符串截斷，然后傳遞給前端人員使用。
但是這個方式有一個弊端，尤其是響應式的頁面，截取字數無法精確控制，比如pc端可視區域可以顯示150個字符，但是手機端屏幕最多只能顯示20個字符，所以通過后端來控制字符數是非常爛的解決方案，最好的解決辦法是通過前端方式來截斷字符串，下面分別用javascript和css的方式來實現。
先看一下html部分
<div class="title"> 為什么要制作高端的網站？高端網站建設價格為什么越來越高？ </div>
下面分別針對這行html進行截斷操作。
先封裝一個截取字符串的方法，代碼如下：
<script>
String.prototype.left = function (len) //左邊截取字段數
{
var str = this;
if (isNaN(len) || len == null) {
len = str.length;
}
else {
if (parseInt(len) < 0 || parseInt(len) > str.length) {
len = str.length;
}
}
return str.substr(0, len);
}
</script>
然后再頁面中采用jquery方式調用：
<script type="text/javascript">
$(function () {
var $title=(".title");
var txt= $title.html().left(50); //截取前50個字符
$title.html(txt); //重新
});
</script>
這種方式可以實現字符串的截取，但是這種方法也不理想，pc端和手機端截取字數還是需要單獨根據瀏覽器類型來定義。
定義一個css類：
.title {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
text-overflow: ellipsis; 這句意思是超出可視區域后顯示三個點...，如果只想截斷，可以改為： text-overflow:clip。
今天先寫到這里，如果感覺對您有幫助，可以轉發一下，后續有時間再分享一下前端技巧給大家。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
