Đường dẫn URL nối JavaScript

Ví dụ: nếu bạn cần chia nhỏ tên đường dẫn, một URL như https. // thủ thuật css. com/blah/blah/blah/chỉ mục. html, bạn có thể tách chuỗi thành ký tự “/”

var pathArray = window.location.pathname.split('/');

Sau đó truy cập các phần khác nhau theo các phần của mảng, như

var secondLevelLocation = pathArray[0];

Để đặt tên đường dẫn đó lại với nhau, bạn có thể ghép mảng lại với nhau và đặt lại dấu “/” vào

var newPathname = "";
for (i = 0; i < pathArray.length; i++) {
  newPathname += "/";
  newPathname += pathArray[i];
}

Có lẽ cách nhanh nhất để tận dụng tối đa những gì bạn có là đặt

var secondLevelLocation = pathArray[0];

❮ Mô-đun đường dẫn

Ví dụ

Tham gia một số phân đoạn vào một đường dẫn

var đường dẫn = yêu cầu ('đường dẫn');

var x = đường dẫn. tham gia ('Người dùng', 'Refsnes', 'demo_path. js');

bảng điều khiển. nhật ký (x);

Định nghĩa và cách sử dụng

Con đường. phương thức join() nối các đoạn đường dẫn đã chỉ định thành một đường dẫn

Bạn có thể chỉ định bao nhiêu đoạn đường dẫn tùy thích

Các đoạn đường dẫn đã chỉ định phải là các chuỗi, được phân tách bằng dấu phẩy

cú pháp

Giá trị tham số

chi tiết kỹ thuật

Thêm ví dụ

Ví dụ

Thêm một '. ' là một trong các phân đoạn và phương thức nối sẽ giải quyết nó

var đường dẫn = yêu cầu ('đường dẫn');

var x = đường dẫn. join('Users', 'Refsnes', '. ', 'đường dẫn demo. js');

bảng điều khiển. nhật ký (x);

❮ Mô-đun đường dẫn

Viết chương trình JavaScript để Nối tất cả các đoạn URL đã cho lại với nhau, sau đó bình thường hóa URL kết quả

• Sử dụng Chuỗi. nguyên mẫu. join('/') để kết hợp các đoạn URL
• Sử dụng một loạt String. nguyên mẫu. replace() với các biểu thức chính quy khác nhau để chuẩn hóa URL kết quả (xóa dấu gạch chéo kép, thêm dấu gạch chéo thích hợp cho giao thức, xóa dấu gạch chéo trước tham số, kết hợp tham số với '&' và chuẩn hóa dấu phân cách tham số đầu tiên)

Giải pháp mẫu

Mã JavaScript

//#Source https://bit.ly/2neWfJ2 
const URL_Join = (...args) =>
  args
    .join('/')
    .replace(/[\/]+/g, '/')
    .replace(/^(.+):\//, '$1://')
    .replace(/^file:/, 'file:/')
    .replace(/\/(\?|&|#[^!])/g, '$1')
    .replace(/\?/g, '&')
    .replace('&', '?');

console.log(URL_Join('http://www.google.com', 'a', '/b/cd', '?foo=123', '?bar=foo'));

Đầu ra mẫu

http://www.google.com/a/b/cd?foo=123&bar=foo

Trình bày bằng hình ảnh

Sơ đồ

Bản thử trực tiếp

Xem Bút javascript-basic-exercise-55-1 của w3resource (@w3resource) trên CodePen

Cải thiện giải pháp mẫu này và đăng mã của bạn qua Disqus

Trước. Viết chương trình JavaScript để khởi tạo một mảng chứa các số trong phạm vi đã chỉ định trong đó bắt đầu và kết thúc được bao gồm bước khác biệt chung của chúng.
Tiếp theo. Viết chương trình JavaScript để kiểm tra xem tất cả các phần tử trong một mảng đã cho có bằng nhau hay không.

Mức độ khó của bài tập này là gì?

Kiểm tra kỹ năng Lập trình của bạn với bài kiểm tra của w3resource

JavaScript. Lời khuyên trong ngày

Sử dụng mảng giá trị làm đối số cho hàm

Chúng tôi có các trường hợp khi bạn cần thu thập các giá trị của mình trong (các) mảng và sau đó chuyển nó làm đối số cho hàm. Với ES6, bạn chỉ có thể sử dụng toán tử trải rộng (. ) và trích xuất mảng của bạn từ [arg1, arg2] > (arg1, arg2)

Nối tất cả các đối số lại với nhau và chuẩn hóa URL kết quả

Cài đặt

Nếu bạn muốn sử dụng nó trực tiếp trong trình duyệt, hãy sử dụng CDN như Skypack

Cách sử dụng

import urlJoin from 'url-join';

const fullUrl = urlJoin('http://www.google.com', 'a', '/b/cd', '?foo=123');

console.log(fullUrl);

bản in

'http://www.google.com/a/b/cd?foo=123'

Giấy phép

MIT

Hàm tạo

var secondLevelLocation = pathArray[0];

var secondLevelLocation = pathArray[0];

Nếu URL cơ sở đã cho hoặc URL kết quả không phải là URL hợp lệ, thì ngoại lệ JavaScript

var secondLevelLocation = pathArray[0];

Ghi chú. Tính năng này có sẵn trong Web Worker

new URL(url)
new URL(url, base)

var secondLevelLocation = pathArray[0];

var secondLevelLocation = pathArray[0];

var secondLevelLocation = pathArray[0];

var secondLevelLocation = pathArray[0];

var secondLevelLocation = pathArray[0];

var secondLevelLocation = pathArray[0];

var secondLevelLocation = pathArray[0];

var secondLevelLocation = pathArray[0];

var secondLevelLocation = pathArray[0];

// Base URLs:
let baseUrl = 'https://developer.mozilla.org';

let A = new URL("/", baseUrl);
// => 'https://developer.mozilla.org/'

let B = new URL(baseUrl);
// => 'https://developer.mozilla.org/'

new URL('en-US/docs', B);
// => 'https://developer.mozilla.org/en-US/docs'

let D = new URL('/en-US/docs', B);
// => 'https://developer.mozilla.org/en-US/docs'

new URL('/en-US/docs', D);
// => 'https://developer.mozilla.org/en-US/docs'
 
new URL('/en-US/docs', A);
// => 'https://developer.mozilla.org/en-US/docs'

new URL('/en-US/docs', "https://developer.mozilla.org/fr-FR/toto");
// => 'https://developer.mozilla.org/en-US/docs'


// Invalid URLs:

new URL('/en-US/docs', '');
// Raises a TypeError exception as '' is not a valid URL

new URL('/en-US/docs');
// Raises a TypeError exception as '/en-US/docs' is not a valid URL


// Other cases:

new URL('http://www.example.com', );
// => 'http://www.example.com/'

new URL('http://www.example.com', B);
// => 'http://www.example.com/'

new URL("", "https://example.com/?query=1");
// => 'https://example.com/?query=1' (Edge before 79 removes query arguments)

new URL("/a", "https://example.com/?query=1");
// => 'https://example.com/a' (see relative URLs)

new URL("//foo.com", "https://example.com");
// => 'https://foo.com' (see relative URLs)

var secondLevelLocation = pathArray[0];

var secondLevelLocation = pathArray[0];

var secondLevelLocation = pathArray[0];

// Base URLs:
let baseUrl = 'https://developer.mozilla.org';

let A = new URL("/", baseUrl);
// => 'https://developer.mozilla.org/'

let B = new URL(baseUrl);
// => 'https://developer.mozilla.org/'

new URL('en-US/docs', B);
// => 'https://developer.mozilla.org/en-US/docs'

let D = new URL('/en-US/docs', B);
// => 'https://developer.mozilla.org/en-US/docs'

new URL('/en-US/docs', D);
// => 'https://developer.mozilla.org/en-US/docs'
 
new URL('/en-US/docs', A);
// => 'https://developer.mozilla.org/en-US/docs'

new URL('/en-US/docs', "https://developer.mozilla.org/fr-FR/toto");
// => 'https://developer.mozilla.org/en-US/docs'


// Invalid URLs:

new URL('/en-US/docs', '');
// Raises a TypeError exception as '' is not a valid URL

new URL('/en-US/docs');
// Raises a TypeError exception as '/en-US/docs' is not a valid URL


// Other cases:

new URL('http://www.example.com', );
// => 'http://www.example.com/'

new URL('http://www.example.com', B);
// => 'http://www.example.com/'

new URL("", "https://example.com/?query=1");
// => 'https://example.com/?query=1' (Edge before 79 removes query arguments)

new URL("/a", "https://example.com/?query=1");
// => 'https://example.com/a' (see relative URLs)

new URL("//foo.com", "https://example.com");
// => 'https://foo.com' (see relative URLs)

var secondLevelLocation = pathArray[0];

var secondLevelLocation = pathArray[0];

var secondLevelLocation = pathArray[0];

var secondLevelLocation = pathArray[0];