js trim函數(shù) 去空格函數(shù)與正則集錦
更新時(shí)間：2009年11月20日 17:29:35 作者：
在javascript中處理文本框輸入值的時(shí)候，經(jīng)常要用到"去掉前后空白"的功能。用過(guò)jQuery的朋友都知道，jQuery提供了一個(gè)trim()這樣的功能函數(shù)，可以很輕松幫我們實(shí)現(xiàn)這樣的效果。
但是如果項(xiàng)目沒(méi)有用到j(luò)Query等框架的話，js本身又沒(méi)有這樣的函數(shù)，我們不得不自己寫(xiě)這樣的函數(shù)，下面是函數(shù)的具體實(shí)現(xiàn)：
//供使用者調(diào)用
function trim(s){
return trimRight(trimLeft(s));
}
//去掉左邊的空白
function trimLeft(s){
if(s == null) {
return "";
}
var whitespace = new String(" \t\n\r");
var str = new String(s);
if (whitespace.indexOf(str.charAt(0)) != -1) {
var j=0, i = str.length;
while (j < i && whitespace.indexOf(str.charAt(j)) != -1){
j++;
}
str = str.substring(j, i);
}
return str;
}
//去掉右邊的空白
function trimRight(s){
if(s == null) return "";
var whitespace = new String(" \t\n\r");
var str = new String(s);
if (whitespace.indexOf(str.charAt(str.length-1)) != -1){
var i = str.length - 1;
while (i >= 0 && whitespace.indexOf(str.charAt(i)) != -1){
i--;
}
str = str.substring(0, i+1);
}
return str;
}
使用時(shí)只需調(diào)用trim函數(shù)即可。
下面是用正則的實(shí)現(xiàn)方法：
<SCRIPT LANGUAGE="JavaScript">
<!--
String.prototype.Trim = function()
{
return this.replace(/(^\s*)|(\s*$)/g, "");
}
String.prototype.LTrim = function()
{
return this.replace(/(^\s*)/g, "");
}
String.prototype.RTrim = function()
{
return this.replace(/(\s*$)/g, "");
}
//-->
</SCRIPT>
<input type="text" value=" 前后都是空格 " id="space">
<input type="button" value="去前后空格" onclick="javascript:document.getElementById('space').value=document.getElementById('space').value.Trim();document.getElementById('space').select();">
<input type="button" value="去前空格" onclick="javascript:document.getElementById('space').value=document.getElementById('space').value.LTrim();document.getElementById('space').select();">
<input type="button" value="去后空格" onclick="javascript:document.getElementById('space').value=document.getElementById('space').value.RTrim();document.getElementById('space').select();">
<input type="button" value="還原" onclick="javascript:document.getElementById('space').value=' 前后都是空格 ';">
上面的代碼因?yàn)榫庉嬈鞯膯?wèn)題，空格被替換了，所以大家請(qǐng)注意添加空格，測(cè)試。
復(fù)制代碼 代碼如下:
//供使用者調(diào)用
function trim(s){
return trimRight(trimLeft(s));
}
//去掉左邊的空白
function trimLeft(s){
if(s == null) {
return "";
}
var whitespace = new String(" \t\n\r");
var str = new String(s);
if (whitespace.indexOf(str.charAt(0)) != -1) {
var j=0, i = str.length;
while (j < i && whitespace.indexOf(str.charAt(j)) != -1){
j++;
}
str = str.substring(j, i);
}
return str;
}
//去掉右邊的空白
function trimRight(s){
if(s == null) return "";
var whitespace = new String(" \t\n\r");
var str = new String(s);
if (whitespace.indexOf(str.charAt(str.length-1)) != -1){
var i = str.length - 1;
while (i >= 0 && whitespace.indexOf(str.charAt(i)) != -1){
i--;
}
str = str.substring(0, i+1);
}
return str;
}
使用時(shí)只需調(diào)用trim函數(shù)即可。
下面是用正則的實(shí)現(xiàn)方法：
復(fù)制代碼 代碼如下:
<SCRIPT LANGUAGE="JavaScript">
<!--
String.prototype.Trim = function()
{
return this.replace(/(^\s*)|(\s*$)/g, "");
}
String.prototype.LTrim = function()
{
return this.replace(/(^\s*)/g, "");
}
String.prototype.RTrim = function()
{
return this.replace(/(\s*$)/g, "");
}
//-->
</SCRIPT>
<input type="text" value=" 前后都是空格 " id="space">
<input type="button" value="去前后空格" onclick="javascript:document.getElementById('space').value=document.getElementById('space').value.Trim();document.getElementById('space').select();">
<input type="button" value="去前空格" onclick="javascript:document.getElementById('space').value=document.getElementById('space').value.LTrim();document.getElementById('space').select();">
<input type="button" value="去后空格" onclick="javascript:document.getElementById('space').value=document.getElementById('space').value.RTrim();document.getElementById('space').select();">
<input type="button" value="還原" onclick="javascript:document.getElementById('space').value=' 前后都是空格 ';">
上面的代碼因?yàn)榫庉嬈鞯膯?wèn)題，空格被替換了，所以大家請(qǐng)注意添加空格，測(cè)試。
相關(guān)文章
小程序點(diǎn)餐界面添加購(gòu)物車(chē)左右擺動(dòng)動(dòng)畫(huà)
這篇文章主要介紹了小程序點(diǎn)餐界面添加購(gòu)物車(chē)左右擺動(dòng)動(dòng)畫(huà)，當(dāng)用戶(hù)點(diǎn)擊添加到購(gòu)物車(chē)后會(huì)有一個(gè)左右擺動(dòng)的購(gòu)物車(chē)提示效果，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-09-09
JavaScript實(shí)現(xiàn)旋轉(zhuǎn)輪播圖
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)旋轉(zhuǎn)輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了webpack的CSS加載器的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
根據(jù)身份證號(hào)碼編碼規(guī)則對(duì)其進(jìn)行有效性驗(yàn)證，具體實(shí)現(xiàn)如下，大家可以參考下2014-03-03
javascript中如何處理引號(hào)編碼"
本文為大家介紹下javascript中如何處理引號(hào)編碼，具體如下，感興趣的朋友可以參考下2013-08-08
javascript實(shí)現(xiàn)tabs選項(xiàng)卡切換效果(擴(kuò)展版)
常用的頁(yè)面效果有彈出層效果，無(wú)縫滾動(dòng)效果，選項(xiàng)卡切換效果，接下來(lái)與大家分享一款自己用原生javascript寫(xiě)的選項(xiàng)卡切換效果在原有的基礎(chǔ)上進(jìn)行了擴(kuò)展，加入了自動(dòng)輪播，這樣就變成了類(lèi)似圖片輪播的效果2013-03-03
js實(shí)現(xiàn)獲取鼠標(biāo)當(dāng)前的位置
本文主要介紹了利用javascript實(shí)現(xiàn)獲取鼠標(biāo)當(dāng)前的位置的具體方法，具有很好的參考作用，需要的朋友可以看看2016-12-12
JavaScript實(shí)現(xiàn)基于Cookie的存儲(chǔ)類(lèi)實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)基于Cookie的存儲(chǔ)類(lèi),實(shí)例分析了javascript通過(guò)cookie實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了淺談FastClick 填坑及源碼解析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
javascript中驗(yàn)證大寫(xiě)字母、數(shù)字和中文
本文為大家介紹下使用javascript驗(yàn)證大寫(xiě)字母小寫(xiě)字母，數(shù)字和中文，具體示例如下2014-01-01