JS實現(xiàn)中英文混合文字溢出友好截取功能
更新時間：2018年08月06日 17:05:17 作者：抖音
這篇文章主要介紹了JS實現(xiàn)中英文混合文字溢出友好截取功能,通常會用到j(luò)s的 substr 或者 substring方法, 以及 字符串的length屬性。需要的朋友可以參考下
在顯示字符串的時候，避免字符串過長往往會對字符串進行截取操作，通常會用到j(luò)s的 substr 或者 substring方法, 以及 字符串的length屬性
substr() 方法可在字符串中抽取從 start 下標開始的指定數(shù)目的字符。
substring() 方法用于提取字符串中介于兩個指定下標之間的字符。
對于非中文的字符串處理是很簡單的，但是中文字符的 length 屬性值 是1 而不是 2 ，所以處理就不是很友好了。
例如 你有一個字符串 'abcdefg' 和 '我愛中華人民共和國'
你只想顯示五位長度，往往會這樣操作 str = str.substr(0, 5);
但是 'abcde '與 '我愛中華人' 所占的寬度是不同的，因為中文往往占2字節(jié), 為了顯示效果更好， 特封裝如下函數(shù):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS實現(xiàn)中英文混合文字溢出友好截取功能</title>
</head>
<body>
<script>
/**
* JS實現(xiàn)中英文混合文字溢出友好截取功能
* @param text 字符串
* @param length 截取長度
*/
var zfc = {};
zfc.mixTextOverflow = function (text, length) {
if (text.replace(/[\u4e00-\u9fa5]/g, 'aa').length <= length) {
return text
} else {
var _length = 0
var outputText = ''
for (var i = 0; i < text.length; i++) {
if (/[\u4e00-\u9fa5]/.test(text[i])) {
_length += 2
} else {
_length += 1
}
if (_length > length) {
break
} else {
outputText += text[i]
}
}
return outputText + '...'
}
}
console.log(zfc.mixTextOverflow('留學(xué)NEW SAT essay 題目分析和匯總', 12))
</script>
</body>
</html>
輸出結(jié)果:
總結(jié)
以上所述是小編給大家介紹的JS實現(xiàn)中英文混合文字溢出友好截取功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
來訪統(tǒng)計...2006-11-11
Javascript 類型轉(zhuǎn)換、封閉函數(shù)及常見內(nèi)置對象操作示例
這篇文章主要介紹了Javascript 類型轉(zhuǎn)換、封閉函數(shù)及常見內(nèi)置對象操作,結(jié)合實例形式分析了JavaScript類型顯示轉(zhuǎn)換、隱式轉(zhuǎn)換、變量作用域、封閉函數(shù)及常用內(nèi)置對象相關(guān)操作技巧,需要的朋友可以參考下2019-11-11
這篇文章主要為大家詳細介紹了js實現(xiàn)隨機抽獎功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要為大家詳細介紹了原生js拖拽實現(xiàn)圖形的伸縮效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
JavaScript學(xué)習筆記之創(chuàng)建對象
在JavaScript中對象是一種基本的數(shù)據(jù)類型，在數(shù)據(jù)結(jié)構(gòu)上是一種散列表，可以看作是屬性的無序集合，除了原始值其他一切都是對象。這篇文章主要給大家介紹JavaScript學(xué)習筆記之創(chuàng)建對象，需要的朋友參考下吧2016-03-03
這篇文章主要為大家詳細介紹了微信小程序加載更多,點擊查看更多功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
工作中比較實用的JavaScript驗證和數(shù)據(jù)處理的干貨(經(jīng)典)
工作中比較實用的JavaScript驗證和數(shù)據(jù)處理知識經(jīng)常會用到，下面小編通過查閱相關(guān)資料及日常記錄的知識分享到腳本之家平臺，供大家參考2016-08-08
jquery實現(xiàn)動靜態(tài)條形統(tǒng)計圖
這篇文章主要介紹了jquery實現(xiàn)動靜態(tài)條形統(tǒng)計圖,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了JS加載解析Markdown文檔過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友可以參考下2020-05-05
基于javascript實現(xiàn)日歷功能原理及代碼實例
這篇文章主要介紹了基于javascript實現(xiàn)日歷效果原理及代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友可以參考下2020-05-05