js去除字符串空格，实现trim()方法

最新推荐文章于 2024-08-12 16:53:30 发布

Never Yu

最新推荐文章于 2024-08-12 16:53:30 发布

阅读量3.2k

点赞数 1

分类专栏：前端文章标签： javascript jquery web前端

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.csdn.net/csdn_yudong/article/details/52371001

版权

前端专栏收录该内容

181 篇文章 16 订阅

订阅专栏

本文章地址：http://blog.csdn.net/csdn_yudong/article/details/52371001
本文由 Never_yu 创作，转载请保留出处。

有时候，我们在一个小项目中，或者demo中，或者改以前的代码的时候，需要用到trim()来去除字符串中的空格，但是为了这么一点东西，去引入jQuery，又心有不甘。所以，只得自己来用JavaScript实现这功能。

jQuery实现去除字符串的空格是如此的简单，这里就不做介绍了，本文主要讲解用原生的JavaScript来实现去除字符串中空格的问题。

var T = {
    //去除字符串左空格
    ltrim : function(s) {
        return s.replace(/^(\s*| *)/,'');
    },
    //去除字符串右空格
    rtrim : function(s) {
        return s.replace(/(\s*| *)$/,'');
    },
    //去除字符串左右空格
    trim : function(s) {
        return this.ltrim(this.rtrim(s));
    },
    //去除字符串中所有空格
    trim_all : function(text) {
        text = text.replace(/^\s+/,'');
        for(var i = text.length-1; i>=0; i--)
        {
            if(/\S/.test(text.charAt(i)))
            {
                text = text.substring(0, i + 1);
                break;
            }
        }
        return text;
    }
};

在这里，我们封装了一个变量T，变量里面有4个方法，分别是去除左空格，去除右空格，去除两端空格和去除所有空格。

下面写一个demo演示一下，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯js实现的去除字符串空格</title>
    <script>
        window.onload = function(){
            var T = {
                //去除字符串左空格
                ltrim : function(s) {
                    return s.replace(/^(\s*| *)/,'');
                },
                //去除字符串右空格
                rtrim : function(s) {
                    return s.replace(/(\s*| *)$/,'');
                },
                //去除字符串左右空格
                trim : function(s) {
                    return this.ltrim(this.rtrim(s));
                },
                //去除字符串左右空格
                trim_all : function(text) {
                    text = text.replace(/^\s+/,'');
                    for(var i = text.length-1; i>=0; i--)
                    {
                        if(/\S/.test(text.charAt(i)))
                        {
                            text = text.substring(0, i + 1);
                            break;
                        }
                    }
                    return text;
                }
            };

            var username = document.getElementById('username');
            var ltrim = document.getElementById('ltrim');
            var rtrim = document.getElementById('rtrim');
            var trim = document.getElementById('trim');
            var get = document.getElementById('get');
            ltrim.onclick = function(){
                get.innerText = T.ltrim(username.value);
            }
            rtrim.onclick = function(){
                get.innerText = T.rtrim(username.value);
            }
            trim.onclick = function(){
                get.innerText = T.trim_all(username.value);
            }
        }

    </script>
</head>
<body style="padding: 50px;">
    <input type="text" id="username">
    <button id="ltrim">ltrim</button>
    <button id="rtrim">rtrim</button>
    <button id="trim">trim</button>
    <span id="get" style="background-color: #ccc;"></span>
</body>
</html>