Reading Time: 3 minutes

2,154 Views

Inside this article we will see that how can we remove white spaces from a string using jquery. This tutorial will give you the idea about remove all spaces from string in jquery.

Article will be super easy to understand and very easy to implement in your code.

For example –

String with space as – Online Web Tutor

String with no space – OnlineWebTutor

We will use jquery concept to remove all spaces from a sting.

Learn More –

Let’s get started.

Create an Application

Create a folder with name remove-space. Create a file index.html into it.

Open index.html and write this complete code into it.

<html>

<head>
    <title>How to remove all spaces from string in JQuery?</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>
    <div class="container" style="margin-top: 30px;">
        <div class="row">
            <div class="col-md-12 offset-md-3 mt-5">
                <h4>How to remove all spaces from string in JQuery?</h4>
                <div class="panel panel-primary">
                    <div class="panel-heading">How to remove all spaces from string in JQuery?</div>
                    <div class="panel-body">
                        <form class="form-horizontal" action="#">
                            <div class="form-group">
                                <label class="control-label col-sm-2" for="file">String:</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="string" name="string" placeholder="Enter string...">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="button" class="btn btn-primary">Remove space</button>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <h3 id="remove-space-string"></h3>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $("button").click(function(){
            var myText = $("#string").val();
            var remove_space = myText.replace(/ /g,'');
            $("#remove-space-string").text(remove_space);
        });
    </script>
</body>

</html>

Application Testing

Open browser and type this –

URL – http://localhost/remove-space/index.html

The above method will remove all spaces from string.

If in case if you have string like this –

var string = "      my sample string value   ";

Now, to remove white spaces from string front and end we will use jquery trim() method.

$.trim(string);

We hope this article helped you to learn Create Profile Image of First Letter of First & Last Name using jquery Tutorial in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.