js String.prototype.trim字符去前后空格的扩展

所属分类: 网络编程 / JavaScript 阅读数: 145
收藏 0 赞 0 分享

最近学习js的时候发现的这个函数,这样很方便地去除前后空格,用正则实现,简单方便。下面脚本之家小编就为大家分享一下几种实现方式。

String.Prototype.trim()

trim()返回一个字符串两端空白字符被删除的新字符串,不影响原字符串。

/*内置对象添加方法:String.prototype.trim(给String添加一个trim方法)
*^这个是以什么什么开头
*$这个是以什么什么结尾
*‘/s是String /d是数字'
*replace(/^\s+/ , "")把以字符开头的字符串替换为空字符串,
*replace(/\s+$/ , "")把以字符结尾的字符串替换为空字符串,
*/

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

第一种实现方式:理论上算是比较不错的

具体的可以查看这篇文章:

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/trim

if (!String.prototype.trim) {
 String.prototype.trim = function () {
 return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
 };
}

第二种实现方式

从国内网站看到的,测试没问题,推荐使用

 String.prototype.trim = function(a) {
 var b = (this + "").replace(/(^[ \t\n\r\f\x0b\xa0]*)|([ \t\n\r\f\x0b\xa0]*$)/g, "");
 a && (a = (a + "").replace(/([\[\]\(\)\.\?\/\*\{\}\+\$\^\:])/g, "\\$1"), b = b.replace(new RegExp("(^[" + a + "]*)|([" + a + "]*$)", "g"), ""));
 return b
};

第三种、范围有点小,推荐学习,不推荐使用

String.prototype.trim = function(){ 
 //用正则表达式将前后空格用空字符串替代。 
 return this.replace(/(^\s*)|(\s*$)/g,""); 
 } 

第四种,不用正则实现

var str = " ac c ";
//使用String prototype 给用添加自定义方法。
String.prototype.trim = function(){
 var start = 0;
 var end = code.length-1;
 while(start<=end && this.charAt(start) == ' '){
	start++;
 }
 while(start<=end && this.charAt(end) == ' '){
	end--;
 }
 //使用字符截取指定字符
 return this.substring(start,end+1);
 };
 //使用原型直接调用
 console.log("--"+str.trim()+"--")

推荐使用第一种、第二种方法。

下面是其他网友的补充,大家可以参考一下

今天呢 知乎看到一道题 说是网易面试题,要求自己写一个trim()方法,

实现 var str = " a sd "; 去掉字符串两端的空格。

直接上码

var str = " a sd ";
 
 function trim (st) {
 // 先把字符串分割成数组
 var arr = st.split("");
 // 从前面删除空格
 for (let i = 0; i < arr.length; i++) {
 // 如果数组元素是空格则删除
 if (arr[i] === " ") {
 arr.shift();
 /*console.log(arr.length, i)*/
 // 如果当前元素的下一项不是空格退出循环
 if (arr[i+1] !== " ") {
 break;
 }
 
 }
 }
 // 后前面删除空格
 for (let i = arr.length; i >= 0; i--) {
 // 如果数组元素是空格则删除
 if (arr[i-1] === " ") {
 arr.pop();
 // 如果当前元素的前一项不是空格退出循环
 if (arr[i-2] !== " ") {
 break;
 }
 }
 }
 arr = arr.join("");
 /*console.log(arr);*/
 return arr;
 }
 var a = trim(str);
 console.log(a); //a sd//

原理注释写的很清楚

不用正则实现的代码

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; 
} 
function delrd(str){
var reg=/,$/gi; 
str=str.replace(reg,"");
return str;
}

以上就是js String.prototype.trim字符去前后空格的扩展的详细内容,更多关于String对象增加一个trim方法的资料请关注脚本之家其它相关文章!

更多精彩内容其他人还在看

理解Javascript闭包

闭包是ECMAScript一个很重要的特征,但是却很难用合适的定义来描述它。虽然闭包很难清晰地描述,但是,却很容易创建,或者说,不小心创建。然而,闭包的存在其实是有一定的潜在问题的。为了避免“不小心”地创建闭包,以及更好地利用闭包的优点,有必要理解闭包的机制。闭包的定义 ... 查看详情
收藏 0 赞 0 分享

Javascript delete 引用类型对象

如下面例子: 复制代码 代码如下:var testVar = {            a : {      ... 查看详情
收藏 0 赞 0 分享

JS实现切换标签页效果实例代码

在网页<head>区添加以下代码复制代码 代码如下:<style type="text/css">  <!--  BODY {  PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-S... 查看详情
收藏 0 赞 0 分享

js将json格式内容转换成对象的方法

复制代码 代码如下:{"options":"[{\"text\":\"王家湾\",\"value\":\"9\"},{\"text\":\"李家湾\",\"valu e\":\"10\"},{\"text\":\"邵家湾\",\"value\":\"13\"}]"} <... 查看详情
收藏 0 赞 0 分享

jQuery Mobile 导航栏代码

导航栏是由一组水平排列的链接组成,通常包含在头部或尾部内。 默认情况下,导航栏中的链接将自动变成按钮(不需要 data-role="button")。 使用 data-role="navbar" 属性来定义导航栏:复制代码 代码如下:<div data-role="he... 查看详情
收藏 0 赞 0 分享

基于jquery插件实现常见的幻灯片效果

在网站中使用幻灯片效果的目前很普遍,如何实现,自己经过一番研究,本以为很复杂,想不到却很简单。有现成的jquery插件jquery.KinSlideshow.js。 使用jquery.KinSlideshow.js就可以很轻松的实现幻灯片效果 htm代码: 复制代码 代码如下: ... 查看详情
收藏 0 赞 0 分享

多种方法实现JS动态添加事件

方法一、setAttribute var obj = document.getElementById("obj"); obj.setAttribute("onclick", "javascript:alert('测试');"); 但是IE不支持用 setAttribute 设置某... 查看详情
收藏 0 赞 0 分享

JS实现拖动示例代码

getBoundingClientRect() 来获取页面元素的位置 复制代码 代码如下: document.documentElement.getBoundingClientRect 该方法返回一个对象,从而获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,即分别代... 查看详情
收藏 0 赞 0 分享

JS滚轮事件onmousewheel使用介绍

典型的应用时鼠标滚轮滚动控制图片或者文字的大小,例如此类的转动鼠标滚轮实现缩放等等交互效果中,会用到 Mousewheel 事件。在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+)中,都提供了 “mousewheel” 事件。滚轮事件的兼容性... 查看详情
收藏 0 赞 0 分享

框架页面高度自动刷新的Javascript脚本

实现原理:加载index.htm时候,每隔1秒钟自动调用脚本刷新框架页面代码 代码优点:只需要设置index.html框架页面中的脚本,调用加载的子页面中不需要设置任何代码。 index.htm代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "... 查看详情
收藏 0 赞 0 分享
查看更多