URL in JavaScript codieren?

Lesezeit: 6 Minuten

URL in JavaScript codieren
Nickf

Wie codieren Sie eine URL sicher mit JavaScript, sodass sie in einen GET-String eingefügt werden kann?

var myUrl = "http://example.com/index.html?param=1&anotherParam=2";
var myOtherUrl = "http://example.com/index.html?url=" + myUrl;

Ich nehme an, dass du das codieren musst myUrl Variable in dieser zweiten Zeile?

  • Versuchen Sie, hineinzuschauen encodeURI() und decodeURI().

    – Zack der Mensch

    2. Dezember 2008 um 2:39 Uhr

  • Sehen JavaScript-URL-Code-Funktion.

    – Janni

    30. Juni 2011 um 16:40 Uhr


  • Sie können dieses Tool hier verwenden: phillihp.com/toolz/url-encode-decode

    – philipp

    18. September 2012 um 2:13 Uhr

  • encodeURIComponent()

    – Andreas

    2. März 2018 um 18:52 Uhr

  • Bitte sehen Sie sich diese Antwort an, da sie die einzige ist, die moderne Javascript-Funktionen verwendet (unterstützt in allem außer Internet Explorer).

    – Eisen9

    2. Juni 2021 um 9:44 Uhr

URL in JavaScript codieren
Buu Nguyen

Sehen Sie sich die integrierte Funktion an encodeURIComponent(str) und encodeURI(str).
In deinem Fall sollte das funktionieren:

var myOtherUrl = 
       "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

  • Wie wäre es, wenn Sie die Erklärung von @cms hinzufügen? escape ist auch eine gültige Option.

    – hitautodestruct

    28. Oktober 2012 um 11:36 Uhr

  • laut @CMS encodeURI ist nicht wirklich sicher für die URL-Codierung.

    – Wenn nicht

    1. März 2013 um 16:35 Uhr

  • @AnaelFavre, weil es dazu gedacht ist, die gesamte URL zu codieren, die keine Zeichen wie zulässt :, /, @ usw. Diese 2 Methoden sind nicht austauschbar, Sie müssen wissen, was Sie codieren, um die richtige Methode zu verwenden.

    – Buu Nguyen

    6. März 2013 um 19:32 Uhr


  • Wie in einer anderen Antwort auf dieser Seite erwähnt, beschreibt diese Seite ausführlich den Grund für die Verwendung dieser Methode

    – Brad Parks

    6. Mai 2016 um 13:07 Uhr

1647285312 828 URL in JavaScript codieren
Christian C. Salvado

Sie haben drei Möglichkeiten:

  • escape() wird nicht kodieren: @*/+

  • encodeURI() wird nicht kodieren: [email protected]#$&*()=:/,;?+'

  • encodeURIComponent() wird nicht kodieren: ~!*()'

Aber in Ihrem Fall, wenn Sie eine passieren wollen URL in ein GET Parameter einer anderen Seite, die Sie verwenden sollten escape oder encodeURIComponentaber nicht encodeURI.

Siehe Stack Overflow-Frage Best Practice: Escape oder encodeURI / encodeURIComponent zur weiteren Diskussion.

  • Die mit Escape verwendete Zeichencodierung ist variabel. Bleiben Sie bei encodeURI und encodeURIComponent, die UTF-8 verwenden.

    – Ericsson

    2. Dezember 2008 um 4:55 Uhr

  • Vorsichtig sein. Dieses Escape konvertiert Nicht-ASCII-Zeichen in seine Unicode-Escape-Sequenzen, wie z %uxxx.

    – opteronn

    5. März 2010 um 20:10 Uhr


  • Ich verwende encodeURIComponent und stelle fest, dass es keine Pipe-Zeichen codiert |

    – kevzetter

    30. Januar 2011 um 5:05 Uhr

  • @kevzettler – warum sollte es das tun? Die Pipes sind in einem URI nicht von semantischer Bedeutung.

    – Nickf

    31. Januar 2011 um 11:36 Uhr

  • @GiovanniP: Leute, die deutsche, französische, japanische, chinesische, arabische Zeichen als Eingabe zulassen und diese Parameter per GET oder POST übergeben.

    – Tseng

    4. September 2013 um 14:43 Uhr

1647285313 805 URL in JavaScript codieren
Mike Brennan

Bleiben bei encodeURIComponent(). Die Funktion encodeURI() macht sich nicht die Mühe, viele semantisch wichtige Zeichen in URLs zu kodieren (z. B. “#”, “?” und “&”). escape() ist veraltet und macht sich nicht die Mühe, “+”-Zeichen zu codieren, die auf dem Server als codierte Leerzeichen interpretiert werden (und, wie von anderen hier angemerkt, keine ordnungsgemäße URL-Codierung von Nicht-ASCII-Zeichen).

Es gibt eine schöne Erklärung für den Unterschied zwischen encodeURI() und encodeURIComponent() anderswo. Wenn Sie etwas so codieren möchten, dass es sicher als Bestandteil eines URI (z. B. als Parameter einer Abfragezeichenfolge) eingefügt werden kann, verwenden Sie encodeURIComponent().

1647285313 862 URL in JavaScript codieren
Ryan Taylor

Die beste Antwort ist zu verwenden encodeURIComponent an Werte in der Abfragezeichenfolge (und nirgendwo sonst).

Ich finde jedoch, dass viele APIs ” ” durch “+” ersetzen wollen, also musste ich Folgendes verwenden:

const value = encodeURIComponent(value).replace('%20','+');
const url="http://example.com?lang=en&key=" + value

escape ist in verschiedenen Browsern unterschiedlich implementiert und encodeURI codiert nicht viele Zeichen (wie # und sogar /) – es ist dafür gemacht, auf einer vollständigen URI/URL verwendet zu werden, ohne es zu brechen – was nicht besonders hilfreich oder sicher ist.

Und wie @Jochem unten betont, möchten Sie vielleicht verwenden encodeURIComponent() auf einen (jeden) Ordnernamen, aber aus irgendeinem Grund scheinen diese APIs nicht zu wollen + in Ordnernamen so einfach alt encodeURIComponent funktioniert super.

Beispiel:

const escapedValue = encodeURIComponent(value).replace('%20','+');
const escapedFolder = encodeURIComponent('My Folder'); // no replace
const url = `http://example.com/${escapedFolder}/?myKey=${escapedValue}`;

1647285314 20 URL in JavaScript codieren
Maksym Koslenko

Ich würde vorschlagen zu verwenden qs npm-Paket

qs.stringify({a:"1=2", b:"Test 1"}); // gets a=1%3D2&b=Test+1

Es ist einfacher mit JS-Objekten zu verwenden und bietet Ihnen die richtige URL-Codierung für alle Parameter

Wenn Sie jQuery verwenden, würde ich gehen $.param Methode. Es URL-codiert ein Objekt, das Felder Werten zuordnet, was einfacher zu lesen ist, als eine Escape-Methode für jeden Wert aufzurufen.

$.param({a:"1=2", b:"Test 1"}) // gets a=1%3D2&b=Test+1

  • Ich denke, dass das bereitgestellte Beispiel ausreichend ist. Benötigen Sie weitere Informationen zu $.param on api.jquery.com/jquery.param

    – Maksym Koslenko

    10. September 2015 um 10:21 Uhr


  • Fast jeder verwendet jQuery und ich fühle mich damit tatsächlich wohler als mit encoreURIComponent

    – Cyril Duchon-Doris

    4. Januar 2017 um 16:36 Uhr

  • qs großartiges, kompaktes und nützliches Paket. Stimmen Sie für die qs im Backend ab

    – JohanTG

    20. April 2021 um 9:37 Uhr


Moderne Lösung (2021)

Da die anderen Antworten geschrieben wurden, die URLSearchParams API wurde eingeführt. Es kann wie folgt verwendet werden:

const queryParams = { param1: 'value1', param2: 'value2' }
const queryString = new URLSearchParams(queryParams).toString()
// 'param1=value1&param2=value2'

Es codiert auch Nicht-URL-Zeichen.

Für Ihr spezifisches Beispiel würden Sie es wie folgt verwenden:

const myUrl = "http://example.com/index.html?param=1&anotherParam=2";
const myOtherUrl = new URL("http://example.com/index.html");
myOtherUrl.search = new URLSearchParams({url: myUrl});
console.log(myOtherUrl.toString());

Diese Lösung wird auch hier und hier erwähnt.

  • Ich denke, dass das bereitgestellte Beispiel ausreichend ist. Benötigen Sie weitere Informationen zu $.param on api.jquery.com/jquery.param

    – Maksym Koslenko

    10. September 2015 um 10:21 Uhr


  • Fast jeder verwendet jQuery und ich fühle mich damit tatsächlich wohler als mit encoreURIComponent

    – Cyril Duchon-Doris

    4. Januar 2017 um 16:36 Uhr

  • qs großartiges, kompaktes und nützliches Paket. Stimmen Sie für die qs im Backend ab

    – JohanTG

    20. April 2021 um 9:37 Uhr


1647285313 862 URL in JavaScript codieren
Ryan Taylor

encodeURIComponent() ist der richtige Weg.

var myOtherUrl = "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

ABER Sie sollten bedenken, dass es kleine Unterschiede zur PHP-Version gibt urlencode() und wie @CMS erwähnt, wird es nicht jedes Zeichen codieren. Jungs bei http://phpjs.org/functions/urlencode/ js äquivalent zu gemacht phpencode():

function urlencode(str) {
  str = (str + '').toString();

  // Tilde should be allowed unescaped in future versions of PHP (as reflected below), but if you want to reflect current
  // PHP behavior, you would need to add ".replace(/~/g, '%7E');" to the following.
  return encodeURIComponent(str)
    .replace('!', '%21')
    .replace('\'', '%27')
    .replace('(', '%28')
    .replace(')', '%29')
    .replace('*', '%2A')
    .replace('%20', '+');
}

1002850cookie-checkURL in JavaScript codieren?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy