js中去除字符串两端的空白-trim方法
2017-03-21 00:24

js去除字符串两端空格

js中去除字符串两端的空格是一个常见的需求,通常使用jquery的$.trim,或者自己通过字符串的replace方法进行去除两端空格。

通过replace去除两端空白的方法:

str=str.replace(/\s+/g,"");

这种写法不要说你没用过,谁都从菜鸟过来的,在我们对js的正则不熟悉的时候,我们可能会采用这种方式来去除空白。然则这种方法要字符串中间没有空白的时候才能正常工作。

于是,由于我们的成长,我们使用改进了我们的正则:

str=str.replace(/^\s+|\s+$/g,"");

这是我们认识了“^”表示字符串的开始,"$"表示字符串的结束时,我们对trim功能所做的正则修改,通过中间的"|"或者符号连接,我们可以去除开端和结尾的空白字符。

匹配一个单个的空白字符,包括空格,tab,换页,换行和其他的unicode空白字符,

相当于[\f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]


这是在正则表达式API中对\s的介绍。这么看来我们的trim方法已经算是很完美了,基本上我们能想到的空白字符,"\s"都包含了,还有一些了unicode编码的空白字符。

我们很熟悉jquery库,也知道jquery中有一个$.trim方法用来去除字符串两端的空白,那么jquery的$.trim方法跟我们的trim方法是否一样呢,还是有一些其他的处理呢?

jquery的$.trim方法

jquery中的$.trim方法,是一个工具方式,是一个代码量极少的方法。

jQuery.extend({
    // Support: Android<4.1, IE<9
    trim: function( text ) {
        return text == null ?
                "" :
              ( text + "" ).replace( rtrim, "" );
    },
    ...
});
// Support: Android<4.1, IE<9
// Make sure we trim BOM and NBSP
rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,

这里使用的jQuery.extend方法就不介绍了,前文有专门的讲解。$.trim方法确实代码量很少,只是增添了一个null判断,并且它也是使用的replace方法进行去除两端空白的。

jquery使用的正则rtrim跟我们的正则有些许区别,多添加了两个东西"\uFEFF",“\xA0”。这两个是什么东西呢?

先说“\uFeFF”,是一个空白字符,叫字节序标识符,又称作BOM。中使用eclipse或者editplus时,有一种编码就是UTF-8+BOM,而我们保存的文件是UTF-8+BOM的话,就会出现这种字符。

“\xA0”前面的x表示16进制的表示法。表示的是“&nbsp;”,是去除字符串中的空格实体字符。

那么jquery多加的这两个字符就是去除了BOM和&nbsp; 。但是你反过头来看上面正则中对"\s"的解释,它是包含这两个字符的。其中的"\u00a0"就是“\xA0”。

也就是说,在高级浏览器中,采用我们自以为正确的replace正则是OK的。jquery多加的这两个字符是为了兼容低版本的IE和anroid的。这个兼容是因为这些低版本浏览器中的\s正则没有包括这两个字符而导致的。

总结

trim方法或者$.trim方法虽然简单,但是它包含的正则才是重点,jquery中虽然看似不起眼的添加了两个字符正则来兼容低版本浏览器,但做到这个兼容那是需要对ESMA的编码相当了解熟悉的。一些别人做的兼容,是技能,而我们学过来,是知识。我英语水平不是很好,而且翻墙也比较费劲,我也只能是学知识,没办法去学技能去了。你呢?你英语水平高的话,可以从W3C的文档中学到更多关于web,js,css,正则的细节的东西。


原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(4597)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1