Javascript 如何解析URL？

如果有一件事我就是想不通的话，那就是regex

因此，经过大量搜索，我终于找到了适合我需要的：

function get_domain_name()
    { 
    aaaa="http://www.somesite.se/blah/sdgsdgsdgs";
    //aaaa="http://somesite.se/blah/sese";
        domain_name_parts = aaaa.match(/:\/\/(.[^/]+)/)[1].split('.');
        if(domain_name_parts.length >= 3){
            domain_name_parts[0] = '';
        }
        var domain = domain_name_parts.join('.');
        if(domain.indexOf('.') == 0)
            alert("1"+ domain.substr(1));
        else
            alert("2"+ domain);
    }

---

它基本上还给了我域名，不管怎样，在域名之后我还能得到所有的东西吗？在这种情况下，它将是

aaaa

变量中的

/blah/sdgsdgsgs

。

请注意，此解决方案不是最好的。我这样做只是为了符合OP的要求。我个人建议调查其他答案。

下面的regexp将返回域和其余部分<代码>：\/\/（.[^\/]+）（.*）：

www.google.com

/好东西

我建议您在这里学习RegExp文档：

使用您的功能：

function get_domain_name()
    { 
    aaaa="http://www.somesite.se/blah/sdgsdgsdgs";
    //aaaa="http://somesite.se/blah/sese";
        var matches = aaaa.match(/:\/\/(?:www\.)?(.[^/]+)(.*)/);
        alert(matches[1]);
        alert(matches[2]);
    }

（参见附录B）提供了一个正则表达式来解析URI部分：

^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?
 12            3  4          5       6  7        8 9

在哪里

---

例如：

function parse_url(url) {
    var pattern = RegExp("^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\\?([^#]*))?(#(.*))?");
    var matches =  url.match(pattern);
    return {
        scheme: matches[2],
        authority: matches[4],
        path: matches[5],
        query: matches[7],
        fragment: matches[9]
    };
}
console.log(parse_url("http://www.somesite.se/blah/sdgsdgsdgs"));

给予

---

您只需稍微修改一下正则表达式。例如：

var aaaa="http://www.somesite.se/blah/sdgsdgsdgs";
var m = aaaa.match(/^[^:]*:\/\/([^\/]+)(\/.*)$/);

m将包含以下部分：

["http://www.somesite.se/blah/sdgsdgsdgs", "www.somesite.se", "/blah/sdgsdgsdgs"]

["http://www.somesite.se/blah/sdgsdgsdgs", "www.", "somesite.se", "/blah/sdgsdgsdgs"]

这里是同一个示例，但经过修改，它将拆分出“www.”部分。我认为应该编写正则表达式，这样无论您是否拥有“www”部分，匹配都会起作用。所以，看看这个：

var aaaa="http://www.somesite.se/blah/sdgsdgsdgs";
var m = aaaa.match(/^[^:]*:\/\/(www\.)?([^\/]+)(\/.*)$/);

m将包含以下部分：

["http://www.somesite.se/blah/sdgsdgsdgs", "www.somesite.se", "/blah/sdgsdgsdgs"]

["http://www.somesite.se/blah/sdgsdgsdgs", "www.", "somesite.se", "/blah/sdgsdgsdgs"]

现在检查相同的正则表达式，但url不以“www.”开头：

现在，您的对手看起来是这样的：

["http://somesite.se/blah/sdgsdgsdgs", undefined, "somesite.se", "/blah/sdgsdgsdgs"]

因此，正如您所看到的，它在这两种情况下都会做正确的事情。

EDIT（2020）：在现代浏览器中，您可以使用内置的

URL

webapi

---

与其依赖可能不可靠的*regex，不如使用JavaScript DOM API提供的内置URL解析器：

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

这就是解析URL所需的全部操作。其他一切都只是访问解析的值：

url.protocol; //(http:)
url.hostname; //(www.example.com)
url.pathname; //(/some/path)
url.search; // (?name=value)
url.hash; //(#anchor)

在本例中，如果您正在查找

/blah/sdgsdgsgs

，则可以使用

url.pathname

基本上，您只需在JavaScript中创建一个链接（从技术上讲，是锚元素），然后就可以直接调用已解析的片段。（因为您没有将它添加到DOM中，所以它不会在任何地方添加任何不可见的链接。）访问它的方式与访问

位置

对象上的值的方式相同

（灵感来源于）

编辑：一个重要的注意事项：Internet Explorer似乎有一个bug，它忽略了像这样的对象的

pathname

属性上的前导斜杠。您可以通过执行以下操作使其正常化：

 url.pathname = url.pathname.replace(/(^\/?)/,"/");

> url = $.url("http://markdown.com/awesome/language/markdown.html?show=all#top");

> url.attr('source');
"http://markdown.com/awesome/language/markdown.html?show=all#top"

> url.attr('protocol');
"http"

> url.attr('host');
"markdown.com"

> url.attr('relative');
"/awesome/language/markdown.html?show=all#top"

> url.attr('path');
"/awesome/language/markdown.html"

> url.attr('directory');
"/awesome/language/"

> url.attr('file');
"markdown.html"

> url.attr('query');
"show=all"

> url.attr('fragment');
"top"

注:

---

*：我说“潜在的不可靠”，因为尝试构建或找到一个包罗万象的URL解析器是很有诱惑力的，但有很多条件、边缘情况和宽容的解析技术可能没有得到考虑或适当支持；浏览器可能最擅长实现这一逻辑（因为解析URL对其正确操作至关重要），因此我们应该让它保持简单，让它们自己完成。

有一个很好的jQuery插件用于解析URL:

所有的正则表达式都隐藏在里面，你会得到如下结果：

 url.pathname = url.pathname.replace(/(^\/?)/,"/");

> url = $.url("http://markdown.com/awesome/language/markdown.html?show=all#top");

> url.attr('source');
"http://markdown.com/awesome/language/markdown.html?show=all#top"

> url.attr('protocol');
"http"

> url.attr('host');
"markdown.com"

> url.attr('relative');
"/awesome/language/markdown.html?show=all#top"

> url.attr('path');
"/awesome/language/markdown.html"

> url.attr('directory');
"/awesome/language/"

> url.attr('file');
"markdown.html"

> url.attr('query');
"show=all"

> url.attr('fragment');
"top"

---

自从第一次提出这个问题以来，浏览器已经走过了漫长的道路。现在，您可以使用本机接口来完成以下操作：

const url = new URL('http://www.somesite.se/blah/sdgsdgsdgs')

console.log(url.host) // "www.somesite.se"
console.log(url.href) // "http://www.somesite.se/blah/sdgsdgsdgs"
console.log(url.origin) // "http://www.somesite.se"
console.log(url.pathname) // "/blah/sdgsdgsdgs"
console.log(url.protocol) // "http:"
// etc.

请注意，IE不支持此API。但是，您可以轻松地在其中填充：

学习正则表达式的好资源：那么你想要的是路径，而不是域？你可以通过使用非捕获组来增强正则表达式。我认为在理解你的post mate之前，我必须正确地学习正则表达式，尽管我确信这非常有帮助。对于非捕获组：

“^（？（[^:/？#]+）：？（？：/（[^/？#]*））（[^？#]*）（[^？#]*）\（\？）[^#]*))?(#(?:.*))?"

。只返回scheme、host、path、query和fragment。注意：

：//

不是scheme的一部分，因为scheme实际上可以省略。这是dope af！感谢链接RFC。真正的英雄，那些作者。此外，我还要添加，如何获取当前URI:

文档。URL

以及如何解析查询：嘿！谢谢回答！不，我需要第二部分不带“www”。与原件完全相同。第二部分与您在上面写的一样。谢谢！编辑；我的意思是：不，我需要第二部分不带“www”。与原件完全相同。第三部分与您在上面写的一样完美。谢谢！可以提醒（匹配[1]）；不带“www.”返回它？警报（匹配[2]）；非常完美！感谢链接。正是我所要求的，特别感谢！（感谢所有其他回复者！）@kuroir您不能重新设置“已接受”吗投票数最多的方法的解决方案？我很肯定你能做到……一个值得注意的脚注：我发现这不是一个好方法的唯一一次是，如果你正在解析大量的链接；DOM元素的创建比只使用正则表达式要贵。在一个小的数字上，差异是无法区分的。在100+时，它可以产生明显的效果。规范化

路径名的方法很好！您确定重新分配规范化的
路径名不会产生副作用吗？另外，我建议删除
（）
来自正则表达式？将这项工作交给浏览器就像：我希望浏览器能正确完成……正如你提到的，IE bug可能是一个问题——JavaScript DOM绑定标准涵盖了哪些代码？-我还没有找到它。我很惊讶这个答案还没有得到任何支持！它值得更多！
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=URL"></script>