JavaScript中trim 方法实现

左手的ㄟ右手 2022-08-07 04:56 206阅读 0赞

Java中的 String 类有个trim() 可以删除字符串前后的空格字符，jQuery中也有trim()方法可以删除字符变量前后的字符串。但是JavaScript中却没有相应的trim() 方法，幸好，JavaScript中有正则表达式，String 对象有replace() 方法，利用JavaScript的正则和replace方法来达到trim() 方法的效果。

接下来介绍两种方法，其实两种方法大同小异。都是在String 对象的prototype属性上进行trim()方法的定义，并提供实现，实现后，便可以通过String对象名.trim()来删除字符串前后的空格字符了。

String.prototype.trim = function() {
        // TODO
    }

# method1 前后空格字符分别替换 #

JavaScript的String 对象有replace方法，可以对String 对象中的字符进行替换，这里我们利用String 对象的replace方法，对前后的空字符串分别替换，达到整体的删除空字符串的效果。

String.prototype.trim = function(){
    	return this.replace(/^\s+/, "").replace(/\s+$/, "");
    }
    
    var sTest1 = "   this is a test sentence.    ";
    alert(sTest1.trim());

解释下trim() 方法的具体方法体

this 在方法内代表的是当前对象

this后面的第一个replace删除的是字符串前面的空格字符

其中  /^\\s+/ 表示的是**开头的1到多个空格字符**，这个正则是**Perl风格**的

也可以用**RegExp对象**替换，可以修改为

var regObj = new RegExp("^\\s+");
    return this.replace(regObj, "").replace(/\s+$/, "");

这里我们只是将匹配前面空格字符的正则表达式方式修改了

同样也可以替换掉后面的正则方式，最后的代码为

var regObj1 = new RegExp("^\\s+");
    var regObj2 = new RegExp("\\s+$");
    return this.replace(regObj1, "").replace(regObj2, "");

# method2 前后空格整体替换 #

整体替换方式与前面的分别替换大同小异，前面是两次replace，用两个正则来分别匹配前面和后面的空格字符，整体替换时，用一个正则表达式，来替换掉前面的空格字符。

String.prototype.trim = function(){
    	return this.replace(/^\s+(.*?)\s+$/, "$1");
    }
    
    var sTest2 = "   this is a new sentence.    ";
    alert(sTest2.trim());

这里return this.replace(/^\\s+(.\*?)\\s+$/, "$1");

使用一个正则/^\\s+(.\*?)\\s+$/**匹配了前后的空格字符**，后面的$1为正则表达式反向引用的结果

$1 就代表**(.\*?) 的值，即删除前后空格的要返回的字符串**。

这里的正则方式也可以修改为RegExp 的方式，这里我就不修改了。

上面介绍的两种方法，都是通过给String 对象的prototype 属性上定义新的方法来完成的。

这里也可以不定义新的trim() 方法，直接通过方法体里面的replace主体来达到删除前后字符串的效果。

附上最后的代码