javascript - موقعي - ملف url




كيفية استخراج URL الأساسي من سلسلة في JavaScript؟ (12)

var tilllastbackslashregex = new RegExp (/^.*//)؛ baseUrl = tilllastbackslashregex.exec (window.location.href) ؛

أحاول العثور على طريقة سهلة نسبياً وموثوقة لاستخراج عنوان URL الأساسي من متغير سلسلة باستخدام JavaScript (أو jQuery).

على سبيل المثال ، يتم تقديم شيء مثل:

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

أود الحصول على:

http://www.sitename.com/

هل التعبير العادي هو أفضل رهان؟ إذا كان الأمر كذلك ، فما العبارة التي يمكنني استخدامها لتعيين عنوان URL الأساسي المستخرج من سلسلة معينة إلى متغير جديد؟

لقد قمت ببعض البحث في هذا الأمر ، ولكن يبدو أن كل ما أجده في عالم جافا سكريبت يدور حول جمع هذه المعلومات من عنوان URL المستند الفعلي باستخدام location.host أو ما شابه.


أستخدم تعبيرًا عاديًا بسيطًا يستخرج المضيف من عنوان 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/');
    });
});

إذا كنت تقوم باستخراج المعلومات من 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];

أنا ، مثل أي شخص في الكون ، أكره قراءة التعبيرات العادية ، لذا فسوف أجزمها بالإنجليزية:

  • العثور على صفر أو أكثر من أحرف ألفا متبوعة بنقطتين (البروتوكول ، الذي يمكن تجاهله)
  • يتبعه // (يمكن حذفه أيضًا)
  • يتبعه أي أحرف باستثناء / (اسم المضيف والمنفذ)
  • تليها /
  • تليها أيا كان (الطريق ، أقل بداية /).

لا حاجة لإنشاء عناصر DOM أو فعل أي شيء مجنون.


بدلاً من الاضطرار إلى حساب 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);
}

طريق سريع ولكن اتباع طريقة كاملة للحصول على القيم الأساسية من تمثيل سلسلة لعنوان URL هو قاعدة regexp لدوغلاس كروكفورد:

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 أكثر قوة ، فجرّب URI.js وهي تدعم أدوات URI.js و setter URI.js url وما إلى ذلك.

إذا كنت تبحث عن jQuery Plugin ، jquery.url.js أن يساعدك 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');

لا تحتاج إلى استخدام jQuery ، مجرد استخدام

location.hostname

متصفحات WebKit-based ، فايرفوكس اعتبارًا من الإصدار 21 والإصدارات الحالية من Internet Explorer (IE 10 و 11) تُنفّذ location.origin .

location.origin يتضمن البروتوكول ، والمجال ، واختيارياً منفذ عنوان URL.

على سبيل المثال ، location.origin من عنوان URL http://www.sitename.com/article/2009/09/14/this-is-an-article/ هو http://www.sitename.com .

لاستهداف المتصفحات دون دعم location.origin استخدم orgin polyfill الموجزة التالية:

if (typeof location.origin === 'undefined')
    location.origin = location.protocol + '//' + location.host;

هذا ، يعمل بالنسبة لي:

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] + '/';
    }
  }
};


يمكنك استخدام الرموز أدناه للحصول على معاملات مختلفة لعنوان 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);

يمكنك فعل ذلك باستخدام تعبير عادي:

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

هل تصلح ؟


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" أيضًا على طريقتين.

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

في هذه الحالة ستكون قيمة paramQ 1.

var allParameters = url.getParameters();

ستكون قيمة allParameters هي أسماء المعلمات فقط.

["q","t"]

تم اختباره على IE و chrome و firefox.


var host = location.protocol + '//' + location.host + '/';




url