Comment extraire l'URL de base d'une chaîne en JavaScript?
J'essaie de trouver une méthode relativement simple et fiable pour extraire l'URL de base d'une variable de chaîne à l'aide de JavaScript (ou jQuery).
Par exemple, étant donné quelque chose comme:
http://www.sitename.com/article/2009/09/14/this-is-an-article/
J'aimerais avoir:
http://www.sitename.com/
Une expression régulière est-elle le meilleur choix? Si tel est le cas, quelle instruction pourrais-je utiliser pour affecter l'URL de base extraite d'une chaîne donnée à une nouvelle variable?
J'ai fait quelques recherches à ce sujet, mais tout ce que je trouve dans le monde JavaScript semble tourner autour de la collecte de ces informations à partir de l'URL du document à l'aide de location.Host ou similaire.
Edit: Certains se plaignent de ne pas prendre en compte le protocole. J'ai donc décidé de mettre à jour le code, car il est marqué comme réponse. Pour ceux qui aiment le code à une ligne ... eh bien, désolé pour cette raison que nous utilisons des minimiseurs de code, le code doit être lisible par l'homme et cette méthode est meilleure ... à mon avis.
var pathArray = "https://somedomain.com".split( '/' );
var protocol = pathArray[0];
var Host = pathArray[2];
var url = protocol + '//' + Host;
Ou utilisez solution Davids d'en bas.
Les navigateurs WebKit, Firefox à partir de la version 21 et des versions actuelles d’Internet Explorer (IE 10 et 11) implémentent location.Origin .
_location.Origin_ inclut le protocole , le domaine et éventuellement le port de l'URL.
Par exemple, _location.Origin_ de l'URL _http://www.sitename.com/article/2009/09/14/this-is-an-article/_ est _http://www.sitename.com_.
Pour cibler les navigateurs sans prise en charge de _location.Origin_, utilisez le polyfill concis suivant:
_if (typeof location.Origin === 'undefined')
location.Origin = location.protocol + '//' + location.Host;
_Vous n'avez pas besoin d'utiliser jQuery, utilisez simplement
location.hostname
Il n'y a aucune raison de faire des divisions pour obtenir le chemin, le nom d'hôte, etc. à partir d'une chaîne qui est un lien. Vous avez juste besoin d'utiliser un lien
//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);
Vous pouvez facilement le faire avec jQuery qui ajoute l’élément et lit son attr.
var Host = location.protocol + '//' + location.Host + '/';
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};
}
Ensuite :
'http://mysite:5050/pke45#23'.url()
//OUTPUT : {Host: "mysite:5050", hostname: "mysite", pathname: "/pke45", port: "5050", protocol: "http:",hash:"#23",Origin:"http://mysite:5050"}
Pour votre demande, vous avez besoin de:
'http://mysite:5050/pke45#23'.url().Origin
Revue 07-2017: Il peut être aussi plus élégant et a plus de fonctionnalités
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}
}
Ensuite
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"
Cool!
Si vous utilisez jQuery, c’est un moyen plutôt cool de manipuler des éléments en javascript sans les ajouter au DOM:
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
La règle de l'expression rationnelle de Douglas Crockford est une approche légère mais complète pour obtenir les valeurs de base d'une représentation sous forme de chaîne d'une URL:
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]+'/' ;
Si vous recherchez une boîte à outils de manipulation d'URL plus puissante, essayez RI.js Elle prend en charge les accesseurs, le paramétrage, la normalisation d'URL, etc., le tout avec une API chaînable Nice.
Si vous cherchez un plugin jQuery, alors jquery.url.js devrait vous aider
Un moyen plus simple de le faire est d'utiliser un élément d'ancrage, comme l'a suggéré @epascarello. Cela a pour inconvénient que vous devez créer un élément DOM. Toutefois, cela peut être mis en cache dans une fermeture et réutilisé pour plusieurs 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
};
}
})();
Utilisez-le comme suit:
paserUrl('http://google.com');
Eh bien, objet API URL évite de scinder et de construire manuellement les URL.
let url = new URL('https://stackoverflow.com/questions/1420881');
alert(url.Origin);
J'utilise un regex simple qui extrait l'hôte de l'URL:
function get_Host(url){
return url.replace(/^((\w+:)?\/\/[^\/]+\/?).*$/,'$1');
}
et l'utiliser comme ça
var url = 'http://www.sitename.com/article/2009/09/14/this-is-an-article/'
var Host = get_Host(url);
Notez que si la url ne se termine pas par un /, la Host ne se terminera pas par un /.
Voici quelques tests:
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/');
});
});
Vous pouvez utiliser les codes ci-dessous pour obtenir différents paramètres d'URL actuelle
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);
Si vous extrayez des informations de window.location.href (la barre d'adresse), utilisez ce code pour obtenir http://www.sitename.com/:
var loc = location;
var url = loc.protocol + "//" + loc.Host + "/";
Si vous avez une chaîne, str, c'est-à-dire une URL arbitraire (pas window.location.href), utilisez des expressions régulières:
var url = str.match(/^(([a-z]+:)?(\/\/)?[^\/]+\/).*$/)[1];
Comme tout le monde dans l'univers, je déteste lire des expressions régulières, je vais donc le décomposer en anglais:
- Trouver zéro ou plusieurs caractères alpha suivis de deux points (le protocole, qui peut être omis)
- Suivi de // (peut également être omis)
- Suivi de tous les caractères sauf/(le nom d'hôte et le port)
- Suivi par /
- Suivi par quoi que ce soit (le chemin, moins le début /).
Pas besoin de créer des éléments DOM ou de faire quelque chose de fou.
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 + "/";
}
}
Vous pouvez alors l'utiliser comme ça ...
var str = 'http://en.wikipedia.org/wiki/Knopf?q=1&t=2';
var url = str.toUrl();
La valeur de l'URL sera ...
{
"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" contient également deux méthodes.
var paramQ = url.getParameter('q');
Dans ce cas, la valeur de paramQ sera 1.
var allParameters = url.getParameters();
La valeur de allParameters sera uniquement le nom des paramètres.
["q","t"]
Testé sur IE, Chrome et Firefox.
Au lieu d'avoir à prendre en compte window.location.protocol et window.location.Origin, et éventuellement de manquer un numéro de port spécifié, etc., il suffit de tout récupérer jusqu'au 3ème "/":
// 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);
}
Cela marche:
location.href.split(location.pathname)[0];
Vous pouvez le faire en utilisant une regex:
/(http:\/\/)?(www)[^\/]+\//i
est ce que ça va ?
Pour obtenir l'origine de n'importe quelle URL, y compris les chemins d'accès à un site Web (/my/path) ou sans schéma (//example.com/my/path), ou complète (http://example.com/my/path), j'ai mis en place une fonction rapide.
Dans l'extrait de code ci-dessous, les trois appels doivent consigner 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'));Cela fonctionne pour moi:
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] + '/';
}
}
};var tilllastbackslashregex = new RegExp(/^.*\//);
baseUrl = tilllastbackslashregex.exec(window.location.href);
window.location.href donne l'adresse URL actuelle à partir de la barre d'adresse du navigateur
cela peut être n'importe quoi comme https://stackoverflow.com/abc/xyz ou https://www.google.com/search?q=abc tilllastbackslashregex.exec () lance regex et renvoie la chaîne correspondante jusqu'à la dernière barre oblique inverse, à savoir https://stackoverflow.com/abc/ ou https://www.google.com/ respectivement