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" }}

Solution 1

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, "");

Solution 2

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");

Solution 3

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, "");
  }

}

Comments

[Admin]

I would use /\s*/g to increase performance, but upvote for you anyway.

[Babulaas]

Thank you for the feedback.How do I use this in my pipe/edit my pipe.

[Jan B.]

Exactly like you do now, just use replace instead of trim when returning from your transform function

[Babulaas]

thanks I already fixed it before reading this. Thank you very much

[isherwood]

Link-only answers are not considered ideal at SO. They can die and rot. Please include the relevant information here, in your post.

[dovetalk]

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...

[Aravindhan R]

This is not a related answer. Understand the question then answer.

[Sébastien Temprado]

You should explain why the OP solution doesn't work and how yours works

[Nesar]

stackblitz.com/edit/angular-pipe-remove-spaces Here's a implementation of @Nirav's solution