js去除空格12种方法

注:本文转载于csdn:黄卉博主的文章《js去除空格12种方法

实现1

  1 String.prototype.trim = function() {
  2   return this.replace(/^\s\s*/, ‘‘).replace(/\s\s*$/, ‘‘);
  3 }

看起来不怎么样, 动用了两次正则替换,实际速度非常惊人,主要得益于浏览器的内部优化。一个著名的例子字符串拼接,直接相加比用Array做成的StringBuffer 还快。base2类库使用这种实现。
实现2

  1 String.prototype.trim = function() {
  2   return this.replace(/^\s+/, ‘‘).replace(/\s+$/, ‘‘);
  3 }

和实现1 很相似,但稍慢一点,主要原因是它最先是假设至少存在一个空白符。Prototype.js使用这种实现,不过其名字为strip,因为 Prototype的方法都是力求与Ruby同名。
实现3

  1 String.prototype.trim = function() {
  2   return  this.substring(Math.max(this.search(/\S/), 0),this.search(/\S\s*$/) + 1);
  3 }

以截取方式取得空白部分(当然允许中间存在空白符),总共 调用了四个原生方法。设计得非常巧妙,substring以两个数字作为参数。Math.max以两个数字作参数,search则返回一个数字。速度比上 面两个慢一点,但比下面大多数都快。
实现4

  1 String.prototype.trim = function() {
  2   return  this.replace(/^\s+|\s+$/g, ‘‘);
  3 }

这个可以称得上实现2的简化版,就是 利用候选操作符连接两个正则。但这样做就失去了浏览器优化的机会,比不上实现3。由于看来很优雅,许多类库都使用它,如jQuery与mootools

实现5

  1 String.prototype.trim = function() {
  2   var str = this;
  3   str = str.match(/\S+(?:\s+\S+)*/);
  4   return str ? str[0] : ‘‘;
  5 }

match 是返回一个数组,因此原字符串符合要求的部分就成为它的元素。为了防止字符串中间的空白符被排除,我们需要动用到非捕获性分组(?:exp)。由于数组可 能为空,我们在后面还要做进一步的判定。好像浏览器在处理分组上比较无力,一个字慢。所以不要迷信正则,虽然它基本上是万能的。

实现6

  1 String.prototype.trim = function() {
  2   return this.replace(/^\s*(\S*(\s+\S+)*)\s*$/, ‘$1‘);
  3 }

把符合要求的部分提供出来,放到一个空字符串中。不过效率很差,尤其是在IE6中。
实现7

  1 String.prototype.trim = function() {
  2   return this.replace(/^\s*(\S*(?:\s+\S+)*)\s*$/, ‘$1‘);
  3 }

和实现6很相似,但用了非捕获分组进行了优点,性能效之有一点点提升。

实现8

  1 String.prototype.trim = function() {
  2   return this.replace(/^\s*((?:[\S\s]*\S)?)\s*$/, ‘$1‘);
  3 }

沿着上面两个的思路进行改进,动用了非捕获分组与字符集合,用?顶替了*,效果非常惊人。尤其在IE6中,可 以用疯狂来形容这次性能的提升,直接秒杀火狐。

实现9

  1 String.prototype.trim = function() {
  2   return this.replace(/^\s*([\S\s]*?)\s*$/, ‘$1‘);
  3 }

这次是用懒惰匹配 顶替非捕获分组,在火狐中得到改善,IE没有上次那么疯狂。

实现10

  1 String.prototype.trim = function() {
  2   var str = this,
  3   whitespace = ‘ \n\r\t\f\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000‘;
  4   for (var i = 0,len = str.length; i < len; i++) {
  5     if (whitespace.indexOf(str.charAt(i)) === -1) {
  6       str = str.substring(i);
  7       break;
  8     }
  9   }
 10   for (i = str.length - 1; i >= 0; i--) {
 11     if (whitespace.indexOf(str.charAt(i)) === -1) {
 12       str = str.substring(0, i + 1);
 13       break;
 14     }
 15   }
 16   return whitespace.indexOf(str.charAt(0)) === -1 ? str : ‘‘;
 17 }

我 只想说,搞出这个的人已经不是用牛来形容,已是神一样的级别。它先是把可能的空白符全部列出来,在第一次遍历中砍掉前面的空白,第二次砍掉后面的空白。全 过程只用了indexOf与substring这个专门为处理字符串而生的原生方法,没有使用到正则。速度快得惊人,估计直逼上内部的二进制实现,并且在 IE与火狐(其他浏览器当然也毫无疑问)都有良好的表现。速度都是零毫秒级别的。
实现11

  1 String.prototype.trim = function() {
  2   var str = this,
  3   str = str.replace(/^\s+/, ‘‘);
  4   for (var i = str.length - 1; i >= 0; i--) {
  5     if (/\S/.test(str.charAt(i))) {
  6       str = str.substring(0, i + 1);
  7       break;
  8     }
  9   }
 10   return str;
 11 }

实现10已经告诉我们普通的原生字符串截取方法是远胜于正则替换,虽然是复杂一点。但只要正则 不过于复杂,我们就可以利用浏览器对正则的优化,改善程序执行效率,如实现8在IE的表现。我想通常不会有人在项目中应用实现10,因为那个 whitespace 实现太长太难记了(当然如果你在打造一个类库,它绝对是首先)。实现11可谓其改进版,前面部分的空白由正则替换负责砍掉,后面用原生方法处理,效果不逊 于原版,但速度都是非常逆天。
实现12

  1 String.prototype.trim = function() {
  2   var str = this,
  3   str = str.replace(/^\s\s*/, ‘‘),
  4   ws = /\s/,
  5   i = str.length;
  6   while (ws.test(str.charAt(--i)));
  7   return str.slice(0, i + 1);
  8 }

实现10与实现11在写法上更好的改进版,注意说的不是性能速 度,而是易记与使用上。和它的两个前辈都是零毫秒级别的,以后就用这个来工作与吓人。

时间: 2024-10-20 05:24:49

js去除空格12种方法的相关文章

js去除空格(trim方法)

/** * 去空格 */ String.prototype.trim=function(){ return this.replace(/(^\s*)|(\s*$)/g, ""); }; /** *去左空格 */ String.prototype.ltrim=function(){ return this.replace(/(^\s*)/g,""); }; /** * 去右空格 */ String.prototype.rtrim=function(){ return

js 去除空格与换行

js 去除空格与换行 //去除空格 String.prototype.Trim = function() { return this.replace(/\s+/g, ""); } //去除换行 function clearBr(key) { key = key.replace(/<\/?.+?>/g,""); key = key.replace(/[\r\n]/g, ""); return key; } //去除左侧空格 functi

动态加载JS脚本的4种方法

要实现动态加载JS脚本有4种方法: 1.直接document.write <script language="javascript"> document.write("<script src='test.js'><\/script>"); </script>   2.动态改变已有script的src属性 <script src='' id="s1"></script> <

让一个元素隐藏的12种方法

1.display:none 显示为无 2.visibility:hidden  隐藏 3.width\height 4.透明度 opacity:0 5.left\top 6.margin负值 7.用另一个div遮盖 8.z-index负值 9.transform:sale() 缩放 10.transform:translate() 位移 听说有12种方法,欢迎大家补充!!!

js数组去重三种方法

本文讲述三种js去重方法 第一种方法思路: 1.构建一个新的数组存放结果2.for循环中每次从原数组中取出一个元素,查看元素是否在结果数组3.若结果数组中没有该元素,则存到结果数组中,否则跳入下次循环.代码如下: 1 Array.prototype.unique = function(){ 2 var res = [this[0]]; 3 for(var i = 1; i < this.length; i++){ 4 if(res.indexOf(this[i])>=0){ 5 continu

js去空格,trim()方法使用

----------------------------------js去空格---------------------------   去除字符串左右两端的空格,在vbscript里面可以轻松地使用 trim.ltrim 或 rtrim,但在js中却没有这3个内置方法,需要手工编写.下面的实现方法是用到了正则表达式,效率不错,并把这三个方法加入String对象的内置方法中去. 写成类的方法格式如下:(str.trim();) <script language="javascript&qu

判断JS数据类型的几种方法

原文转自http://www.cnblogs.com/onepixel/p/5126046.html! 说到数据类型,我们先说一下JavaScript 中常见的几种数据类型: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Function,Array,RegExp,Date,... 很多时候我们都需要通过判断变量的数据类型来进行下一步操作,下面我们介绍常用的4种方法: typeof ''; // strin

js单线程和js异步操作的几种方法

一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM. 这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准? 单线程就意味着,所有任务需要排队,前一个任务结束,才会执

JS去重的几种方法

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //第一种方法 Array.prototype.removeDuplicate = function(){ var n = []; for(var i=0;i<this.length;i++