Parse URL in Ionic/Angular?

Ionic Framework ionic-v3
1

What is the best (and most lightweight) way to parse a URL in Angular/Ionic?

I want to give in a string and then get an object of the parts.
I am specifically looking for an object of the URL parameters.

Any pointers?

2

I think you can explore the document.URL from Javascript.
For example, we have a little trick to detect if we are running for a Cordova platform or not, instead of use the Platform plugin, that is
if(document.URL.includes('https://') || document.URL.includes('http://'))

And have a lot of others differents ways to use the document.URL.

Hope it heps you.

1 Like
3

Unfortunately I don’t want to parse the URL but an URL I get returned from an API :confused:
But thanks for the answer anyway!

4

I think this could help:

http://ziemecki.net/content/javascript-parsing-url-parameters

1 Like
5

This isn’t one question; it’s two. In pure Angular, you can use Router.parseURL, which will turn your string into a URLTree object. But Ionic doesn’t use the Angular Router, so importing that just to parse URLs would be far from a lightweight solution. Instead, you could use node-url or some other npm library like parse-url. I’d suggest you do a search through npm libraries with “url” or “parse url” as your search term. Then check out library APIs and source code to find something that seems to fit your needs. In general, a library with a lot of users is more likely to be better debugged than a library with few users.

1 Like
6

Again, isn’t this just using the current URL from location?

But ok, this shows a (bit hacky) way how to get the parameter values out of there at least - I could mangle that to make it work. Was hoping for something a bit more elegant, where I don’t have to implement all the edge cases myself. But thanks of course, I will go with that if nobody else has any suggestions.

7

Perhaps you like this more

1 Like
8

Oh yes, you understand what I am searching for :slight_smile:

I was just looking at Angular after I found it via Google and thinking how to get this into my Ionic app, as I noticed that the router isn’t used in Ionic as you said… so no go here.

Good suggestion. query-string - npm won’t work as it only expects the query string, but url-parse - npm looks good.

How exactly would I best “import” that into my Ionic project then? I did similar things before, but that always was so hacky and strange. What is the proper way?

9

General comment about npm libraries: it’s usually easiest to find one with an Angular 2 wrapper. Those fit seamlessly into Ionic 2+ in my experience. If that isn’t available, the two main suggestions I’d have are: (1) try to use the library exactly as stated in the library’s readMe and see what happens, or (2) follow this blog post, which might (or might not) be a bit dated but is still useful. Also, option (3): try to install a library, get confused, and post here or Stack Overflow with a concrete question about how to install.

You might have guessed I haven’t used an npm library to parse a URL, so I don’t want to recommend something specific that I haven’t used. But I know how I’d solve your problem if I had it myself, and I’m trying to communicate that.

10

That’s even better than just giving me this one solution - then I can solve these problems by myself in the future ;)[quote=“AaronSterling, post:9, topic:96344”]
(1) try to use the library exactly as stated in the library’s readMe and see what happens
[/quote]

Let’s play that game with https://www.npmjs.com/package/url-parse#usage
I have no idea where to put require() in my Ionic files…

11

I personally try to follow the syntax from Hartington’s blog post. So I’d do something like

import { URL } from 'url-parse';

let testURL = URL(someComplicatedURLString);
console.log(testURL);

I don’t know if that works in your specific situation, but it’s worked for me with several other npm libraries, such as immutable.js and node-uuid.

1 Like
12

I understand you are looking for a more solid solution, but this snippet here is in usage in a few of my projects and works quite well:

function parseURL(url) {
    var parser = document.createElement('a'),
        searchObject = {},
        queries, split, i;
    // Let the browser do the work
    parser.href = url;
    // Convert query string to object
    queries = parser.search.replace(/^\?/, '').split('&');
    for( i = 0; i < queries.length; i++ ) {
        split = queries[i].split('=');
        searchObject[split[0]] = split[1];
    }
    return {
        protocol: parser.protocol,
        host: parser.host,
        hostname: parser.hostname,
        port: parser.port,
        pathname: parser.pathname,
        search: parser.search,
        searchObject: searchObject,
        hash: parser.hash
    };
}
1 Like
13

Did you solve this? I’m also trying to grab the returned URL.