Einführung in die Methode zum Parsen von URLs in JavaScript (Codebeispiel)

Dieser Artikel bietet Ihnen eine Einführung in die Methode zum Parsen von URLs mit JavaScript (Codebeispiele). Ich hoffe, dass er Ihnen als Referenz dienen wird.

In der Webentwicklung gibt es viele Situationen, in denen URL analysiert werden muss. In diesem Artikel erfahren Sie hauptsächlich, wie Sie das URL-Objekt verwenden, um dies zu erreichen.

Start

Erstellen Sie eine HTML-Datei mit folgendem Inhalt und öffnen Sie diese in Ihrem Browser.

    
        <title>JavaScript URL parsing</title>
    
    
        <script>
            // 激动人心的代码即将写在这里
        </script>
    

Wenn Sie etwas in diesem Artikel ausprobieren möchten, können Sie es in einen <script>-Tag einfügen, speichern, die Seite neu laden und sehen, was passiert! In diesem Tutorial wird console.log zum Drucken des erforderlichen Inhalts verwendet. Sie können die Entwicklungstools öffnen, um den Inhalt anzuzeigen. </script>

Was ist eine URL?

Das sollte ziemlich einfach sein, aber lassen Sie uns es klarstellen. URL ist die Adresse einer Webseite, die in einen Browser eingegeben werden kann, um den einzigartigen Inhalt dieser Webseite abzurufen. Sie können es in der Adressleiste sehen:

Eine URL ist ein Uniform Resource Locator, eine prägnante Darstellung des Standorts und der Zugriffsmethode einer im Internet verfügbaren Ressource die Adresse einer Standardressource im Internet. Jede Datei im Internet verfügt über eine eindeutige URL, die Informationen darüber enthält, wo sich die Datei befindet und was der Browser damit tun soll.

Außerdem können Sie diesen Artikel lesen, um mehr darüber zu erfahren, wenn Sie nicht mit der Funktionsweise grundlegender URL-Pfade vertraut sind.

URLs sehen nicht alle gleich aus

Hier eine kurze Erinnerung – manchmal können URLs wirklich seltsam sein, wie zum Beispiel:

https://example. com: 1234/page/?a=b

http://localhost/page.html

https://154.23.54.156/page?x=...

file:///Users/username/folder/file.png

Die aktuelle URL abrufen

Die URL der aktuellen Seite abzurufen ist sehr einfach – wir können . window.location

Versuchen Sie, dies wie geschrieben zu unserem Skript hinzuzufügen:

console.log(window.location);

Überprüfen Sie die Browserkonsole:

Nicht das, was Sie wollen. Das liegt daran gibt nicht die tatsächliche URL-Adresse zurück, die Sie im Browser sehen, sondern ein URL-Objekt. Mit diesem URL-Objekt können wir verschiedene Teile der URL analysieren, die wir als Nächstes behandeln.

URL-Objekte erstellen

Wie Sie gleich sehen werden, können Sie URL-Objekte verwenden, um die verschiedenen Teile einer URL zu verstehen. Was ist, wenn Sie dies für eine beliebige URL tun möchten, nicht nur für die URL der aktuellen Seite? Wir können dies tun, indem wir ein neues URL-Objekt erstellen. So erstellen Sie eines:

var myURL = new URL('https://example.com');

So einfach ist das! Sie können

ausdrucken, um den Inhalt von myURL anzuzeigen: myURL

console.log(myURL);

Für die Zwecke dieses Artikels setzen Sie myURL auf diesen Wert:

var myURL = new URL('https://example.com:4000/folder/page.html?x=y&a=b#section-2')

kopiert es und fügt es in ein

-Element ein, damit Sie fortfahren können! Einige Teile davon <script></script> mögen Ihnen unbekannt sein, da sie nicht immer verwendet werden – aber Sie werden weiter unten mehr darüber erfahren, also machen Sie sich keine Sorgen! URL

Struktur des URL-Objekts

Mithilfe des URL-Objekts können Sie die verschiedenen Teile der URL ganz einfach abrufen. Hier finden Sie alles, was Sie vom URL-Objekt erhalten können. Für diese Beispiele verwenden wir das oben festgelegte

. myURL

href

URL Die

ist im Grunde die gesamte URL als String (Text). Wenn Sie die URL der Seite als Zeichenfolge statt als URL-Objekt möchten, können Sie href schreiben. window.location.href

console.log(myURL.href);
// Output: "https://example.com:4000/folder/page.html?x=y&a=b#section-2"

Protokoll (Protokoll)

Das Protokoll der URL ist der erste Teil. Dadurch wird dem Browser mitgeteilt, wie er auf die Seite zugreifen soll, beispielsweise über HTTP oder HTTPS. Es gibt aber noch viele andere Protokolle, wie zum Beispiel

ftp (File Transfer Protocol) und ws (WebSocket). Normalerweise verwenden Websites HTTP oder HTTPS.

Wenn Sie jedoch eine Datei auf Ihrem Computer geöffnet haben, verwenden Sie wahrscheinlich das Dateiprotokoll! Der Protokollteil des URL-Objekts enthält

, aber nicht ：. Mal sehen //! myURL

console.log(myURL.protocol);
// Output: "https:"

Hostname

Der Hostname ist der Domänenname der Site. Wenn Sie mit einem Domänennamen nicht vertraut sind, handelt es sich um den Hauptteil der URL, die Sie in einem Browser sehen – beispielsweise

oder google.com. codetheweb.blog

console.log(myURL.hostname);
// Output: "example.com"

Port

Die Portnummer der URL steht hinter dem Domainnamen, getrennt durch einen Doppelpunkt (z. B.

). Die meisten URLs haben keine Portnummer, was sehr selten vorkommt. example.com:1234

端口号是服务器上用于获取数据的特定“通道” - 因此，如果我拥有 example.com，我可以在多个不同的端口上发送不同的数据。 但通常域名默认为一个特定端口，因此不需要端口号。 来看看 myURL 的端口号：

console.log(myURL.port);
// Output: "4000"

主机（host）

主机只是主机名和端口放在一起，尝试获取 myURL 的主机：

console.log(myURL.host);
// Output: "example.com:4000"

来源（origin）

origin 由 URL 的协议，主机名和端口组成。 它基本上是整个 URL，直到端口号结束，如果没有端口号，到主机名结束。

console.log(myURL.origin);
// Output: "https://example.com:4000"

pathname（文件名）

pathname 从域名的最后一个 “/” 开始到 “?” 为止,是文件名部分,如果没有 “?” ,则是从域名最后的一个 “/” 开始到 “#” 为止 , 是文件部分, 如果没有 “?” 和 “#” , 那么从域名后的最后一个 “/” 开始到结束 , 都是文件名部分。

console.log(myURL.pathname);
// Output: "/folder/page.html"

锚点（hash）

从 “#” 开始到最后，都是锚部分。可以将哈希值添加到 URL 以直接滚动到具有 ID 为该值的哈希值 的元素。 例如，如果你有一个 id 为 hello 的元素，则可以在 URL 中添加 #hello 就可以直接滚动到这个元素的位置上。通过以下方式可以在 URL 获取 “#” 后面的值:

console.log(myURL.hash);
// Output: "#section-2"

查询参数 (search)

你还可以向 URL 添加查询参数。它们是键值对，意味着将特定的“变量”设置为特定值。 查询参数的形式为 key=value。 以下是一些 URL 查询参数的示例：

?key1=value1&key2=value2&key3=value3

请注意，如果 URL 也有 锚点（hash），则查询参数位于 锚点（hash）(也就是 ‘#’)之前，如我们的示例 URL 中所示：

console.log(myURL.search);
// Output: "?x=y&a=b"

但是，如果我们想要拆分它们并获取它们的值，那就有点复杂了。

使用 URLSearchParams 解析查询参数

要解析查询参数，我们需要创建一个 URLSearchParams 对象，如下所示：

var searchParams = new URLSearchParams(myURL.search);

然后可以通过调用 searchParams.get（'key'）来获取特定键的值。 使用我们的示例网址 - 这是原始搜索参数：

?x=y&a=b

因此，如果我们调用 searchParams.get（'x'），那么它应该返回 y，而 searchParams.get（'a'）应该返回 b，我们来试试吧！

console.log(searchParams.get('x'));
// Output: "y"
console.log(searchParams.get('a'));
// Output: "b"

扩展

获取 URL 的中参数

方法一：正则法

function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}
// 这样调用：
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));

alert(GetQueryString("参数名3"));

方法二：split拆分法

function GetRequest() {
    var url = location.search; //获取url中"?"符后的字串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for(var i = 0; i <h4 id="修改-URL-的中某个参数值">修改 URL 的中某个参数值</h4><pre class="brush:php;toolbar:false">//替换指定传入参数的值,paramName为参数,replaceWith为新值
function replaceParamVal(paramName,replaceWith) {
    var oUrl = this.location.href.toString();
    var re=eval('/('+ paramName+'=)([^&]*)/gi');
    var nUrl = oUrl.replace(re,paramName+'='+replaceWith);
    this.location = nUrl;
　　window.location.href=nUrl
}

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zum Parsen von URLs in JavaScript (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!