Creating a new Location object in javascript

半腔热情 提交于 2019-12-27 13:07:33

问题


Is it possible to create a new Location object in javascript? I have a url as a string and I would like to leverage what javascript already provides to gain access to the different parts of it.

Here's an example of what I'm talking about (I know this doesn't work):

var url = new window.location("http://www.example.com/some/path?name=value#anchor");
var protocol = url.protocol;
var hash = url.hash;
// etc etc

Is anything like this possible or would I essentially have to create this object myself?


回答1:


Well, you could use an anchor element to extract the url parts, for example:

var url = document.createElement('a');
url.href = "http://www.example.com/some/path?name=value#anchor";
var protocol = url.protocol;
var hash = url.hash;

alert('protocol: ' + protocol);
alert('hash: ' + hash);
​

It works on all modern browsers and even on IE 5.5+.

Check an example here.




回答2:


How about use the standard URL object?

var url = new URL("http://www.example.com/some/path?name=value#anchor");
var protocol = url.protocol;
var hash = url.hash;

Warning: This interface is a bit new, so, if you're not using a transpiler, please, check the compatibility table and do your tests at target browsers.




回答3:


You can leverage the power of an anchor element

var aLink = document.createElement("a");
aLink.href="http://www.example.com/foo/bar.html?q=123#asdf";
alert(aLink.pathname);



回答4:


You can parse it in a regex to get the parts as matches... I don't have the full code right now, but this can be used to get the querydata:

var myUrl = window.location.href;
var matches = myUrl.match(/([^\?]+)\?(.+)/);
var queryData = matches[2];

matches[0] is the full string, matches(1) is the first part of the URL (up to the ?)... you could build up a regular expression to parse each part of a string url if you want...

You can also use one of the many libraries already out there for this.



来源:https://stackoverflow.com/questions/3213531/creating-a-new-location-object-in-javascript

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!