主頁 > 企業開發 > js去除空格12種方法

js去除空格12種方法

2020-10-09 06:12:10 企業開發

注:本文非本人原著;原文作者: 黃卉  《js去除空格12種方法

//JS去除空格的方法目前共有12種:
//實作1
 String.prototype.trim = function() {
   return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
 }
//看起來不怎么樣, 動用了兩次正則替換,實際速度非常驚人,主要得益于瀏覽器的內部優化,一個著名的例子字串拼接,直接相加比用Array做成的StringBuffer 還快,base2類別庫使用這種實作,
// 實作2
 String.prototype.trim = function() {
   return this.replace(/^\s+/, '').replace(/\s+$/, '');
 }
//和實作1 很相似,但稍慢一點,主要原因是它最先是假設至少存在一個空白符,Prototype.js使用這種實作,過其名字為strip,因為 Prototype的方法都是力求與Ruby同名,
 實作3
 String.prototype.trim = function() {
   return  this.substring(Math.max(this.search(/\S/), 0),this.search(/\S\s*$/) + 1);
 }
//以截取方式取得空白部分(當然允許中間存在空白符),總共 呼叫了四個原生方法,設計得非常巧妙,substring以兩個數字作為引數,Math.max以兩個數字作引數,search則回傳一個數字,速度比上 面兩個慢一點,但比下面大多數都快,
// 實作4
 String.prototype.trim = function() {
   return  this.replace(/^\s+|\s+$/g, '');
 }
//這個可以稱得上實作2的簡化版,就是 利用候選運算子連接兩個正則,但這樣做就失去了瀏覽器優化的機會,比不上實作3,由于看來很優雅,許多類別庫都使用它,如JQuery與mootools
//實作5
 String.prototype.trim = function() {
   var str = this;
   str = str.match(/\S+(?:\s+\S+)*/);
   return str ? str[0] : '';
 }
// match 是回傳一個陣列,因此原字串符合要求的部分就成為它的元素,為了防止字串中間的空白符被排除,我們需要動用到非捕獲性分組(?:exp),由于陣列可 能為空,我們在后面還要做進一步的判定,好像瀏覽器在處理分組上比較無力,一個字慢,所以不要迷信正則,雖然它基本上是萬能的,
// 實作6
 String.prototype.trim = function() {
   return this.replace(/^\s*(\S*(\s+\S+)*)\s*$/, '$1');
 }
//把符合要求的部分提供出來,放到一個空字串中,不過效率很差,尤其是在IE6中,
// 實作7
 String.prototype.trim = function() {
   return this.replace(/^\s*(\S*(?:\s+\S+)*)\s*$/, '$1');
 }
//和實作6很相似,但用了非捕獲分組進行了優點,性能效之有一點點提升,

//實作8
 String.prototype.trim = function() {
   return this.replace(/^\s*((?:[\S\s]*\S)?)\s*$/, '$1');
 }
//沿著上面兩個的思路進行改進,動用了非捕獲分組與字符集合,用?頂替了*,效果非常驚人,尤其在IE6中,可 以用瘋狂來形容這次性能的提升,直接秒殺火狐,
// 實作9
 String.prototype.trim = function() {
   return this.replace(/^\s*([\S\s]*?)\s*$/, '$1');
 }
//這次是用懶惰匹配 頂替非捕獲分組,在火狐中得到改善,IE沒有上次那么瘋狂,
 實作10
 String.prototype.trim = function() {
   var str = this,
   whitespace = ' \n\r\t\f\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000';
   for (var i = 0,len = str.length; i < len; i++) {
     if (whitespace.indexOf(str.charAt(i)) === -1) {
       str = str.substring(i);
       break;
     }
   }
   for (i = str.length - 1; i >= 0; i--) {
     if (whitespace.indexOf(str.charAt(i)) === -1) {
       str = str.substring(0, i + 1);
       break;
     }
   }
  return whitespace.indexOf(str.charAt(0)) === -1 ? str : '';
 }
//我 只想說,搞出這個的人已經不是用牛來形容,已是神一樣的級別,它先是把可能的空白符全部列出來,在第一次遍歷中砍掉前面的空白,第二次砍掉后面的空白,全 程序只用了indexOf與substring這個專門為處理字串而生的原生方法,沒有使用到正則,速度快得驚人,估計直逼上內部的二進制實作,并且在 IE與火狐(其他瀏覽器當然也毫無疑問)都有良好的表現,速度都是零毫秒級別的,
// 實作11
String.prototype.trim = function() {
   var str = this,
   str = str.replace(/^\s+/, '');
   for (var i = str.length - 1; i >= 0; i--) {
     if (/\S/.test(str.charAt(i))) {
       str = str.substring(0, i + 1);
       break;
     }
   }
   return str;
 }
//實作10已經告訴我們普通的原生字串截取方法是遠勝于正則替換,雖然是復雜一點,但只要正則 不過于復雜,我們就可以利用瀏覽器對正則的優化,改善程式執行效率,如實作8在IE的表現,我想通常不會有人在專案中應用實作10,因為那個 whitespace 實作太長太難記了(當然如果你在打造一個類別庫,它絕對是首先),實作11可謂其改進版,前面部分的空白由正則替換負責砍掉,后面用原生方法處理,效果不遜 于原版,但速度都是非常逆天,
// 實作12
 String.prototype.trim = function() {
   var str = this,
   str = str.replace(/^\s\s*/, ''),
   ws = /\s/,
   i = str.length;
   while (ws.test(str.charAt(--i)));
   return str.slice(0, i + 1);
 }
//實作10與實作11在寫法上更好的改進版,注意說的不是性能速 度,而是易記與使用上,和它的兩個前輩都是零毫秒級別的,以后就用這個來作業與嚇人,

  

//1:去字串前后空格:changeThing.replace(/(^\s*)|(\s*$)/g,'')
//2:
function  trm(e){
      return e.replace( /^\s+/, "" ).replace( /\s+$/, "" ); //js去掉全換空格
     }
//  呼叫:
 var  causeCheckNopass=trm(mini.get("m_zjhms").getValue());


==================================================================================================

//1、  去掉字串前后所有空格:
//代碼如下:
         function Trim(str)
         {   16              return str.replace(/(^\s*)|(\s*$)/g, "");   17      }
//    說明:
//    如果使用jQuery直接使用$.trim(str)方法即可,str表示要去掉前后所有空格的字串,
   21 //2、 去掉字串中所有空格(包括中間空格,需要設定第2個引數為:g)
//代碼如下:
        function Trim(str,is_global)
        {
            var result;
            result = str.replace(/(^\s+)|(\s+$)/g,"");
            if(is_global.toLowerCase()=="g")
            {
                result = result.replace(/\s/g,"");
             }
            return result;
}

==================================================================================================

//js去掉字串前后空格的五種方法2012-04-02 

[javascript]
//供使用者呼叫  
function trim(s){    41 return trimRight(trimLeft(s));    42 }    43 //去掉左邊的空白  
function trimLeft(s){    45 if(s == null) {    46 return "";    47 }    48 var whitespace = new String(" \t\n\r");    49 var str = new String(s);    50 if (whitespace.indexOf(str.charAt(0)) != -1) {    51 var j=0, i = str.length;    52 while (j < i && whitespace.indexOf(str.charAt(j)) != -1){    53 j++;    54 }    55 str = str.substring(j, i);    56 }    57 return str;    58 }    59 //去掉右邊的空白 www.2cto.com   
function trimRight(s){    61 if(s == null) return "";    62 var whitespace = new String(" \t\n\r");    63 var str = new String(s);    64 if (whitespace.indexOf(str.charAt(str.length-1)) != -1){    65 var i = str.length - 1;    66 while (i >= 0 && whitespace.indexOf(str.charAt(i)) != -1){    67 i--;    68 }    69 str = str.substring(0, i+1);    70 }    71 return str;    72 }   73 第二種:正則替換
[javascript]
<SCRIPT LANGUAGE="JavaScript">    76 <!--    77 String.prototype.Trim = function()    78 {    79 return this.replace(/(^\s*)|(\s*$)/g, "");    80 }    81 String.prototype.LTrim = function()    82 {    83 return this.replace(/(^\s*)/g, "");    84 }    85 String.prototype.RTrim = function()    86 {    87 return this.replace(/(\s*$)/g, "");    88 }    89 //-->  
</SCRIPT>   91 第三種:使用jquery
[javascript]
$.trim(str)   94 jquery內部實作為:
[javascript]
function trim(str){     97     return str.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,'');     98 }     99 第四種:使用motools
[javascript]
function trim(str){    102     return str.replace(/^(\s|\xA0)+|(\s|\xA0)+$/g, '');    103 }   104 第五種:裁剪字串方式
[javascript]
function trim(str){    107     str = str.replace(/^(\s|\u00A0)+/,'');    108     for(var i=str.length-1; i>=0; i--){    109         if(/\S/.test(str.charAt(i))){    110             str = str.substring(0, i+1);    111             break;    112         }    113     }    114     return str;    115 }  116 }

==================================================================================================

判斷空:
 Object.prototype.toString,對于不同型別的資料,這個方法可以回傳 '[object Object]'、'[object Array]'、'[object String]' 這樣的字串,非常方便判斷,需要注意的是,在 IE8 及其以下瀏覽器中,這個方法對于null、undefined、window 等都會回傳 '[object Object]',不過還好,這并不影響我們使用它判斷空物件

var isEmptyValue = https://www.cnblogs.com/jiangdd/p/function(value) {
            var type;
            if(value =https://www.cnblogs.com/jiangdd/p/= null) { // 等同于 value =https://www.cnblogs.com/jiangdd/p/== undefined || value === null
                return true;
            }
            type = Object.prototype.toString.call(value).slice(8, -1);
            switch(type) {
            case 'String':
                return !$.trim(value);
            case 'Array':
                return !value.length;
            case 'Object':
                return $.isEmptyObject(value); // 普通物件使用 for...in 判斷,有 key 即為 false
            default:
                return false; // 其他物件均視作非空
            }
        };

為何不用其他方法,因為下面的寫法考慮了各種兼容性,
判斷是否為陣列
isArray = function (source) {
    return '[object Array]' == Object.prototype.toString.call(source);
};
判斷是否為日期物件
isDate = function(o) {
    // return o instanceof Date;
    return {}.toString.call(o) === "[object Date]" && o.toString() !== 'Invalid Date' && !isNaN(o);
};
判斷是否為Element物件
isElement = function (source) {
    return !!(source && source.nodeName && source.nodeType == 1);
};
判斷目標引數是否為function或Function實體
isFunction = function (source) {
    // chrome下,'function' == typeof /a/ 為true.
    return '[object Function]' == Object.prototype.toString.call(source);
};
判斷目標引數是否number型別或Number物件
isNumber = function (source) {
    return '[object Number]' == Object.prototype.toString.call(source) && isFinite(source);
};
 判斷目標引數是否為Object物件
isObject = function (source) {
    return 'function' == typeof source || !!(source && 'object' == typeof source);
};
判斷目標引數是否string型別或String物件
isString = function (source) {
    return '[object String]' == Object.prototype.toString.call(source);
};
判斷目標引數是否Boolean物件
isBoolean = function(o) {
    return typeof o === 'boolean';
};


1、  去掉字串前后所有空格:
代碼如下:
         function Trim(str)
         {  182              return str.replace(/(^\s*)|(\s*$)/g, "");  183      }
    說明:
    如果使用jQuery直接使用$.trim(str)方法即可,str表示要去掉前后所有空格的字串,
  187 2、 去掉字串中所有空格(包括中間空格,需要設定第2個引數為:g)
代碼如下:
        function Trim(str,is_global)
        {
            var result;
            result = str.replace(/(^\s+)|(\s+$)/g,"");
            if(is_global.toLowerCase()=="g")
            {
                result = result.replace(/\s/g,"");
             }
            return result;
}

==================================================================================================
js去除輸入框中所有的空格和禁止輸入空格的方法
<span style="font-family: Arial, Helvetica, sans-serif;">
      <input type="password" name="password" id="password" onkeydown="return banInputSapce(event);" onKeyup="return inputSapceTrim(event,this);" />
</span>  205 
/**  207 * 是否去除所有空格  208 * @param str  209 * @param is_global 如果為g或者G去除所有的  210 * @returns  211 */  212 function Trim(str,is_global)  213 {  214 var result;  215 result = str.replace(/(^\s+)|(\s+$)/g,"");  216 if(is_global.toLowerCase()=="g")  217 {  218 result = result.replace(/\s/g,"");  219 }  220 return result;  221 }  222 
/**  224 * 空格輸入去除  225 * @param e  226 * @returns {Boolean}  227 */  228 function inputSapceTrim(e,this_temp)  229 {  230 this_temp.value = https://www.cnblogs.com/jiangdd/p/Trim(this_temp.value,"g");  231 var keynum;  232 if(window.event) // IE 
{  234 keynum = e.keyCode  235 }  236 else if(e.which) // Netscape/Firefox/Opera 
{  238 keynum = e.which  239 }  240 if(keynum == 32){  241 return false;  242 }  243 return true;  244 }  245 /**  246 * 禁止空格輸入  247 * @param e  248 * @returns {Boolean}  249 */  250 function banInputSapce(e)  251 {  252 var keynum;  253 if(window.event) // IE 
{  255 keynum = e.keyCode  256 }  257 else if(e.which) // Netscape/Firefox/Opera 
{  259 keynum = e.which  260 }  261 if(keynum == 32){  262 return false;  263 }  264 return true;  265 }  266

 

轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/164072.html

標籤:JavaScript

上一篇:JS---DOM---為元素系結事件和解綁事件的兼容代碼

下一篇:基于antd封裝一個高可用form組件 減少cv代碼導致的bug

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入,國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求,通過反向代理或者負載均衡將請求轉發到后端,后端Transfer-Encoding優先級較高,以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差,然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成:導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議,高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計,高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz,更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置,該裝置以M國全球定位系統(GLOBAL POSITIONING SYSTEM,縮寫為GPS)或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小,只要企業想省錢,那么企業的某些服務就一定會采用外包的形式,然而看似美好又經濟的策略,其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的,最常見的就是話務/客服這種需要大量重復性、無技術性的服務,或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊,通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里,當然也會發生在其它地發,如登錄框等等也會存在注入,只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參,引數為exp 經過三層過濾執行 第一層過濾偽協議,第二層過濾帶引數的函式,第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式,相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了!

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過?就是它的諸多怪異的設定讓你每每用的時候,都可能不小心踩坑。造成程式意外出錯,卻一下子找不到問題出處,那叫一個煩透了…… 下面,我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果,首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下: 實作代碼如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中,有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子: 1、可選鏈運算子(optional chaining operator) ?.是可選鏈運算子(optional chaining operator)。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位,它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思,中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px,即默認情況下: 1rem = 16px rem布局原理:根據CSS媒體查詢功能,更改根標簽的字體尺寸,實作rem單位隨螢屏尺寸的變化,如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標:計算屬性是如何實作的?計算屬性快取原理以及洋蔥模型的應用?在初始化Vue實體時,我們會給每個計算屬性都創建一個對應watcher,我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講,http就是計算機通過網路進行通信的規則,是一個基于請求與回應,無狀態的,應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行,否則無法連接。tcp(三次握手,四次揮手)。 請求與回應:客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講,http就是計算機通過網路進行通信的規則,是一個基于請求與回應,無狀態的,應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行,否則無法連接。tcp(三次握手,四次揮手)。 請求與回應:客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more