Comment utiliser l'URL en javascript

Avec le développement rapide d'Internet, les applications web deviennent de plus en plus abondantes et puissantes. Parmi eux, JavaScript est le langage frontal le plus important et le plus largement utilisé, et c'est également la clé pour réaliser une interaction dynamique sur les pages Web. En JavaScript, l'utilisation d'URL est également extrêmement courante et importante. Cet article présentera et analysera cet aspect en détail.

1. Le concept et la définition d'URL

URL est l'abréviation de Uniform Resource Locator (Uniform Resource Locator), qui est utilisée pour identifier de manière unique des ressources sur Internet (telles que des pages Web, des images, des vidéos, etc.). Il se compose de trois parties : le protocole, le nom d'hôte et le chemin. Parmi eux, le protocole est généralement « http » ou « https » dans le protocole HTTP, le nom d'hôte fait référence au nom de domaine ou à l'adresse IP du site Web, et le chemin représente le chemin spécifique du fichier sur le réseau.

Par exemple : http://www.example.com/path/filename.html

2. Comment utiliser l'URL en JavaScript

1. Attributs

En JavaScript, nous pouvons utiliser l'attribut d'une balise pour traiter URL. La balise a peut définir un lien hypertexte, où l'attribut href correspond à l'URL et innerHTML correspond au contenu du texte.

Par exemple :

<a id="myLink" href="http://www.example.com">example website</a>

Nous pouvons accéder à l'attribut href de cette balise via le code JavaScript pour obtenir l'URL correspondante :

var link = document.getElementById("myLink");
console.log(link.href); // 输出 http://www.example.com

2. Method

(1) encodeURI() et encodeURIComponent()

En JavaScript, nous Vous pouvez utiliser les méthodes encodeURI() et encodeURIComponent() pour coder les caractères illégaux dans l'URL afin de faciliter la transmission et l'analyse réseau. Parmi eux, la méthode encodeURI() encodera tous les caractères sauf les lettres, les chiffres et les symboles spécifiques, tandis que la méthode encodeURIComponent() encodera tous les caractères. Par exemple :

var url = "http://www.example.com/pa#th/?query=param1&param2=你好";
var encodedUrl = encodeURI(url);
var encodedUrlComponent = encodeURIComponent(url);
console.log(encodedUrl);
// 输出 http://www.example.com/pa#th/?query=param1&param2=%E4%BD%A0%E5%A5%BD
console.log(encodedUrlComponent);
// 输出 http%3A%2F%2Fwww.example.com%2Fpa%23th%2F%3Fquery%3Dparam1%26param2%3D%E4%BD%A0%E5%A5%BD

(2) decodeURI() et decodeURIComponent()

Similaire à la méthode d'encodage, il existe deux méthodes de décodage : decodeURI() et decodeURIComponent(). Ils sont utilisés pour reconvertir l’URL codée en URL d’origine pour une consommation et une lecture plus faciles. Par exemple :

var encodedUrl = "http%3A%2F%2Fwww.example.com%2Fpa%23th%2F%3Fquery%3Dparam1%26param2%3D%E4%BD%A0%E5%A5%BD";
var originalUrl = decodeURI(encodedUrl);
var originalUrlComponent = decodeURIComponent(encodedUrl);
console.log(originalUrl);
// 输出 http://www.example.com/pa#th/?query=param1&param2=你好
console.log(originalUrlComponent);
// 输出 http://www.example.com/pa#th/?query=param1&param2=你好

(3) objet de localisation

En JavaScript, vous pouvez également obtenir diverses parties de l'URL actuelle via l'objet de localisation. Parmi eux, l'attribut location.href correspond à la chaîne URL complète, et location.protocol, location.host et location.pathname correspondent aux parties protocole, nom d'hôte et chemin de l'URL. Par exemple :

console.log(location.href); // 输出浏览器当前的完整URL
console.log(location.protocol); // 输出协议部分，如"http:"
console.log(location.host); // 输出主机名部分，如"www.example.com"
console.log(location.pathname); // 输出路径部分，如"/path/filename.html"

3. Résumé

Dans le développement Web, les URL sont largement utilisées, non seulement pour les sauts d'hyperliens, mais aussi pour les requêtes AJAX, les soumissions de formulaires, le chargement d'images et de vidéos, etc. JavaScript fournit une multitude de fonctions et de méthodes de traitement d'URL, nous permettant de traiter facilement les chaînes d'URL pour réaliser diverses fonctions. Dans le développement réel, il est indispensable de comprendre et de maîtriser les points de connaissances liés aux URL.

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!