<h1>Função parse_url()</h1>
<p>Conversão da função <i>parse_url</i> do PHP para Javascript.</p>
<p>Digite uma url no campo abaixo e clique em Resolver para vê-la desmembrada.</p>
<form action="#" onsubmit="javascript:resolver();">
  <input id="url" name="url" type="text">
  <input type="submit" value="Resolver">
  <p>Resultado:</p>
  <div id="resultado"></div>
</form>
:root {
  background-color: #444;
  color: #f0f0f0;
  font-family: arial;
  font-size: 0.7em
}
div#resultado {
  width: 100%;
  max-width: 500px;
  min-height: 150px;
  border: 1px solid red;
}
/**
*  Exemplo e teste de utilização da função
*  Acionada pelo botão Resolver do formulario.
*  
*  URLs para testar:
*      1. URL passando login de usuário, path e valores na querystring 
*         http://usuário:senha@nomedohost.com/path1/path2/doc.html?var1=valor1&var2=valor2&var3=valor3
*      2. URL com link para uma ancora no próprio documento (fragment).
*         http://www.nomedohost.com/path1/path2/doc.html#anc_xlz
*/
var resolver = function() {

  var url = document.getElementById("url").value;
  
  var parse = parse_url(url);
  
  // Exibindo o resultado
  var html = "";
  html = "url: " + parse["this_url"] + "<br>";
  html += "scheme: " + parse["scheme"] + "<br>";
  html += "host: " + parse["host"] + "<br>";
  html += "path: " + parse["path"] + "<br>";
  html += "user: " + parse["user"] + "<br>";
  html += "pass: " + parse["pass"] + "<br>";
  html += "fragment: " + parse["fragment"] + "<br>";
  html += "querysting (JSON): " + JSON.stringify(parse["query"]) + "<br>";
  html += "<br>(Veja na seção Console abaixo, a querysting.)<br>";

  console.log(parse["query"]);   // soh no console é possível visualizar o objeto

  document.getElementById("resultado").innerHTML = html;
  
}


/**
*  Conversão da Função do PHP parse_url() para Javascript.
*
*  Esta função retorna uma matriz associativa com os vários 
*  componentes que estão presentes em uma url.
* 
*  Autor: Jorge rodrigues - jan/2018
*     http://concepcaoweb.com.br
*     http://jorgerodrigues.com.br
*/
var parse_url = function(url) {

  // Declarando o array de retorno
  var result = {};
  // Decodificando o UTR caso esteja codificado
  var this_url = decodeURIComponent(url).slice(0);
  // Isolando o protocolo
  var scheme = this_url.substring(0, this_url.indexOf(":"));
  
  if(this_url.indexOf("?")>0) {
    // Isolando o host
    var host = this_url.substring(this_url.indexOf("/")+2, this_url.indexOf("?"));
    // Isolando a querystring
    if(this_url.indexOf("#")>0) {
      var query = this_url.substring(this_url.indexOf("?")+1,this_url.indexOf("#"));
    } else {
      var query = this_url.substring(this_url.indexOf("?")+1);
    }
  } else {
    // Isolando o host
    var host = this_url.substring(this_url.indexOf("/")+2);
    // Isolando a querystring
    var query = "";
  }

  // Isolando usuário e senha  
  var user = host.substring(0, host.indexOf(":"));
  var pass = host.substring(host.indexOf(":")+1, host.indexOf("@"));
  // Isolando ancora
  if(this_url.indexOf("#")>0) {
    var fragment = this_url.substring(this_url.indexOf("#")+1);
  }
  
  if(host.indexOf("?")>0) {
    // Isolando o path
    var path = host.substring(host.indexOf("/")+1, host.indexOf("?"));
  } else {
    // Isolando o path
    var path = host.substring(host.indexOf("/"));
  }

  // Tratando o host
  host = host.substring(0, host.indexOf("/"));

  // Montando array com os elementos (var=valores) da querystring  
  if(query!="") {
    var partes = query.split('&');
    var query = {};
    partes.forEach(function (parte) {
      var keyValue = parte.split('=');
      var key = keyValue[0];
      var value = keyValue[1];
      query[key] = value;
    });
  }  
  
  // Montando o array de retorno
  if(this_url!="") result["this_url"] = this_url;
  if(scheme!="") result["scheme"] = scheme;
  if(host!="") result["host"] = host;
  if(path!="") result["path"] = path;
  if(query!="") result["query"] = query;
  if(user!="") result["user"] = user;
  if(pass!="") result["pass"] = pass;
  if(fragment!="") result["fragment"] = fragment;
  
  return result;
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.