URLからプロトコル、ドメイン、ポートを取得する


301

特定のURLから完全なプロトコル、ドメイン、ポートを抽出する必要があります。例えば:

https://localhost:8181/ContactUs-1.0/contact?lang=it&report_type=consumer
>>>
https://localhost:8181

9
URLが現在の場所ではない回答を探している読者は、承認された回答の下に目を
通す

回答:


150

最初に現在の住所を取得する

var url = window.location.href

次に、その文字列を解析します

var arr = url.split("/");

あなたのURLは:

var result = arr[0] + "//" + arr[2]

お役に立てれば


8
これlocationは、オブジェクトが利用できないURL文字列で動作します(ブラウザー外のjs!)
Thamme Gowda

David Calhounの答えは組み込みのパーサー(などlocation)を使用していますが、どの URLに。それがきちんとしていることを確認してください。
Stijn de Witt

6
または、それをワンライナーに変えます:window.location.href.split('/').slice(0, 3).join('/')
Ryan McGeary

ノードでこれをどのように行うのですか?
DDD

5
window.location.origin
int soumen

576
var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');

3
@Randomblueどうですか?あなたが得るでしょうabout://。ただし、知りたいのですが、どのような場合に使用しabout:blankますか?にプラグインリソースを挿入するブラウザがあるかどうかはわかりませんがabout:blank、それが唯一の使用例であると思われます。
シェフ、2012

3
URL文字列がある場合、これはまったく機能しません。(つまり、これを機能させるに location、この場所にいる必要があります)
Nick T

1
返信が遅くなってすみません、@ NickT。はい、それはそれをしません。そのために、David提供する素晴らしいソリューションを使用してください。
シェフ、2015年

1
この回答を正解として選択してください。クリーンで、標準のロケーションオブジェクトを使用しています。
Mohit Gangrade 16

14
+のlocation.host代わりに使用できませんか?location.hostnamelocation.port
c24w 2016

180

これらの回答はいずれも、現在のページのURLではなく、任意のURLを必要とする質問に完全に対処しているようには見えません。

方法1:URL APIを使用します(警告:IE11サポートなし)

URL APIを使用できます(IE11ではサポートされていませんが、他のすべての場所で利用できます)。

これにより、検索パラメータへのアクセスも簡単になります。別のボーナス:DOMに依存しないため、Webワーカーで使用できます。

const url = new URL('http://example.com:12345/blog/foo/bar?startIndex=1&pageSize=10');

方法2(古い方法):DOMでブラウザーの組み込みパーサーを使用する

これが古いブラウザでも機能する必要がある場合に使用します。

//  Create an anchor element (note: no need to append this element to the document)
const url = document.createElement('a');
//  Set href to any path
url.setAttribute('href', 'http://example.com:12345/blog/foo/bar?startIndex=1&pageSize=10');

それでおしまい!

ブラウザーの組み込みパーサーはすでにその役割を果たしています。これで、必要なパーツを取得できます(これは上記の両方の方法で機能することに注意してください)。

//  Get any piece of the url you're interested in
url.hostname;  //  'example.com'
url.port;      //  12345
url.search;    //  '?startIndex=1&pageSize=10'
url.pathname;  //  '/blog/foo/bar'
url.protocol;  //  'http:'

ボーナス:検索パラメーター

「?startIndex = 1&pageSize = 10」はそれ自体ではあまり使用できないため、おそらく検索URLパラメータも分解する必要があるでしょう。

上記の方法1(URL API)を使用した場合は、searchParamsゲッターを使用するだけです。

url.searchParams.get('startIndex');  // '1'

または、すべてのパラメータを取得するには:

function searchParamsToObj(searchParams) {
  const paramsMap = Array
    .from(url.searchParams)
    .reduce((params, [key, val]) => params.set(key, val), new Map());
  return Object.fromEntries(paramsMap);
}
searchParamsToObj(url.searchParams);
// -> { startIndex: '1', pageSize: '10' }

方法2(古い方法)を使用した場合は、次のようなものを使用できます。

// Simple object output (note: does NOT preserve duplicate keys).
var params = url.search.substr(1); // remove '?' prefix
params
    .split('&')
    .reduce((accum, keyval) => {
        const [key, val] = keyval.split('=');
        accum[key] = val;
        return accum;
    }, {});
// -> { startIndex: '1', pageSize: '10' }

link.protocolを使用すると、「google.com」でアンカーを検査すると「http:」が表示されます:-(var link = document.createElement('a'); link.setAttribute('href', 'google.com'); console.log(link.protocol)
eXe

あなたはhttpおそらくページでそれをしていますか?指定されていない場合、現在の場所から「継承」されます
Stijn de Witt

4
これは素晴らしい回答であり、より多くの票を獲得するはずです。この回答は現在の場所だけに限定されず、任意のurlで機能し、この回答は自分で構築するのではなく、ブラウザーの組み込みパーサーを利用するためです(これはできません)同じように、または同じように高速で実行してください!)
Stijn de Witt

この巧妙なトリックをありがとう!1つ追加したいと思います。との両方がhostありhostnameます。前者にはポート(例:)が含まれ、localhost:3000後者はホスト名(例:)のみlocalhostです。
コーダー2017年

これは絶対URLの場合にうまく機能します。相対URLとクロスブラウザの場合は失敗します。助言がありますか?
グルラジ2017

133

何らかの理由で、すべての答えはすべてやりすぎです。これがすべてです:

window.location.origin

詳細については、こちらをご覧くださいhttps : //developer.mozilla.org/en-US/docs/Web/API/window.location#Properties


19
ちなみに、私はすべての一般的なブラウザがそれを実装したとき、これは将来的には素晴らしいものだと確信している、しかし、これは現時点ではそうではありません。developer.mozilla.org/en-US/docs/Web/API/...で私の調査によると、FirefoxとWebKitブラウザーの最新バージョンのみを作成しているときはoriginプロパティをサポートしています。
Zac Seth

2
完了するだけ:場所はHTML5定義され、WHATWG定義され、属性を含むURLUtilsインターフェイスを実装します。origin
Ciro Santilli郝海东冠状病六四事件法轮功

5
2015年からこんにちは。MDNのこの互換性テーブルによると、残念ながら、URLUtilsはまだすべてのブラウザで適切に実装されていません。ただし、originプロパティのサポートは2013年よりも少し良いようです。Safariで適切に実装されていないため、まだプロダクションには適していません。申し訳ありませんが:(
totallyNotLizards

更新:多くのブラウザー(サファリも同様)ではまだサポートされていません:( :(
Ahmad hamza

IEでも機能せず、「undefined」を返します。
Siddhartha Chowdhury

53

すでに述べたように、まだ完全にはサポートされていない window.location.originそれを使用したり、使用する新しい変数を作成したりする代わりに、それを確認し、設定されていない場合は設定するようにします。

例えば;

if (!window.location.origin) {
  window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
}

私は実際にこれについて数か月前に書いていますwindow.location.originの修正


1
window.location.origin実在するのは初めてです。ありがとうございました。^^
EThaizone Jo 2017

33

ホスト

var url = window.location.host;

戻り値 localhost:2679

ホスト名

var url = window.location.hostname;

戻り値 localhost


ありがとうございました!!!localhostがのlocalhost/代わりにとして表示されている理由を理解できませんでしたlocalhost:3000
タイラーヤングブラッド

23

window.location.origin 同じことをするのに十分でしょう。


1
それは私の問題を簡単に解決しました。ありがとう@intsoumen
Turker Tunali

14

protocolプロパティは、コロン(:)を含む現在のURLのプロトコルを設定または返します。

つまり、HTTP / HTTPS部分のみを取得したい場合は、次のようなことができます。

var protocol = window.location.protocol.replace(/:/g,'')

使用できるドメイン:

var domain = window.location.hostname;

使用できるポート:

var port = window.location.port;

URLに表示されない場合、ポートは空の文字列になることに注意してください。例えば:

ポートを使用していないときに80/443を表示する必要がある場合

var port = window.location.port || (protocol === 'https' ? '443' : '80');

9

なぜ使用しない:

let full = window.location.origin

3
既存の回答とともに古い質問に回答を追加する場合、回答がもたらす新しい情報を説明し、時間の経過が回答に影響を与えるかどうかを確認すると便利です。
Jason Aller

8

確かに、window.location.originは標準に従ってブラウザーで正常に動作しますが、何を推測します。IEは標準に従っていません。

そのため、IE、FireFox、Chromeでこれが機能しました。

var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');

しかし、競合を引き起こす可能性のある将来の機能拡張のために、「ロケーション」オブジェクトの前に「ウィンドウ」参照を指定しました。

var full = window.location.protocol+'//'+window.location.hostname+(window.location.port ? ':'+window.location.port: '');

6

これが私が使っている解決策です:

const result = `${ window.location.protocol }//${ window.location.host }`;

編集:

ブラウザ間の互換性を追加するには、以下を使用します。

const result = `${ window.location.protocol }//${ window.location.hostname + (window.location.port ? ':' + window.location.port: '') }`;

1
賛成ですがwindow.location.host、最高のクロスブラウザではないかもしれません
nathanfranke

1
おかげで、元の回答にブラウザ間の互換性が追加されました。
JulienRioux


3
var getBasePath = function(url) {
    var r = ('' + url).match(/^(https?:)?\/\/[^/]+/i);
    return r ? r[0] : '';
};

2
あなたの答えを説明することを検討してください。OPがコードのさまざまな部分の重要性を理解できるとは限りません。
ADyson 2016

3

正規表現(Regex)を使用してみてください。これは、ものを検証/抽出したり、JavaScriptで簡単な解析をしたりする場合に非常に役立ちます。

正規表現は:

/([a-zA-Z]+):\/\/([\-\w\.]+)(?:\:(\d{0,5}))?/

デモンストレーション:

function breakURL(url){

     matches = /([a-zA-Z]+):\/\/([\-\w\.]+)(?:\:(\d{0,5}))?/.exec(url);

     foo = new Array();

     if(matches){
          for( i = 1; i < matches.length ; i++){ foo.push(matches[i]); }
     }

     return foo
}

url = "https://www.google.co.uk:55699/search?q=http%3A%2F%2F&oq=http%3A%2F%2F&aqs=chrome..69i57j69i60l3j69i65l2.2342j0j4&sourceid=chrome&ie=UTF-8"


breakURL(url);       // [https, www.google.co.uk, 55699] 
breakURL();          // []
breakURL("asf");     // []
breakURL("asd://");  // []
breakURL("asd://a"); // [asd, a, undefined]

これで検証もできます。


「有効なRFC 3986 URLスキームは、「文字とそれに続く文字、数字、プラス( "+")、ピリオド( "。")、またはハイフン( "-")の任意の組み合わせで構成する必要があります。」- Stackoverflow。 com / a / 9142331/188833スキームはurn:ietf:rfc:3897(URI)/ urn:ietf:rfc:3897(IRI)の正規表現です:PythonのURI / IRIの一部:github.com/dgerber /rfc3987/blob/master/rfc3987.py#L147
ウェスターナー

2

すべてのブラウザで機能する簡単な答え:

let origin;

if (!window.location.origin) {
  origin = window.location.protocol + "//" + window.location.hostname + 
     (window.location.port ? ':' + window.location.port: '');
}

origin = window.location.origin;

1

構成可能なパラメーターを持つES6スタイル。

/**
 * Get the current URL from `window` context object.
 * Will return the fully qualified URL if neccessary:
 *   getCurrentBaseURL(true, false) // `http://localhost/` - `https://localhost:3000/`
 *   getCurrentBaseURL(true, true) // `http://www.example.com` - `https://www.example.com:8080`
 *   getCurrentBaseURL(false, true) // `www.example.com` - `localhost:3000`
 *
 * @param {boolean} [includeProtocol=true]
 * @param {boolean} [removeTrailingSlash=false]
 * @returns {string} The current base URL.
 */
export const getCurrentBaseURL = (includeProtocol = true, removeTrailingSlash = false) => {
  if (!window || !window.location || !window.location.hostname || !window.location.protocol) {
    console.error(
      `The getCurrentBaseURL function must be called from a context in which window object exists. Yet, window is ${window}`,
      [window, window.location, window.location.hostname, window.location.protocol],
    )
    throw new TypeError('Whole or part of window is not defined.')
  }

  const URL = `${includeProtocol ? `${window.location.protocol}//` : ''}${window.location.hostname}${
    window.location.port ? `:${window.location.port}` : ''
  }${removeTrailingSlash ? '' : '/'}`

  // console.log(`The URL is ${URL}`)

  return URL
}

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.