Explication détaillée sur la façon d'utiliser JavaScript pour analyser les URL

Dans le développement Web, il existe de nombreuses situations dans lesquelles URL doit être analysée Cet article apprend principalement à utiliser l'objet URL pour. y parvenir.

Démarrer

Créez un fichier HTML avec le contenu suivant et ouvrez-le dans votre navigateur.

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

Si vous voulez essayer quelque chose dans cet article, vous pouvez le mettre dans une balise <script>, enregistrer, recharger la page et voir ce qui se passe ! Dans ce didacticiel, console.log sera utilisé pour imprimer le contenu requis. Vous pouvez ouvrir les outils de développement pour afficher le contenu. </script>

Qu'est-ce qu'une URL

Cela devrait être assez simple, mais soyons clairs. URL est l'adresse d'une page Web qui peut être saisie dans un navigateur pour obtenir le contenu unique de cette page Web. Vous pouvez le voir dans la barre d'adresse :

Une URL est un Uniform Resource Locator, une représentation concise de l'emplacement et de la méthode d'accès d'une ressource disponible sur Internet. l'adresse d'une ressource standard sur Internet. Chaque fichier sur Internet possède une URL unique, qui contient des informations indiquant où se trouve le fichier et ce que le navigateur doit en faire.

De plus, si vous n'êtes pas familier avec le fonctionnement des chemins d'URL de base, vous pouvez consulter cet article pour en savoir plus.

Les URL ne se ressemblent pas toutes.

Voici un petit rappel : parfois, les URL peuvent être vraiment bizarres, comme ceci :

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

http://localhost/page.html

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

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

Obtenir l'URL actuelle

Obtenir l'URL de la page actuelle est très simple - nous pouvons utiliser window.location.

Essayez d'ajouter ceci à notre script tel qu'il est écrit :

console.log(window.location);

Vérifiez la console du navigateur :

Ce n'est pas ce que vous voulez ? ne renvoie pas l'adresse URL réelle que vous voyez dans le navigateur - il renvoie un objet URL. En utilisant cet objet URL, nous pouvons analyser différentes parties de l'URL, que nous aborderons ensuite.

Création d'objets URL

Comme vous le verrez bientôt, vous pouvez utiliser des objets URL pour comprendre les différentes parties d'une URL. Que se passe-t-il si vous souhaitez faire cela pour n'importe quelle URL, pas seulement pour l'URL de la page actuelle ? Nous pouvons le faire en créant un nouvel objet URL. Voici comment en créer un :

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

C'est aussi simple que cela ! Vous pouvez imprimer myURL pour afficher le contenu de myURL :

console.log(myURL);

Pour les besoins de cet article, définissez myURL sur cette valeur :

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

je vais le copier et le coller dans un élément <script></script> pour que vous puissiez continuer ! Certaines parties de ce URL peuvent vous être inconnues car elles ne sont pas toujours utilisées - mais vous les découvrirez ci-dessous, alors ne vous inquiétez pas !

Structure de l'objet URL

En utilisant l'objet URL, vous pouvez récupérer les différentes parties de l'URL très facilement. Voici tout ce que vous pouvez obtenir de l'objet URL. Pour ces exemples, nous utiliserons l'ensemble myURL ci-dessus.

href

URL Le href est essentiellement l'URL entière sous forme de chaîne (texte). Si vous souhaitez que l'URL de la page soit une chaîne au lieu d'un objet URL, vous pouvez écrire window.location.href.

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

Protocole (protocole)

Le protocole de l'URL est la première partie. Cela indique au navigateur comment accéder à la page, par exemple via HTTP ou HTTPS. Mais il existe de nombreux autres protocoles, tels que ftp (File Transfer Protocol) et ws (WebSocket). Généralement, les sites Web utilisent HTTP ou HTTPS.

Mais si vous avez un fichier ouvert sur votre ordinateur, vous utilisez probablement le protocole de fichier ! La partie protocole de l'objet URL inclut ：, mais pas //. Voyons myURL !

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

Nom d'hôte

Le nom d'hôte est le nom de domaine du site. Si vous n'êtes pas familier avec un nom de domaine, il s'agit de la partie principale de l'URL que vous voyez dans un navigateur, comme google.com ou codetheweb.blog.

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

Port

Le numéro de port de l'URL se situe après le nom de domaine, séparé par deux points (par exemple, example.com:1234). La plupart des URL n'ont pas de numéro de port, ce qui est très rare. Le numéro de port

est le "canal" spécifique sur le serveur qui est utilisé pour obtenir les données - donc si j'ai example.com, je peux envoyer différentes données sur plusieurs ports différents. Mais généralement, le nom de domaine est par défaut un port spécifique, donc un numéro de port n'est pas requis. Jetons un coup d'œil au numéro de port de 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>修改 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
}

原文地址：https://codetheweb.blog/2019/01/21/javascript-url-parsing/

为了保证的可读性，本文采用意译而非直译。

更多编程相关知识，请访问：编程学习网站！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!