webentwicklung-frage-antwort-db.com.de

Rufen Sie die relative URL von der absoluten URL ab

Ich möchte die relative URL von einer absoluten URL in JavaScript mit Regex und der replace-Methode abrufen.

Ich habe folgendes versucht, aber es funktioniert nicht:

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

Wenn Sie unter "relative URL" den Teil der Zeichenfolge hinter dem ersten einzelnen / meinen, ist es einfach:

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

Dadurch werden alle Zeichen bis zum ersten einzelnen / in der Zeichenfolge abgeglichen und durch die leere Zeichenfolge ersetzt.

In: http://localhost/my/page.jsp -> Aus: /my/page.jsp

24
Tim Pietzcker

Eine gute Möglichkeit, dies zu tun, ist die Verwendung der nativen Link-Parsing-Funktionen des Browsers mithilfe eines a-Elements:

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
    };
}

Sie können dann mit getUrlParts(yourUrl).pathname auf den Pfadnamen zugreifen.

Die Eigenschaften sind dieselben wie für das Objekt location .

51
lonesomeday

Das folgende Snippet gibt die absolute URL der Seite zurück.

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

Wenn Sie nur die relative URL benötigen, verwenden Sie einfach den folgenden Ausschnitt

 var myURL=window.location.pathname;

Checkout Relative URL mithilfe von Javascript abrufen Weitere Informationen und mehrere Möglichkeiten, um dieselbe Funktionalität zu erreichen. 

19

Verwenden Sie keine Low-Level-Sachen wie Regexx usw. Diese Dinge wurden von so vielen anderen Leuten gelöst. Besonders die Edge-Fälle.

Werfen Sie einen Blick auf URI.js , es sollte den Job erledigen: 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

Es gibt eine Public-Domain-Erweiterung für das Standardobjekt URL mit dem Namen getRelativeURL.
Es hat ein paar coole Verbesserungen wie force reload, Sie sollten es ausprobieren!

Versuch es live.Blick auf Gist.


Verwendungsbeispiel

//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

vergessen Sie nicht, dass \ ein Escape-Zeichen in Strings ist. Wenn Sie also Regex in Strings schreiben möchten, müssen Sie \ zweimal für jeden benötigten \ eingeben. Beispiel: /\w/"\\w"

1
LeleDumbo

Im Folgenden finden Sie ein Skript dazu. Hier haben wir nur ein Problem, das eine manuelle Arbeit ist. Wir möchten das Split-Attribut hinzufügen, dh, wenn Ihr Site-Link lautet: Relative URL von absoluter URL abrufen

wir möchten wie folgt URL: /questions/6263454/get-relative-url-from-absolute-url

in diesem Code müssen wir .com anstelle von .net hinzufügen, dh var res = at.split (". net"); Hier wollen wir gemäß unserer Anforderung hinzufügen, dass ich mich nach .com trennen muss, so dass der Code "var res = at.split (". com ");" ist.

ich glaube, ihr habt diesen Punkt verstanden, wenn ihr noch Zweifel habt, lasst es mich bitte wissen. und um Änderungen im Code zu sehen, indem ihr Folgendes untersucht:

$(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