CODEWITHSUNDEEP
javascriptangularurl
Manwal
Manwal

Reputation: 23836

Angular url plus sign converting to space

I have angular application where i want to pass plus sign + in query string like:

http://localhost:3000/page?name=xyz+manwal

When I am hitting this URL its converting to:

http://localhost:3000/page?name=xyz%20manwal

Where %20 refer to space . How can I prevent this conversion?

Upvotes: 58

Views: 64849

Answers (13)

Surya R Praveen
Surya R Praveen

Reputation: 3745

If any of these fails to stop converting '+' to '%2B'

  1. encodeURIComponent, encodeURI - Not working
  2. decodeURIComponent, decodeURI - Not working

Then try this

Split the URL using '+' and pass using fragments like below

if (this.relativeInternalUrl.includes('+')) {
        this.router.navigate([this.relativeInternalUrl?.split('+')[0]], {
          fragment: this.relativeInternalUrl?.split('+')[1],
        });
      } else {
        this.router.navigate([this.relativeInternalUrl]);
      }

Upvotes: 0

Zeshan
Zeshan

Reputation: 101

Not tested above mentioned answers but you can simply use following easy and tested solution

let username='[email protected]';
let encodedUsername=encodeURIComponent(username);

this will gives you following result

testuser%2B3%40gmail.com

Upvotes: 0

Yossi G.
Yossi G.

Reputation: 1151

We solved this problem by converting the way we marshal the data up to the server. Instead of sending it as querystring parameters on the target URL we are now posting the data in the body of the http request. Data passed on the querystring is exposed to all the risks of the transport; encoding conversion and also the risk of exceeding the legal length of the URL. Sending the data within the body eliminates these issues.

Of course, this isn't relevant if you need the data on the URL. But if you don't need the data on the URL, transporting the data values on the URL as opposed to within the body is like duct-taping yourself to the wing, when you could be riding in coach! :-)

Anyway, this solved our problem. I hope this can help solve yours.

Upvotes: 0

Binay
Binay

Reputation: 55

Use JavaScript function: encodeURIComponent().

In this case, encode string as : encodeURIComponent("xyz+manwal"). output will be xyz%2Bmanwal

Upvotes: 0

Tanmay Ingole
Tanmay Ingole

Reputation: 83

Below code can help: by adding("-")

queryParams: {
    category: product.category,
    '': product.title.toString().replace(/\s/g, '-')
}

Upvotes: 0

Vijay Babu
Vijay Babu

Reputation: 41

Use new HttpUrlEncodingCodec().encodeValue("+91")

Upvotes: 1

ddc
ddc

Reputation: 965

I am using Angular 7, the + (this one "xyz+manwal") is replaced with a space (like this "xyz manwal") in the URI when it reaches to back-end code.

encodeURI() dindn't work for me, I used encodeURIComponent() it converted + to %2B

     encodeURIComponent("xyz+manwal") => "xyz%2Bmanwal"

below is the example code

    // filter = xyz+manwal
    let filterString =  encodeURIComponent(filter); // filterString = xyz%2Bmanwal

    return this.http.get<ListResults>("http://website/query-results?" + filterString ).pipe(
      retry(3),
      catchError(........)
    )

Upvotes: 2

Daniel Congrove
Daniel Congrove

Reputation: 3679

In Angular v6.1.10, if you just need to fix the "+" sign encoding in one spot, this is what worked for me.

getPerson(data: Person) {

  const httpParams = new HttpParams({
    fromObject: {
      id: data.id,
      name: data.name,
      other: "xyz+manwal"
    }
  });

  // manually encode all "+" characters from the person details
  let url = BASE_URL + "/select?" + httpParams.toString().replace(/\+/gi, '%2B');

  return this.http.get(url);
}

I found if you try to replace the "+" signs when initializing the httpParams object it doesn't work. You have to do the replacement after converting httpParams to a string, as shown on this line:

let url = BASE_URL + "/select?" + httpParams.toString().replace(/\+/gi, '%2B');

Upvotes: 10

Piotr Korlaga
Piotr Korlaga

Reputation: 3468

You can override default angular encoding with adding Interceptor which fixes this:

import { HttpInterceptor, HttpRequest, HttpEvent, HttpHandler, HttpParams, HttpParameterCodec } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";

@Injectable()
export class EncodeHttpParamsInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const params = new HttpParams({encoder: new CustomEncoder(), fromString: req.params.toString()});
    return next.handle(req.clone({params}));
  }
}


class CustomEncoder implements HttpParameterCodec {
  encodeKey(key: string): string {
    return encodeURIComponent(key);
  }

  encodeValue(value: string): string {
    return encodeURIComponent(value);
  }

  decodeKey(key: string): string {
    return decodeURIComponent(key);
  }

  decodeValue(value: string): string {
    return decodeURIComponent(value);
  }
}

and declare it in providers section of in app.module.ts

providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: EncodeHttpParamsInterceptor,
      multi: true
    }
]

Upvotes: 45

abahet
abahet

Reputation: 10633

In Angular 5.2.7+ the "+" is replaced with space " " in a query string.

Here is the corresponding commit : fix(router): fix URL serialization

If you want to change this behaviour and replace the "+" with "%2B" you can create a custom url serializer and provide it in the AppModule providers.

import { DefaultUrlSerializer, UrlSerializer, UrlTree } from '@angular/router';

export default class CustomUrlSerializer implements UrlSerializer {
    private _defaultUrlSerializer: DefaultUrlSerializer = new DefaultUrlSerializer();

    parse(url: string): UrlTree {
        // Encode "+" to "%2B"
        url = url.replace(/\+/gi, '%2B');
        // Use the default serializer.
        return this._defaultUrlSerializer.parse(url);
    }

    serialize(tree: UrlTree): string {
        return this._defaultUrlSerializer.serialize(tree).replace(/\+/gi, '%2B');
    }
}

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        { provide: UrlSerializer, useClass: CustomUrlSerializer }
    ],

    entryComponents: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

http://localhost:3000/page?name=xyz+manwal

The URL will be converted to:

http://localhost:3000/page?name=xyz%2Bmanwal

Hope this will help.

Upvotes: 19

Manwal
Manwal

Reputation: 23836

I have found solution and posting it for future reference. Angular js was converting + sign into %2B.

Following code prevented that:

.config([
    '$provide', function($provide) {
      $provide.decorator('$browser', function($delegate) {
        let superUrl = $delegate.url;
        $delegate.url = (url, replace) => {
          if(url !== undefined) {
            return superUrl(url.replace(/\%2B/g,"+"), replace);
          } else {
            return superUrl().replace(/\+/g,"%2B");
          }
        };
        return $delegate;
      });
    }
  ])

Upvotes: 1

FAISAL
FAISAL

Reputation: 34683

This ia a common problem. The + character is used by the URL to separate two words. In order to use the + character in the parameter values, you need to encode your parameter values before adding them as part of the URL. Javascript / TypeScript provide a encodeURI() function for that specific purpose.

URL encoding converts characters into a format that can be transmitted over the Internet. [w3Schools Reference]

Here is how you can fix this problem: 

let encodedName = encodeURI('xyz+manwal');
let encodedURI = 'http://localhost:3000/page?name='+encodedName;

//.. OR using string interpolation
let encodedURI = `http://localhost:3000/page?name=${ encodedName }`;

In the same way, you can decode the parameters using decodeURI() method.

let decodedValue = decodeURI(encodedValue);

Upvotes: 23

user4233758
user4233758

Reputation:

This is a quite common problem. You can pass it normally in application/x-www-form-urlencoded request. No other request will be able to correctly parse +. They will always parse it into %20 instead of %2B.

You would need to manually manipulate the query parameter, there are 2 ways:

  • Encode the parameter into base64 encoding, this way no special character can break you application, but you would need to handle it also on the receiving part (decoding).
  • A simplier solutions would be, before hitting the URL, replace all + signs with %2B. This way the other side will be able to decode it normaly, without the need of a special routine.

For more info you should reffer to hthe following stack overflow questions Android: howto parse URL String with spaces to URI object? and URL encoding the space character: + or %20?

Upvotes: 5

Related Questions