Parsowanie URL z wykorzystaniem usługi Angulara

Ostatnio musiałem się dobrać do części path URL po zwróconego przez ajax call. Problem polegał na tym, że część scheme, host, port mogły być różne i się zmieniać. To znaczy, port mógł istnieć lub nie, scheme mogła być różna zaś host mógł być wielokropkowy. Pewnie jakimiś hackami mógłbym się do tego dobrać rozsądnie. Ale po co?

Skoro można wykorzystać trick, stworzyć element a i przypisać do href url. Dzięki czemu mamy dostęp do wszystkich własności jakich potrzebujemy :)

Dla przykładu, wklejcie to w dev tools (ctrl+shift+i) i zobaczcie co się stanie:

var x = document.createElement('a');
x.href = 'http://www.contoso.com:2345/cos/tam/jeszcze?a=10'
console.dir({
  hash: x.hash,
  host: x.host,
  hostname: x.hostname,
  href: 'http://www.contoso.com/cos/tam/jeszcze?a=10',
  pathname: x.pathname,
  port: x.port,
  protocol: x.protocol,
  search: x.search,
  file: x.pathname.split('/').pop()
})

Dobre, i przyjemne :)

Jakbyście chcieli to wykorzystać w angular, to można to zamknąć w serwis, do tego dodając parsowanie query string do obiektu :)

(function (angular, document, undefined) {

    var app = angular.module('util.services', [ ]);

    app.factory('uri', function () {

        var element;

        function unserialize (query) {
            var params = {};
            // http://stevenbenner.com/2010/03/javascript-regex-trick-parse-a-query-string-into-an-object/
            query.replace(      new RegExp("([^?=&]+)(=([^&]*))?", "g"),      function($0, $1, $2, $3) { params[$1] = $3; }
            );

            return params;
        }

    return {
        parse: function (url) {

            if(!element) {
                element = document.createElement('a');
            }

            element.href = url;
            return {
                hash: element.hash,
                host: element.host,
                hostname: element.hostname,
                href: url,
                pathname: element.pathname,
                port: element.port,
                protocol: element.protocol,
                search: element.search,
                file: element.pathname.split('/').pop(),
                params: unserialize(element.search)
            }
        }
    };
});


})(window.angular, window.document);