Hướng dẫn convert relative path to absolute path javascript - chuyển đổi đường dẫn tương đối thành đường dẫn tuyệt đối javascript

Question

Có một chức năng, cung cấp cho tôi các URL như:

Nội dung chính Show

Làm thế nào để bạn chuyển đổi đường dẫn tương đối sang đường dẫn tuyệt đối?
Làm thế nào để bạn chuyển đổi một URL tương đối thành một URL tuyệt đối?
Làm cách nào để có được đường dẫn tuyệt đối của một tệp bằng JavaScript?
Đường dẫn tuyệt đối và đường dẫn tương đối trong JavaScript là gì?

./some.css
./extra/some.css
../../lib/slider/slider.css

Nó luôn luôn là một con đường tương đối.

Chúng ta hãy nghĩ rằng chúng ta biết đường dẫn hiện tại của trang, như

./some.css => http://site.com/stats/2012/some.css
./extra/some.css => http://site.com/stats/2012/extra/some.css
../../lib/slider/slider.css => http://site.com/lib/slider/slider.css

7, không chắc làm thế nào để tôi chuyển đổi các đường dẫn tương đối này thành những đường dẫn thực?

Chúng ta nên có được một cái gì đó như:

./some.css => http://site.com/stats/2012/some.css
./extra/some.css => http://site.com/stats/2012/extra/some.css
../../lib/slider/slider.css => http://site.com/lib/slider/slider.css

Không có jQuery, chỉ có vani javascript.

Ryan b

3.36620 Huy hiệu bạc35 Huy hiệu Đồng20 silver badges35 bronze badges

Đã hỏi ngày 8 tháng 2 năm 2013 lúc 19:56Feb 8, 2013 at 19:56

Hướng dẫn convert relative path to absolute path javascript - chuyển đổi đường dẫn tương đối thành đường dẫn tuyệt đối javascript

1

Cách đơn giản nhất, hiệu quả và chính xác nhất để làm như vậy để sử dụng API URL.

new URL("http://www.stackoverflow.com?q=hello").href;
//=> "http://www.stackoverflow.com/?q=hello"

new URL("mypath","http://www.stackoverflow.com").href;
//=> "http://www.stackoverflow.com/mypath"

new URL("../mypath","http://www.stackoverflow.com/search").href
//=> "http://www.stackoverflow.com/mypath"

new URL("../mypath", document.baseURI).href
//=> "https://stackoverflow.com/questions/mypath"

Hiệu suất khôn ngoan, giải pháp này ngang bằng với việc sử dụng thao tác chuỗi và nhanh gấp đôi so với việc tạo thẻ

./some.css => http://site.com/stats/2012/some.css
./extra/some.css => http://site.com/stats/2012/extra/some.css
../../lib/slider/slider.css => http://site.com/lib/slider/slider.css

8.

CID

Phù vàng 14,5K4 Huy hiệu vàng26 Huy hiệu đồng4 gold badges26 silver badges43 bronze badges

Đã trả lời ngày 14 tháng 6 năm 2017 lúc 14:40Jun 14, 2017 at 14:40

EladeladElad

18.2K17 Huy hiệu vàng61 Huy hiệu bạc70 Huy hiệu đồng17 gold badges61 silver badges70 bronze badges

4

JavaScript sẽ làm điều đó cho bạn. Không cần phải tạo một chức năng.

var link = document.createElement("a");
link.href = "../../lib/slider/slider.css";
alert(link.protocol+"//"+link.host+link.pathname+link.search+link.hash);

// Output will be "http://www.yoursite.com/lib/slider/slider.css"

Nhưng nếu bạn cần nó như một chức năng:

var absolutePath = function(href) {
    var link = document.createElement("a");
    link.href = href;
    return (link.protocol+"//"+link.host+link.pathname+link.search+link.hash);
}

Cập nhật: Phiên bản đơn giản hơn nếu bạn cần đường dẫn tuyệt đối đầy đủ: Simpler version if you need the full absolute path:

var absolutePath = function(href) {
    var link = document.createElement("a");
    link.href = href;
    return link.href;
}

Đã trả lời ngày 8 tháng 2 năm 2013 lúc 21:30Feb 8, 2013 at 21:30

Allenhwkimallenhwkimallenhwkim

26.7K16 Huy hiệu vàng88 Huy hiệu bạc118 Huy hiệu đồng16 gold badges88 silver badges118 bronze badges

4

Điều này nên làm điều đó:

function absolute(base, relative) {
    var stack = base.split("/"),
        parts = relative.split("/");
    stack.pop(); // remove current file name (or empty string)
                 // (omit if "base" is the current folder without trailing slash)
    for (var i=0; i

Đã trả lời ngày 8 tháng 2 năm 2013 lúc 20:04Feb 8, 2013 at 20:04

BergibergiBergi

592K135 Huy hiệu vàng922 Huy hiệu bạc1309 Huy hiệu đồng135 gold badges922 silver badges1309 bronze badges

8

Điều này từ MDN là không thể phá vỡ!

/*\
|*|
|*|  :: translate relative paths to absolute paths ::
|*|
|*|  https://developer.mozilla.org/en-US/docs/Web/API/document.cookie
|*|
|*|  The following code is released under the GNU Public License, version 3 or later.
|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
|*|
\*/

function relPathToAbs (sRelPath) {
  var nUpLn, sDir = "", sPath = location.pathname.replace(/[^\/]*$/, sRelPath.replace(/(\/|^)(?:\.?\/+)+/g, "$1"));
  for (var nEnd, nStart = 0; nEnd = sPath.indexOf("/../", nStart), nEnd > -1; nStart = nEnd + nUpLn) {
    nUpLn = /^\/(?:\.\.\/)*/.exec(sPath.slice(nEnd))[0].length;
    sDir = (sDir + sPath.substring(nStart, nEnd)).replace(new RegExp("(?:\\\/+[^\\\/]*){0," + ((nUpLn - 1) / 3) + "}$"), "/");
  }
  return sDir + sPath.substr(nStart);
}

Sử dụng mẫu:

/* Let us be in /en-US/docs/Web/API/document.cookie */

alert(location.pathname);
// displays: /en-US/docs/Web/API/document.cookie

alert(relPathToAbs("./"));
// displays: /en-US/docs/Web/API/

alert(relPathToAbs("../Guide/API/DOM/Storage"));
// displays: /en-US/docs/Web/Guide/API/DOM/Storage

alert(relPathToAbs("../../Firefox"));
// displays: /en-US/docs/Firefox

alert(relPathToAbs("../Guide/././API/../../../Firefox"));
// displays: /en-US/docs/Firefox

Đã trả lời ngày 14 tháng 9 năm 2014 lúc 13:41Sep 14, 2014 at 13:41

Madmurphymadmurphymadmurphy

1.1319 huy hiệu bạc15 huy hiệu đồng9 silver badges15 bronze badges


10
Nếu bạn muốn thực hiện chuyển đổi tương đối sang thô để liên kết từ một trang web tùy chỉnh trong trình duyệt của bạn (không phải cho trang chạy tập lệnh của bạn), bạn có thể sử dụng phiên bản nâng cao hơn của chức năng được đề xuất bởi @bergi:
var resolveURL=function resolve(url, base){
    if('string'!==typeof url || !url){
        return null; // wrong or empty url
    }
    else if(url.match(/^[a-z]+\:\/\//i)){ 
        return url; // url is absolute already 
    }
    else if(url.match(/^\/\//)){ 
        return 'http:'+url; // url is absolute already 
    }
    else if(url.match(/^[a-z]+\:/i)){ 
        return url; // data URI, mailto:, tel:, etc.
    }
    else if('string'!==typeof base){
        var a=document.createElement('a'); 
        a.href=url; // try to resolve url without base  
        if(!a.pathname){ 
            return null; // url not valid 
        }
        return 'http://'+url;
    }
    else{ 
        base=resolve(base); // check base
        if(base===null){
            return null; // wrong base
        }
    }
    var a=document.createElement('a'); 
    a.href=base;

    if(url[0]==='/'){ 
        base=[]; // rooted path
    }
    else{ 
        base=a.pathname.split('/'); // relative path
        base.pop(); 
    }
    url=url.split('/');
    for(var i=0; i
Nó sẽ trở lại 
./some.css => http://site.com/stats/2012/some.css
./extra/some.css => http://site.com/stats/2012/extra/some.css
../../lib/slider/slider.css => http://site.com/lib/slider/slider.css
9 nếu có gì đó không ổn.
Usage:
./some.css => http://site.com/stats/2012/some.css
./extra/some.css => http://site.com/stats/2012/extra/some.css
../../lib/slider/slider.css => http://site.com/lib/slider/slider.css
0
 Đã trả lời ngày 29 tháng 9 năm 2015 lúc 11:49Sep 29, 2015 at 11:49



 
OptimizitorOptimizitoroptimizitor
7279 Huy hiệu bạc17 Huy hiệu đồng9 silver badges17 bronze badges
Tôi biết đây là một câu hỏi rất cũ, nhưng bạn có thể làm điều đó với: 
new URL("http://www.stackoverflow.com?q=hello").href;
//=> "http://www.stackoverflow.com/?q=hello"

new URL("mypath","http://www.stackoverflow.com").href;
//=> "http://www.stackoverflow.com/mypath"

new URL("../mypath","http://www.stackoverflow.com/search").href
//=> "http://www.stackoverflow.com/mypath"

new URL("../mypath", document.baseURI).href
//=> "https://stackoverflow.com/questions/mypath"
0.
 Đã trả lời ngày 12 tháng 5 năm 2021 lúc 18:21May 12, 2021 at 18:21
 

./some.css => http://site.com/stats/2012/some.css
./extra/some.css => http://site.com/stats/2012/extra/some.css
../../lib/slider/slider.css => http://site.com/lib/slider/slider.css
1Điều này cũng hoạt động trên IE6, không giống như một số giải pháp khác (xem nhận được một URL tuyệt đối từ một người tương đối. (Số phát hành IE6)))
 
 Đã trả lời ngày 30 tháng 12 năm 2014 lúc 16:47Dec 30, 2014 at 16:47
 
Sebastien Lorbersebastien LorberSebastien Lorber
86.5K64 Huy hiệu vàng278 Huy hiệu bạc406 Huy hiệu Đồng64 gold badges278 silver badges406 bronze badges
2
Giải pháp được đề xuất và được chấp nhận không hỗ trợ URL tương đối máy chủ và không hoạt động trên các URL tuyệt đối. Nếu người thân của tôi là /site /fird1, nó sẽ không hoạt động chẳng hạn.
Dưới đây là một chức năng khác hỗ trợ các URL đầy đủ, máy chủ tương đối hoặc tương đối cũng như ../ cho một cấp độ lên. Nó không hoàn hảo nhưng bao gồm rất nhiều lựa chọn. Sử dụng điều này khi URL cơ sở của bạn không phải là URL trang hiện tại, nếu không có các lựa chọn thay thế tốt hơn.
./some.css => http://site.com/stats/2012/some.css
./extra/some.css => http://site.com/stats/2012/extra/some.css
../../lib/slider/slider.css => http://site.com/lib/slider/slider.css
2Hi vọng điêu nay co ich. Thật là bực bội khi không có sẵn tiện ích cơ bản này trong JavaScript.
 Đã trả lời ngày 4 tháng 4 năm 2017 lúc 21:20Apr 4, 2017 at
21:20
 
2
Giải pháp HREF chỉ hoạt động khi tài liệu được tải (ít nhất là trong IE11). Điều này làm việc cho tôi:
./some.css => http://site.com/stats/2012/some.css
./extra/some.css => http://site.com/stats/2012/extra/some.css
../../lib/slider/slider.css => http://site.com/lib/slider/slider.css
3Xem https://developer.mozilla.org/en-us/docs/web/html/element/base



 Đã trả lời ngày 18 tháng 11 năm 2013 lúc 20:01Nov 18, 2013 at 20:01
 
Corey Alixcorey AlixCorey Alix
2.6252 huy hiệu vàng24 Huy hiệu bạc36 Huy hiệu đồng2 gold badges24
silver badges36 bronze badges
1
Tôi đã phải thêm một bản sửa lỗi vào giải pháp được chấp nhận bởi vì chúng tôi có thể cắt giảm sau # trong điều hướng AngularJS của chúng tôi.
./some.css => http://site.com/stats/2012/some.css
./extra/some.css => http://site.com/stats/2012/extra/some.css
../../lib/slider/slider.css => http://site.com/lib/slider/slider.css
4
 Đã trả lời ngày 23 tháng 12 năm 2015 lúc 7:28Dec 23, 2015 at 7:28
 
StanislavstanislavStanislav
4.0651 Huy hiệu vàng 30 Huy hiệu bạc34 Huy hiệu Đồng1 gold badge30 silver badges34 bronze badges
1
Tôi đã tìm thấy một giải pháp rất đơn giản để làm điều này trong khi vẫn hỗ trợ IE 10 (tức là không hỗ trợ URL-API) bằng cách sử dụng API lịch sử (tức là 10 hoặc cao hơn). Giải pháp này hoạt động mà không có bất kỳ thao tác chuỗi.
./some.css => http://site.com/stats/2012/some.css
./extra/some.css => http://site.com/stats/2012/extra/some.css
../../lib/slider/slider.css => http://site.com/lib/slider/slider.css
5
new URL("http://www.stackoverflow.com?q=hello").href;
//=> "http://www.stackoverflow.com/?q=hello"

new URL("mypath","http://www.stackoverflow.com").href;
//=> "http://www.stackoverflow.com/mypath"

new URL("../mypath","http://www.stackoverflow.com/search").href
//=> "http://www.stackoverflow.com/mypath"

new URL("../mypath", document.baseURI).href
//=> "https://stackoverflow.com/questions/mypath"
1 sẽ không kích hoạt điều hướng trình duyệt, nhưng vẫn sẽ sửa đổi new URL("http://www.stackoverflow.com?q=hello").href;
//=> "http://www.stackoverflow.com/?q=hello"

new URL("mypath","http://www.stackoverflow.com").href;
//=> "http://www.stackoverflow.com/mypath"

new URL("../mypath","http://www.stackoverflow.com/search").href
//=> "http://www.stackoverflow.com/mypath"

new URL("../mypath", document.baseURI).href
//=> "https://stackoverflow.com/questions/mypath"
2 và hỗ trợ tương đối như các đường dẫn tuyệt đối.
Một nhược điểm của giải pháp này là nếu bạn đã sử dụng lịch sử-API và đã đặt trạng thái tùy chỉnh với một tiêu đề, tiêu đề của trạng thái hiện tại sẽ bị mất.
 Đã trả lời ngày 15 tháng 10 năm 2018 lúc 12:18Oct 15, 2018 at 12:18
 
tại sao tại saowhY
Huy hiệu bạc 18111 silver badge10 bronze badges
Điều này sẽ hoạt động. Nhưng chỉ khi bạn mở một trang với tên tệp của nó. Nó sẽ không hoạt động tốt khi bạn mở một liên kết như thế này 
new URL("http://www.stackoverflow.com?q=hello").href;
//=> "http://www.stackoverflow.com/?q=hello"

new URL("mypath","http://www.stackoverflow.com").href;
//=> "http://www.stackoverflow.com/mypath"

new URL("../mypath","http://www.stackoverflow.com/search").href
//=> "http://www.stackoverflow.com/mypath"

new URL("../mypath", document.baseURI).href
//=> "https://stackoverflow.com/questions/mypath"
3. nó sẽ hoạt động với new URL("http://www.stackoverflow.com?q=hello").href;
//=> "http://www.stackoverflow.com/?q=hello"

new URL("mypath","http://www.stackoverflow.com").href;
//=> "http://www.stackoverflow.com/mypath"

new URL("../mypath","http://www.stackoverflow.com/search").href
//=> "http://www.stackoverflow.com/mypath"

new URL("../mypath", document.baseURI).href
//=> "https://stackoverflow.com/questions/mypath"
4
./some.css => http://site.com/stats/2012/some.css
./extra/some.css => http://site.com/stats/2012/extra/some.css
../../lib/slider/slider.css => http://site.com/lib/slider/slider.css
6
 Đã trả lời ngày 27 tháng 2 năm 2019 lúc 22:24Feb 27, 2019 at 22:24
 
 
Làm thế nào để bạn chuyển đổi đường dẫn tương đối sang đường dẫn tuyệt đối?
Hàm tuyệt đối hoạt động bằng cách bắt đầu tại thư mục bắt đầu và di chuyển lên một cấp độ cho mỗi cấp độ "../" trong đường dẫn tương đối. Sau đó, nó kết hợp thư mục bắt đầu thay đổi với đường dẫn tương đối để tạo ra đường dẫn tuyệt đối tương đương.
Làm thế nào để bạn chuyển đổi một URL tương đối thành một URL tuyệt đối?
Với một URL tương đối, nhiệm vụ là chuyển đổi URL tương đối thành URL tuyệt đối ...
 Nhận Relurl và BaseUrl từ người dùng ..
 Sử dụng .....
 Chạy một vòng lặp trên độ dài mảng và cho mỗi lượt, nếu ARR [i] == '..' sau đó bật phần tử từ mảng ST, nếu không sẽ đẩy mảng [i] trong mảng st bằng cách sử dụng.....
 Tham gia mảng ST bằng cách sử dụng ..
 
Làm cách nào để có được đường dẫn tuyệt đối của một tệp bằng JavaScript?
Sử dụng phương thức Path.Resolve () để có đường dẫn tuyệt đối của một tệp từ đường dẫn tương đối trong nút.JS, ví dụ:đường dẫn.Giải quyết ('./ Một số tệp. resolve() method to get an absolute path of a file from a relative path in Node. js, e.g. path. resolve('./some-file.
Đường dẫn tuyệt đối và đường dẫn tương đối trong JavaScript là gì?
Một liên kết có một đường dẫn tuyệt đối sẽ cho máy tính xem máy chủ sẽ đến và sau đó tất cả các thư mục mà bạn phải đi sâu để đến mục tiêu.Một liên kết có đường dẫn tương đối sẽ được viết để cho máy tính biết cách đi từ thư mục với chủ đề hiện đang xem đến mục tiêu.

programming javascript Relative URL Path join __dirname New URL Get URL JavaScript

Hướng dẫn convert relative path to absolute path javascript - chuyển đổi đường dẫn tương đối thành đường dẫn tuyệt đối javascript

Làm thế nào để bạn chuyển đổi đường dẫn tương đối sang đường dẫn tuyệt đối?

Làm thế nào để bạn chuyển đổi một URL tương đối thành một URL tuyệt đối?

Làm cách nào để có được đường dẫn tuyệt đối của một tệp bằng JavaScript?

Đường dẫn tuyệt đối và đường dẫn tương đối trong JavaScript là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội