How to remove whitespace in text

Question

How can I trim a text string in my Angular application?

Example

{{ someobject.name }}

someobject.name results in "name abc"

What I like to achieve is name to be "nameabc" (remove all whitespaces).

I already created a pipe and included this in the typescript file and module)

PIPE:

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({ name: 'trim' })
export class TrimPipe implements PipeTransform {
    transform(value: any) {
        if (!value) {
            return '';
        }

        return value.trim();
    }
}

{{ someobject.name | trim }} still results in "name abc" instead of "nameabc" }}

score 18 · Accepted Answer · answered Mar 12 '18 at 13:45

18

According to the docs, the trim() method removes trailing and leading whitespaces, not those in the middle.

https://www.w3schools.com/Jsref/jsref_trim_string.asp

If you want to remove all whitespaces use the replace function:

"name abc".replace(/\s/g, "");

answered Mar 12 '18 at 13:45

Jan B.

6,030
5
32
53

1

I would use `/\s*/g` to increase performance, but upvote for you anyway. – Mar 12 '18 at 13:50
Thank you for the feedback.How do I use this in my pipe/edit my pipe. – Babulaas Mar 12 '18 at 14:03
1

Exactly like you do now, just use ``replace`` instead of ``trim`` when returning from your ``transform`` function – Jan B. Mar 12 '18 at 14:06
1

thanks I already fixed it before reading this. Thank you very much – Babulaas Mar 12 '18 at 14:08

tomichel · Answer 2 · 2019-01-31T19:07:49.310

3

trim() only removes whitespaces from the start and end of a string:

https://www.w3schools.com/Jsref/jsref_trim_string.asp

have a look here to remove whitespaces between strings:

Replace all whitespace characters

the relevant part is to use it like:

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

edited Jan 31 '19 at 19:07

answered Mar 12 '18 at 13:46

tomichel

376
1
4
9

Link-only answers are not considered ideal at SO. They can die and rot. Please include the relevant information here, in your post. – isherwood Jul 05 '18 at 20:28

score 2 · Answer 3 · answered May 23 '20 at 19:40

2

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'removeWhiteSpace'
})
export class RemoveWhiteSpacePipe implements PipeTransform {

  transform(value: any): any {
    if (value === undefined)
      return 'undefined';
    return value.replace(/\s/g, "");
  }

}

answered May 23 '20 at 19:40

Nirav

21
1

You should explain why the OP solution doesn't work and how yours works – Sébastien Temprado May 23 '20 at 21:16
https://stackblitz.com/edit/angular-pipe-remove-spaces Here's a implementation of @Nirav's solution – Nesar Nov 17 '20 at 03:00

Saurabh Bhoyar · Answer 4 · 2019-11-13T07:14:14.793

0

Replace all the whitespace between string

let spaceReg = new RegExp(" ",'g');

let str = "name abc"

str = str.replace(spaceReg,"");

edited Nov 13 '19 at 07:14

answered Nov 13 '19 at 07:05

Saurabh Bhoyar

1
1

score -11 · Answer 5 · answered Apr 03 '19 at 22:17

-11

In my case this is bad:

<div>
  {{ someobject.name }}
</div>

Solution:

<div>{{ someobject.name}}</div>

=S

answered Apr 03 '19 at 22:17

Hector

636
8
16

4

This doesn't appear to be related to the question. They want to remove whitespace inside a result of a variable, not avoid whitespace around it... – dovetalk Apr 03 '19 at 22:45
2

This is not a related answer. Understand the question then answer. – Aravindhan R Mar 11 '20 at 06:32

How to remove whitespace in text

5 Answers5

Linked