當(dāng)我們在瀏覽器中輸入網(wǎng)址或者點(diǎn)擊鏈接時(shí),實(shí)際上就是在請求一個(gè)URL(Uniform Resource Locator)。在前端開發(fā)中,經(jīng)常需要使用JavaScript來獲取當(dāng)前頁面的URL或者匹配特定的URL。
獲取當(dāng)前頁面的URL可以使用window.location對象:
console.log(window.location.href); // 輸出當(dāng)前頁面的完整URL
console.log(window.location.protocol); // 輸出當(dāng)前頁面的協(xié)議,如http、https等
console.log(window.location.host); // 輸出當(dāng)前頁面的主機(jī)名,包括端口號
console.log(window.location.hostname); // 輸出當(dāng)前頁面的主機(jī)名,不包括端口號
console.log(window.location.port); // 輸出當(dāng)前頁面的端口號
console.log(window.location.pathname); // 輸出當(dāng)前頁面的路徑部分,不包括查詢字符串和錨點(diǎn)
console.log(window.location.search); // 輸出當(dāng)前頁面的查詢字符串部分,不包括問號
console.log(window.location.hash); // 輸出當(dāng)前頁面的錨點(diǎn)部分,不包括井號
如果我們想要匹配特定的URL,可以使用正則表達(dá)式。下面是一些常見的URL匹配情景:
1. 匹配HTTP(或HTTPS)開頭的URL:
const url = 'http://www.example.com';
const isHttpUrl = /^https?:\/\//i.test(url);
if (isHttpUrl) {
console.log('This is a HTTP (or HTTPS) URL');
} else {
console.log('This is not a HTTP (or HTTPS) URL');
}
2. 匹配域名(或IP地址):
const url = 'http://www.example.com';
const domainName = url.match(/^https?:\/\/([^/?#]+)(?:[/?#]|$)/i)[1];
console.log(domainName); // 輸出www.example.com
3. 匹配查詢字符串參數(shù):
const url = 'http://www.example.com?foo=123&bar=456';
const params = {};
url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
params[key] = value;
});
console.log(params.foo); // 輸出123
console.log(params.bar); // 輸出456
4. 匹配路徑部分:
const url = 'http://www.example.com/foo/bar';
const path = url.match(/https?:\/\/[^\/]+(\/[\S]+)?/i)[1];
console.log(path); // 輸出/foo/bar
總結(jié):
JavaScript可以用來獲取當(dāng)前頁面的URL和匹配特定的URL。使用window.location對象可以方便地獲取當(dāng)前頁面的各個(gè)部分,而正則表達(dá)式則可以用來進(jìn)行復(fù)雜的URL匹配。在實(shí)際開發(fā)中,我們可以根據(jù)特定的需求寫出相應(yīng)的代碼,實(shí)現(xiàn)對URL的靈活處理。