web-dev-qa-db-ja.com

JavaScriptの文字列からベースURLを抽出する方法は？

JavaScript（またはjQuery）を使用して文字列変数からベースURLを抽出する比較的簡単で信頼性の高い方法を探しています。

たとえば、次のようなものが与えられた場合：

http://www.sitename.com/article/2009/09/14/this-is-an-article/

取得したい：

http://www.sitename.com/

正規表現が最善の策ですか？もしそうなら、特定の文字列から抽出されたベースURLを新しい変数に割り当てるためにどのステートメントを使用できますか？

私はこれについていくつかの検索を行いましたが、JavaScriptの世界で見つけたものはすべて、location.Hostなどを使用して実際のドキュメントURLからこの情報を収集することを中心に展開しているようです。

javascriptregexstringurl
159
Bungle

編集：プロトコルを考慮していないと不満を言う人もいます。答えとしてマークされているので、コードをアップグレードすることにしました。 1行のコードが好きな人にとって...申し訳ありませんが、これがコードミニマイザーを使用する理由です。コードは人間が読めるはずで、この方法の方が良いと思います...私の意見では。

var pathArray = "https://somedomain.com".split( '/' );
var protocol = pathArray[0];
var Host = pathArray[2];
var url = protocol + '//' + Host;

または、下から Davidsソリューション を使用します。

195
user170442

WebKitベースのブラウザ、バージョン21以降のFirefoxおよびInternet Explorerの現在のバージョン（IE 10および11）は、 location.Origin を実装しています。

location.Originには、protocol、domain、およびオプションでportURLの。

たとえば、URL location.Originのhttp://www.sitename.com/article/2009/09/14/this-is-an-article/はhttp://www.sitename.comです。

location.Originをサポートしないブラウザーをターゲットにするには、次の簡潔なポリフィルを使用します。

if (typeof location.Origin === 'undefined')
    location.Origin = location.protocol + '//' + location.Host;
150
David

JQueryを使用する必要はなく、使用するだけです

location.hostname
44
daddywoodland

リンクである文字列からパス、ホスト名などを取得するために分割する理由はありません。あなただけのリンクを使用する必要があります

//create a new element link with your link
var a = document.createElement("a");
a.href="http://www.sitename.com/article/2009/09/14/this-is-an-article/";

//hide it from view when it is added
a.style.display="none";

//add it
document.body.appendChild(a);

//read the links "features"
alert(a.protocol);
alert(a.hostname)
alert(a.pathname)
alert(a.port);
alert(a.hash);

//remove it
document.body.removeChild(a);

JQueryで要素を追加し、その属性を読み取ることで簡単に実行できます。

29
epascarello
var Host = location.protocol + '//' + location.Host + '/';
20
kta
String.prototype.url = function() {
  const a = $('<a />').attr('href', this)[0];
  // or if you are not using jQuery ????????
  // const a = document.createElement('a'); a.setAttribute('href', this);
  let Origin = a.protocol + '//' + a.hostname;
  if (a.port.length > 0) {
    Origin = `${Origin}:${a.port}`;
  }
  const {Host, hostname, pathname, port, protocol, search, hash} = a;
  return {Origin, Host, hostname, pathname, port, protocol, search, hash};

}

それから：

'http://mysite:5050/pke45#23'.url()
 //OUTPUT : {Host: "mysite:5050", hostname: "mysite", pathname: "/pke45", port: "5050", protocol: "http:",hash:"#23",Origin:"http://mysite:5050"}

リクエストには、次のものが必要です。

 'http://mysite:5050/pke45#23'.url().Origin

Review 07-2017：よりエレガントになり、より多くの機能を備えています

const parseUrl = (string, prop) =>  {
  const a = document.createElement('a'); 
  a.setAttribute('href', string);
  const {Host, hostname, pathname, port, protocol, search, hash} = a;
  const Origin = `${protocol}//${hostname}${port.length ? `:${port}`:''}`;
  return prop ? eval(prop) : {Origin, Host, hostname, pathname, port, protocol, search, hash}
}

それから

parseUrl('http://mysite:5050/pke45#23')
// {Origin: "http://mysite:5050", Host: "mysite:5050", hostname: "mysite", pathname: "/pke45", port: "5050"…}


parseUrl('http://mysite:5050/pke45#23', 'Origin')
// "http://mysite:5050"

クール！

15
Abdennour TOUMI

JQueryを使用している場合、これはDOMに追加せずにjavascriptの要素を操作するためのちょっとしたクールな方法です。

var myAnchor = $("<a />");

//set href    
myAnchor.attr('href', 'http://example.com/path/to/myfile')

//your link's features
var hostname = myAnchor.attr('hostname'); // http://example.com
var pathname = myAnchor.attr('pathname'); // /path/to/my/file
//...etc
12
Wayne

URLの文字列表現から基本的な値を取得するための軽量で完全なアプローチは、Douglas Crockfordの正規表現ルールです。

var yourUrl = "http://www.sitename.com/article/2009/09/14/this-is-an-article/";
var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
var parts = parse_url.exec( yourUrl );
var result = parts[1]+':'+parts[2]+parts[3]+'/' ;

より強力なURL操作ツールキットをお探しの場合は、 RI.js 素敵なチェーン可能なAPIでゲッター、セッター、URL正規化などをサポートしてください。

JQueryプラグインを探している場合は、 jquery.url.js が役立ちます

より簡単な方法は、@ epascarelloが示唆したように、アンカー要素を使用することです。これには、DOM要素を作成する必要があるという欠点があります。ただし、これはクロージャーにキャッシュし、複数のURLで再利用できます。

var parseUrl = (function () {
  var a = document.createElement('a');
  return function (url) {
    a.href = url;
    return {
      Host: a.Host,
      hostname: a.hostname,
      pathname: a.pathname,
      port: a.port,
      protocol: a.protocol,
      search: a.search,
      hash: a.hash
    };
  }
})();

次のように使用します。

paserUrl('http://google.com');
10
alexandru.topliceanu

URLからホストを抽出する単純な正規表現を使用します。

function get_Host(url){
    return url.replace(/^((\w+:)?\/\/[^\/]+\/?).*$/,'$1');
}

そして、このように使用します

var url = 'http://www.sitename.com/article/2009/09/14/this-is-an-article/'
var Host = get_Host(url);

urlが/で終わっていない場合、Hostは/で終わっていないことに注意してください。

以下にいくつかのテストを示します。

describe('get_Host', function(){
    it('should return the Host', function(){
        var url = 'http://www.sitename.com/article/2009/09/14/this-is-an-article/';
        assert.equal(get_Host(url),'http://www.sitename.com/');
    });
    it('should not have a / if the url has no /', function(){
        var url = 'http://www.sitename.com';
        assert.equal(get_Host(url),'http://www.sitename.com');
    });
    it('should deal with https', function(){
        var url = 'https://www.sitename.com/article/2009/09/14/this-is-an-article/';
        assert.equal(get_Host(url),'https://www.sitename.com/');
    });
    it('should deal with no protocol urls', function(){
        var url = '//www.sitename.com/article/2009/09/14/this-is-an-article/';
        assert.equal(get_Host(url),'//www.sitename.com/');
    });
    it('should deal with ports', function(){
        var url = 'http://www.sitename.com:8080/article/2009/09/14/this-is-an-article/';
        assert.equal(get_Host(url),'http://www.sitename.com:8080/');
    });
    it('should deal with localhost', function(){
        var url = 'http://localhost/article/2009/09/14/this-is-an-article/';
        assert.equal(get_Host(url),'http://localhost/');
    });
    it('should deal with numeric ip', function(){
        var url = 'http://192.168.18.1/article/2009/09/14/this-is-an-article/';
        assert.equal(get_Host(url),'http://192.168.18.1/');
    });
});
6
Michael_Scharf

以下のコードを使用して、現在のURLのさまざまなパラメーターを取得できます。

alert("document.URL : "+document.URL);
alert("document.location.href : "+document.location.href);
alert("document.location.Origin : "+document.location.Origin);
alert("document.location.hostname : "+document.location.hostname);
alert("document.location.Host : "+document.location.Host);
alert("document.location.pathname : "+document.location.pathname);
6
Nimesh07

Window.location.href（アドレスバー）から情報を抽出している場合、このコードを使用してhttp://www.sitename.com/を取得します。

var loc = location;
var url = loc.protocol + "//" + loc.Host + "/";

文字列strがあり、それが任意のURL（window.location.hrefではない）である場合、正規表現を使用します。

var url = str.match(/^(([a-z]+:)?(\/\/)?[^\/]+\/).*$/)[1];

私は、宇宙のみんなと同じように、正規表現を読むのが嫌いなので、英語で分解します。

  • コロンが続く0個以上の英字を検索します（プロトコルは省略可能）
  • //が後に続く（省略可能）
  • /（ホスト名とポート）以外の文字が続く
  • に続く /
  • 後に続くもの（パス、先頭/を除く）。

DOM要素を作成したり、何かおかしなことをする必要はありません。

5
BMiner

さて、 RL APIオブジェクト は、URLを手動で分割および構築することを避けます。

 let url = new URL('https://stackoverflow.com/questions/1420881');
 alert(url.Origin);
4
devansvd
function getBaseURL() {
    var url = location.href;  // entire url including querystring - also: window.location.href;
    var baseURL = url.substring(0, url.indexOf('/', 14));


    if (baseURL.indexOf('http://localhost') != -1) {
        // Base Url for localhost
        var url = location.href;  // window.location.href;
        var pathname = location.pathname;  // window.location.pathname;
        var index1 = url.indexOf(pathname);
        var index2 = url.indexOf("/", index1 + 1);
        var baseLocalUrl = url.substr(0, index2);

        return baseLocalUrl + "/";
    }
    else {
        // Root Url for domain name
        return baseURL + "/";
    }

}

その後、このように使用できます...

var str = 'http://en.wikipedia.org/wiki/Knopf?q=1&t=2';
var url = str.toUrl();

Urlの値は...

{
"original":"http://en.wikipedia.org/wiki/Knopf?q=1&t=2",<br/>"protocol":"http:",
"domain":"wikipedia.org",<br/>"Host":"en.wikipedia.org",<br/>"relativePath":"wiki"
}

「var url」には2つのメソッドも含まれています。

var paramQ = url.getParameter('q');

この場合、paramQの値は1になります。

var allParameters = url.getParameters();

AllParametersの値は、パラメーター名のみです。

["q","t"]

IE、chrome、firefoxでテスト済み。

4
shaikh

Window.location.protocolとwindow.location.Originを考慮に入れたり、場合によっては指定されたポート番号などをなくしたりする代わりに、3番目の「/」まですべてを取得します。

// get nth occurrence of a character c in the calling string
String.prototype.nthIndex = function (n, c) {
    var index = -1;
    while (n-- > 0) {
        index++;
        if (this.substring(index) == "") return -1; // don't run off the end
        index += this.substring(index).indexOf(c);
    }
    return index;
}

// get the base URL of the current page by taking everything up to the third "/" in the URL
function getBaseURL() {
    return document.URL.substring(0, document.URL.nthIndex(3,"/") + 1);
}
3
sova

これは動作します：

location.href.split(location.pathname)[0];
2
Alain Beauvois

正規表現を使用してそれを行うことができます：

/(http:\/\/)?(www)[^\/]+\//i

フィットしますか ？

2
Clement Herreman

Webサイト内のパス（/my/path）またはスキーマレス（//example.com/my/path）、または完全な（http://example.com/my/path）を含むURLのOriginを取得するには、クイック関数を作成しました。

以下のスニペットでは、3つの呼び出しすべてがhttps://stacksnippets.netを記録する必要があります。

function getOrigin(url)
{
  if(/^\/\//.test(url))
  { // no scheme, use current scheme, extract domain
    url = window.location.protocol + url;
  }
  else if(/^\//.test(url))
  { // just path, use whole Origin
    url = window.location.Origin + url;
  }
  return url.match(/^([^/]+\/\/[^/]+)/)[0];
}

console.log(getOrigin('https://stacksnippets.net/my/path'));
console.log(getOrigin('//stacksnippets.net/my/path'));
console.log(getOrigin('/my/path'));
1
Tom Kay

これは私のために働く：

var getBaseUrl = function (url) {
  if (url) {
    var parts = url.split('://');
    
    if (parts.length > 1) {
      return parts[0] + '://' + parts[1].split('/')[0] + '/';
    } else {
      return parts[0].split('/')[0] + '/';
    }
  }
};
0
abelabbesnabi
var tilllastbackslashregex = new RegExp(/^.*\//);
baseUrl = tilllastbackslashregex.exec(window.location.href);
0
Hasib Ullah Khan