Wie kann man eine URL mit JavaScript kürzen?

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, Webseite, programmieren
19.05.2020, 07:36

Ein sehr einfacher Ansatz:

const urls = [];
urls.push("your URL");

Die URL wäre folgend unter dem Index 0 erreichbar.

const url = urls[0];
console.log(url); // print in console

Statt einer Zahl könnte man auch eine kurze GUID generieren. Auf dieser Seite werden verschieden Lösungsoptionen dazu gezeigt (beachte, dass sich die empfohlenen Bibliotheken auf nodejs beziehen).

const urls = [];
const shortGuid = // create short GUID ...
urls[shortGuid] = "your URL";

Wenn du einen Service wie Bitly erstellen möchtest (zumindest steht der Begriff ja in den Tags), sollten die URLs mit ihren Keys allerdings permanent gespeichert werden. Sei es in einem Cookie (gekürzte Links könnten dann nur vom Nutzer verwendet werden, der den Link generiert hat!) oder einer Datenbank (gekürzte Links können auch geteilt werden). Bei Aufruf der Seite können die Daten wieder hervorgeholt und nach der korrekten URL gesucht werden, auf die weitergeleitet werden soll. Beim Einsatz einer Datei oder Datenbank ist für die Kommunikation mit dieser eine Anwendung vonnöten, die auf Serverseite läuft. Den kompletten Prozess (Speichern, Auslesen, Weiterleiten) würde ich in der benannten Serveranwendung abhandeln.

(...) aber kann den Inhalt der Webseite nicht verarbeiten.

Was du damit meinst, verstehe ich nicht.

Der Response dieser Seite ist:

{"original_url":"https://google.de","short_url":"https://shurli.herokuapp.com/7ZZZZZZZZZZZZZZZ"}

Das heißt, an dieser Stelle werden Daten schon gespeichert (GUID und URL). Wenn man den Wert von short_url aufruft, kommt man auf die Google Startseite.
DieKausalitaet 
Fragesteller
 19.05.2020, 10:59

Kann man den Wert von short_url mit JavaScript aufrufen?

0
regex9  19.05.2020, 12:07
@DieKausalitaet

Du kannst es versuchen.

Erst wird ein Request via AJAX an die Seite verschickt, danach kann man den Response Body parsen (der ja im JSON-Format gegeben ist) und sich das Property holen. 

const request = new XMLHttpRequest();
request.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
     const data = JSON.parse(this.responseText);
     console.log(data["short_url"]);
  }
};
request.open("GET", "https://shurli.herokuapp.com/new/https://google.de", true);
request.send();

Allerdings kann es sein, dass der Request geblockt wird (Stichwort: CORS). Zum einen muss deine Webanwendung Requests erlauben, zum anderen muss es auch die andere Anwendung tun. Du kannst in dem Fall bei dir diesen Request Header entsprechend setzen.

1