web-dev-qa-db-fra.com

Obtenir l'URL relative de l'URL absolue

Je souhaite obtenir l'URL relative à partir d'une URL absolue en JavaScript à l'aide de regex et de la méthode replace.

J'ai essayé ce qui suit mais cela ne fonctionne pas:

var str="http://localhost/mypage.jsp";
document.write(str.replace("^[\w]*\/\/[\w]*$",""));
javascriptregexurl
22
user549757

Si par "URL relative" vous entendez la partie de la chaîne après le premier single /, alors c'est simple:

document.write(str.replace(/^(?:\/\/|[^\/]+)*\//, ""));

Cela correspond à tous les caractères jusqu'au premier single / de la chaîne et les remplace par la chaîne vide.

Dans: http://localhost/my/page.jsp -> Out: /my/page.jsp

24
Tim Pietzcker

Une bonne façon de faire est d'utiliser les fonctionnalités natives d'analyse des liens du navigateur, à l'aide d'un élément a:

function getUrlParts(url) {
    var a = document.createElement('a');
    a.href = url;

    return {
        href: a.href,
        Host: a.Host,
        hostname: a.hostname,
        port: a.port,
        pathname: a.pathname,
        protocol: a.protocol,
        hash: a.hash,
        search: a.search
    };
}

Vous pouvez ensuite accéder au chemin avec getUrlParts(yourUrl).pathname.

Les propriétés sont les mêmes que pour location object.

51
lonesomeday

L'extrait ci-dessous renvoie l'URL absolue de la page.

 var myURL = window.location.protocol + "//" + window.location.Host  + window.location.pathname;

Si vous avez uniquement besoin de l'URL relative, utilisez simplement l'extrait ci-dessous.

 var myURL=window.location.pathname;

Checkout obtenir une URL relative à l'aide de Javascript pour plus de détails et pour obtenir plusieurs façons d'obtenir les mêmes fonctionnalités. 

19
Srinivas Ramakrishna

N'utilisez pas d'éléments de bas niveau tels que les expressions rationnelles, etc. Ces problèmes ont été résolus par de nombreuses autres personnes. Surtout les cas Edge.

Regardez URI.js , il devrait faire le travail: http://medialize.github.io/URI.js/docs.html#relativeto

var uri = new URI("/relative/path");
// make path relative
var relUri = uri.relativeTo("/relative/sub/foo/sub/file"); // returns a new URI instance
// relUri == "../../../path"
5
koppor

URL.getRelativeURL

Il existe une extension de domaine public pour l'objet URL standard appelé getRelativeURL.
Il y a quelques réglages intéressants comme force reload, vous devriez le vérifier!

Essayez-le en direct.Vue sur Gist.

Exemple d'utilisation

//syntax: <URL to convert>.getRelativeURL(<relative to this URL>)

//link from Mypage to Google
a = new URL("https://google.com/search");
a.getRelativeURL("https://mypage.com")
== "//google.com/search";

//link from the current location.href
a.getRelativeURL();

//link from Olutsee to Polk
var from = new URL("http://usa.com/florida/baker/olutsee");
var to   = new URL("http://usa.com/florida/polk");
to.getRelativeURL(from) == "../../polk";
1
m93a

n'oubliez pas que \ est un caractère d'échappement dans les chaînes. Par conséquent, si vous souhaitez écrire des expressions rationnelles dans des chaînes, veillez à saisir \ deux fois pour chaque \ dont vous avez besoin. Exemple: /\w/ → "\\w"

1
LeleDumbo

Vous trouverez ci-dessous un script indiquant que nous n’avons qu’un problème, c’est un travail manuel, nous voulons ajouter un attribut divisé, c’est-à-dire si le lien de votre site est: Obtenir une URL relative à partir d’une adresse absolue

nous voulons url comme ci-dessous: /questions/6263454/get-relative-url-from-absolute-url

donc dans le code ci-dessous, nous devons ajouter .com au lieu de .net, c'est-à-dire var res = at.split (".net"); ici, nous voulons ajouter que, conformément à nos besoins, je dois séparer les fichiers après .com afin que le code soit "var res = at.split (". com ");".

je pense que vous avez compris ce point si vous avez encore des doutes, faites-le moi savoir s'il vous plaît et pour voir les changements dans le code en inspectant:

$(document).ready(function(){
	$("a").each(function(){
    var at= $(this).attr("href");
    var res = at.split(".net");
    var res1 = res[0];
    var res2 = res[1];
    alert(res2);
    $(this).attr("href",res2);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
  <a href="https://jsfiddle.net/boilerplate/jquery2">Change color</a>
</div>
<div id="banner-message">
  <p>Hello World</p>
  <a href="https://jsfiddle.net/boilerplate/jquery3">Change color</a>
</div>

0
Shivasagar