去除字符串左右兩邊的空格(實現(xiàn)代碼)

更新時間：2016年05月12日 10:29:09 投稿：jingxian

下面小編就為大家?guī)硪黄コ址笥覂蛇叺目崭?實現(xiàn)代碼)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考

在日常工作中，過濾表單中的一些特殊的字符是很常見的功能，比如文本中要求輸入單純的數(shù)字，但用戶有時會誤輸入一些多余的空格或其他字符混合的文本，這顯然不符合輸入要求。

下面一起來學(xué)習(xí)怎么樣去除字符串左右兩邊的空格。

過濾前：

過濾后：

HTML代碼：

 <div class="main">
     <input id="userName" type="text" placeholder="請輸入用戶名">
     <input id="rule" type="button" value="過濾">
   </div>

CSS代碼：

html,body,div,input{margin:0;padding:0;}
    .main{width:400px;height:auto;padding:0 15px;text-align:center;}
    .main input{width:100%;height:35px;border:none;margin-top:20px;border-radius:5px;}
    input[type="text"]{text-align:left;padding-left:15px;box-sizing:border-box;border:1px solid blue;}
    input[type="button"]{width:50%;background:blue;}
    @media only screen and (max-width: 415px) {
      .main{width:100%;box-sizing:border-box;}
    }

js部分：

var userName = document.getElementById('userName'),
        rule   = document.getElementById('rule'),
        regexEmpty = /^(\s|\u00A0)+|(\s|\u00A0)+$/g;

    rule.onclick = function (){
      userName.value = userName.value.replace(regexEmpty,''); //正則替換
      console.log(userName.value);
    }

以上這篇去除字符串左右兩邊的空格(實現(xiàn)代碼)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

JS 60秒后重新發(fā)送驗證碼的實例講解
下面小編就為大家?guī)硪黄狫S 60秒后重新發(fā)送驗證碼的實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
JavaScript創(chuàng)建防篡改對象的方法分析
這篇文章主要介紹了JavaScript創(chuàng)建防篡改對象的方法,結(jié)合具體實例形式分析了javascript基于不可擴(kuò)展對象、密封的對象和凍結(jié)的對象實現(xiàn)防篡改對象的相關(guān)操作技巧,需要的朋友可以參考下
2018-12-12
JavaScript繼承學(xué)習(xí)筆記【新手必看】
下面小編就為大家?guī)硪黄狫avaScript繼承學(xué)習(xí)筆記。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考
2016-05-05
常見JS前端接口校驗方式總結(jié)
作為一名優(yōu)秀的接口調(diào)用工程師，對接口的返回信息進(jìn)行校驗是必不可少的，本文整理的是一些常用的校驗方式，希望能夠?qū)Υ蠹矣兴鶐椭?/div> 2023-05-05
js實現(xiàn)的xml對象轉(zhuǎn)json功能示例
這篇文章主要介紹了js實現(xiàn)的xml對象轉(zhuǎn)json功能,結(jié)合實例形式分析了javascript轉(zhuǎn)換成xml所涉及的字符串、對象、數(shù)組、遍歷等操作技巧與使用方法,需要的朋友可以參考下
2016-12-12
詳解JavaScript如何利用異步解密回調(diào)地獄
為了更好地處理這些異步操作,JavaScript?引入了異步編程的概念,這篇文章主要來和大家詳細(xì)聊聊JavaScript中異步的相關(guān)應(yīng)用,希望對大家有所幫助
2024-02-02
詳解如何使用Flutter動畫魔法使UI元素活起來
這篇文章主要為大家介紹了如何使用Flutter動畫魔法使UI元素活起來方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
深入理解javascript原型鏈和繼承
這篇文章主要介紹了javascript原型鏈和繼承的概念，以及使用原型鏈實現(xiàn)繼承、經(jīng)典繼承、組合式繼承、寄生組合式繼承。非常實用，是篇非常不錯的文章，這里推薦給大家。
2014-09-09
微信小程序批量監(jiān)聽輸入框?qū)Π粹o樣式進(jìn)行控制的實現(xiàn)代碼
這篇文章主要介紹了小程序批量監(jiān)聽輸入框?qū)Π粹o樣式進(jìn)行控制的實現(xiàn)代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-10-10
JS獲取客戶端IP地址、MAC和主機(jī)名的7個方法匯總
這篇文章主要介紹了JS獲取客戶端IP地址、MAC和主機(jī)名的7個方法匯總,JS本身是不支持獲取IP地址等信息的,本文通過其它方法實現(xiàn),需要的朋友可以參考下
2014-07-07