How to use url in javascript

With the rapid development of the Internet, web applications are becoming more and more abundant and powerful. Among them, JavaScript is the most important and widely used front-end language, and it is also the key to realizing dynamic interaction on web pages. In JavaScript, the use of URLs is also extremely common and important. This article will introduce and analyze this aspect in detail.

1. The concept and definition of URL

URL is the abbreviation of Uniform Resource Locator (Uniform Resource Locator), which is used to uniquely identify resources on the Internet (such as web pages, pictures, videos, etc.) . It consists of three parts: protocol, host and path. Among them, the protocol is usually "http" or "https" in the HTTP protocol, the host name refers to the domain name or IP address of the website, and the path represents the specific path of the file on the network.

For example: http://www.example.com/path/filename.html

2. Methods of using URLs in JavaScript

1. Attributes

In JavaScript, we can use the attributes of the a tag to process URLs. The a tag can define a hyperlink, where the href attribute corresponds to the URL and innerHTML corresponds to the text content.

For example:

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

We can access the href attribute of this tag through JavaScript code to obtain the corresponding URL:

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

2. Method

(1) encodeURI() and encodeURIComponent()

In JavaScript, we can use the encodeURI() and encodeURIComponent() methods to encode illegal characters in the URL to facilitate network transmission and parsing. . Among them, the encodeURI() method will encode all characters except letters, numbers and specific symbols, while the encodeURIComponent() method will encode all characters. For example:

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() and decodeURIComponent()

Similar to the encoding method, there are two decoding methods: decodeURI() and decodeURIComponent(). They are used to convert the encoded URL back to the original URL for easier consumption and reading. For example:

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) location object

In JavaScript, you can also obtain various parts of the current URL through the location object. Among them, the location.href attribute corresponds to the complete URL string, and location.protocol, location.host, and location.pathname correspond to the protocol, host name, and path parts of the URL. For example:

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. Summary

In web development, URLs are widely used, not only for hyperlink jumps, but also for AJAX requests, form submissions, pictures and Video loading and more. JavaScript provides a wealth of URL processing functions and methods, allowing us to easily process URL strings to achieve various functions. In actual development, it is very necessary to understand and master URL-related knowledge points.

The above is the detailed content of How to use url in javascript. For more information, please follow other related articles on the PHP Chinese website!