JSを使用して相対アドレスを絶対アドレスに変換するにはどうすればよいですか？

実際のプロジェクト開発では、このようなシナリオに遭遇し、相対アドレスを知っていて、それを絶対位置に変換したいと思うかもしれません。例えば：

「/wordpress/?p=9227」→「https://www.zhangxinxu.com/wordpress/?p=9227」
"../Images/zhangxinxu.png"→"https://image.zhangxinxu.com/blog/images/zhangxinxu.png"

相対アドレスから絶対アドレスにすばやく変換する方法はありますか？

これが私が知っている2つの方法です。

1つの新しいURL（）メソッド

URLアドレスを処理するためにURL()メソッドが使用されることがあります。例えば：

var myUrl = new URL（ 'https://www.zhangxinxu.com/wordpress/?p=9227'）; 
// URLアドレス
console.log（myUrl.host）; 
consoleのさまざまなコンポーネントを簡単に取得できます。 log（myUrl.path）; 
console.log（myUrl.search）;

上記のURLアドレス分割に加えて、このURL()メソッドには、相対アドレスを絶対アドレスに変換する効果を実現する隠し機能もあります。

文法

var myUrl = new URL（url、[base]）

背後[base]にオプションのパラメータがないことを確認すると、相対パスが絶対パスになることがわかります。

場合

var myUrl = new URL（ "/ wordpress /？p = 9227"、 "https://www.zhangxinxu.com"）; 
console.log（myUrl.href）; 
//結果はこの記事のURLアドレスです
/ / https：//www.zhangxinxu.com/wordpress/?p=9227

コンソール操作のスクリーンショット：

URL（）メソッドは、相対アドレスを絶対アドレスに変換してスクリーンショットを実行します

再び事件

var myUrl = new URL（ "../ images / zhangxinxu.png"、 "https://images.zhangxinxu.com/blog/css/"）; 
console.log（myUrl.href）; 
//結果是https://image.zhangxinxu.com/blog/images/zhangxinxu.png

操作結果は次のとおりです。

URLアドレス変更のスクリーンショット

メソッドのカプセル化

実際の開発では、baseは現在のページのドメイン名アドレスであることが多いため、メソッドをカプセル化するだけで通常の呼び出しを簡略化できます。次のように、自由にコピーして貼り付けることができ、追加する必要もありません。著作権情報。私が書いたコピーを購入するだけです。本のサポートがあれば、問題ありません。

/ ** 
 * @ description相対パスを絶対パスに変換する方法
 * @ author zhangxinxu（.com）
* / 
var related2absolute = function（url、base）{ 
    if（！base）{ 
        base = location.protocol + location.host ; 
    }
    新しいURL（url、base）.hrefを返します; 
}

個人レビュー

URL()アルバムアドレスを絶対アドレスに変換する方法は非常に便利で柔軟性があり、ドメイン名の制限がなく、さまざまなシナリオに属します。

しかし、非常に大きな欠点があります。つまり、互換性があまり良くありません。Edge12 +のサポート。

URL（）互換性のスクリーンショット

ただし、ポリフィルのサポートを追加することはできます、https：//github.com/lifaon74/url-polyfill

しかし、明らかにそれは冗長です。

また、PolyfillはIE9 +（ほとんど）、IE10 +と互換性があります。

互換性メソッドを十分に優れたものにしたい場合は、以下の<a>要素メソッドを試すことができます。

2、a | form要素メソッド

link要素を使用して、絶対アドレス機能を直接返し、ニーズを満たすこともできます。

例えば<a>、hrefの属性<form>要素、またはactionの属性要素。

場合

JavaScriptコードに直接移動します。

var eleLink = document.createElement（ 'a'）; 
eleLink.href = "/ wordpress /？p = 9227"; 
console.log（eleLink.href）; 
//結果はこの記事のURLです
// https：/ / www .zhangxinxu.com / wordpress /？p = 9227

コンソールテストの結果は次のとおりです。

リンク要素を使用して、相対アドレスを絶対位置に変換します

ケースx2

パス関係のあるアドレスも同様に実装されます。例えば：

var eleLink = document.createElement（ 'a'）; 
eleLink.href = "https://images.zhangxinxu.com/blog/css/" + "../images/zhangxinxu.png"; 
console.log（eleLink.href）; 
//結果是https://image.zhangxinxu.com/blog/images/zhangxinxu.png

Chromeブラウザコンソールテストの結果は、次のことを示しています。

相対アドレスが絶対位置決めになります

メソッドのカプセル化

同様に、非常に便利なパス変換方法をカプセル化できます。自由にコピーして貼り付けることができ、それをサポートするために私が書いた本を購入する限り、著者情報を追加する必要はありません。

/ ** 
 * @ description相対アドレス絶対アドレス変換方法
 * @ author zhangxinxu（.com）
* / 
var related2absolute = function（url、base）{ 
    var ele = document.createElement（ 'a'）; 
    ele.href =（base || ''）+ url; 
    return eleLink.href; 
}

個人レビュー

リンク要素の相対アドレス変換方法の助けを借りて、その最大の利点は、非常に優れた互換性があることです。たとえば、以下のIE8ブラウザーで実行した結果など、非常に低いバージョンのIEブラウザーもサポートされます。

IE8ブラウザから絶対アドレス効果まで

短所としては、ブラウザ環境にある必要があります。Node.js環境では以上です。

3つの小さな新年のまとめ

今日は大晦日、正午に食堂で10ワンタンとポーチドエッグを食べました（写真なし）。夕方、フロントエンドグループ全体で30人近くが集まり、ラオワンに行って鍋を食べました。。これは写真があります。

撈王火鍋

それからこの記事を書きました。

充実した一日でした。

ちなみに、この記事で取り上げたURL（）メソッドについては、前回の記事「JS URL（）とURLSearchParams（）APIインターフェースの詳細な紹介」を参照してください。