Remove whitespace sequences within strings using JQuery

Question

HTML

<h3>Original String</h3>
    <pre class="original">      Paragraph of text with       multiple    white   spaces before and after.       </pre>
    <br>
 <h3>Trimmed String</h3>
 <pre class="trimmed"></pre>

JQuery

$(document).ready(function(){
        var myStr = $(".original").text();
        var trimStr = $.trim(myStr);
        trimStr = trimStr.replace(/[\r\n]+/g, "");
        $(".trimmed").html(trimStr);
    });

The above code is trimming start and end of paragraph but not between. The output is:

Paragraph of text with       multiple    white   spaces before and after.

I want the output to be

Paragraph of text with multiple white spaces before and after.

Here is my JS Fiddle: https://jsfiddle.net/n5t3cse1

What am I doing wrong? Please suggest. Thanks!

Why are you using the <pre> tag instead of the <p> tag?

Sean
– Sean

2020-08-12 13:09:02 +00:00
Commented Aug 12, 2020 at 13:09 — Sean
– Sean, Commented Aug 12, 2020 at 13:09

Sajjad Ali · Accepted Answer · 2020-08-12 13:27:18Z

2

You could get this done using a single line.

$(document).ready(function(){
  $(".trimmed").html($(".original").text().replace(/\s+/g,' ').trim())
});

The regex finds any sequential spaces and replace() function replaces them by a single space. Trim() is used to remove white spaces from start and end of string.

edited Aug 12, 2020 at 13:27

answered Aug 12, 2020 at 13:14

Sajjad Ali

3043 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sean Over a year ago

This answer could be improved by explaining what the regex you added does.

doğukan · Accepted Answer · 2020-08-12 13:10:13Z

1

Replace two or more space characters with a single space by using regex.

$(document).ready(function() {
  var myStr = $(".original").text();
  var trimStr = myStr.replace(/ {2,}/g, ' ').trim();
  $(".trimmed").html(trimStr);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Original String</h3>
<pre class="original">      Paragraph of text with       multiple    white   spaces before and after.       </pre>
<br>
<h3>Trimmed String</h3>
<pre class="trimmed"></pre>

answered Aug 12, 2020 at 13:10

doğukan

28k15 gold badges67 silver badges79 bronze badges

Comments

Sean · Accepted Answer · 2020-08-12 13:10:58Z

1

After trimming the string, you could replace any sequence of more than one space with a single space:

trimStr = trimStr.replace(/\s{2,}/g, " ");

answered Aug 12, 2020 at 13:10

Sean

8,3875 gold badges30 silver badges55 bronze badges

Comments

Dinesh · Accepted Answer · 2020-08-12 13:13:56Z

0

You can run a loop to remove the double spaces until no double space is found.

$(document).ready(function(){
        var myStr = $(".original").text();
        var trimStr = $.trim(myStr);
        while(trimStr.indexOf('  ')!=-1)
          trimStr = trimStr.replace('  ', '');
        $(".trimmed").html(trimStr);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Original String</h3>
    <pre class="original">      Paragraph of text with       multiple    white   spaces before and after.       </pre>
    <br>
 <h3>Trimmed String</h3>
 <pre class="trimmed"></pre>

answered Aug 12, 2020 at 13:13

Dinesh

1,0476 silver badges17 bronze badges

Collectives™ on Stack Overflow

Remove whitespace sequences within strings using JQuery

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related