有什么方法可以在没有查询字符串的情况下获取 URL？答案

【问题标题】：Is there any method to get the URL without query string?有什么方法可以在没有查询字符串的情况下获取 URL？
【发布时间】：2017-07-20 12:26:47
【问题描述】：

我有一个类似http://localhost/dms/mduserSecurity/UIL/index.php?menu=true&submenu=true&pcode=1235 的网址。

我想获取不带查询字符串的 URL：http://localhost/dms/mduserSecurity/UIL/index.php。

在 JavaScript 中有什么方法可以解决这个问题吗？目前我使用的是document.location.href，但它会返回完整的 URL。

【问题讨论】：

Remove querystring from URL 的可能重复项

标签： javascript url

【解决方案1】：

试试这个：

let path = window.location.href.split('?')[0]
console.log({path})

【讨论】：

@Lincoln - 为什么？我认为这没有任何不安全的理由。它也在规范（window.location.href 应该返回的规范和 URL 如何工作的规范）内，所以它不应该有任何未来的问题。对于更简洁的代码，它更容易阅读和理解。较小的代码更短。最后，它没有菲利克斯的回答那么激烈和复杂。不是说菲利克斯是错的，而是说如果没有某种失败/不安全的具体例子，这个答案在几乎所有方面都是优越的。
您应该像在其他答案中一样使用 window.location.pathname ..etc
@JimboJonny @Marcel 这不处理片段标识符（例如stackoverflow.com/questions/5817505#5817548 中的# 术语）。您必须使用正则表达式或使用多个 .split() 函数，此时您已经失去了在清理 URL 时作为“简单”答案的价值。当然，这在技术上超出了问题的范围，但我想说它仍然相关。
虽然它不处理片段标识符是准确的，但提问者并未要求提供完全净化的 URL。他专门要求一个没有查询字符串的网址，而这个答案正是如此。删除了查询字符串的相同 URL。
它还会丢失不是所要求的片段标识符。

【解决方案2】：

了解Window.location 和Location 接口：

const urlPieces = [location.protocol, '//', location.host, location.pathname]
let url = urlPieces.join('')

console.log({urlPieces, url})

【讨论】：

或者如果使用 es6 你可以使用字符串文字${location.protocol}//${location.host}${location.pathname}
虽然请注意pathname 可能是drop the leading / (until IE 11?)。啊，IE，总是一片雪花，不是吗？
不要忘记 location.hash（在某些情况下，例如在 vuejs 项目中）

【解决方案3】：

location.toString().replace(location.search, "")

【讨论】：

这是一个非常被低估的答案。这是唯一能准确回答问题的人。更短的选项：location.href.replace(location.search, '')
如果有片段部分呢？ domain.com/?x=1#top
这个问题有10个答案。其中只有一个保留了散列（问题所询问的 URL 上不存在散列）。为什么有两个 cmets 指出这个答案不保留不存在的散列但不保留其他任何散列？

【解决方案4】：

var url = window.location.origin + window.location.pathname;

【讨论】：

投反对票，因为 IE11 不支持 origin :-(
为什么您会因为某项内容在特定浏览器中无法使用而拒绝投票？许多地方仍然使用 IE10 作为标准，因为他们使用的应用程序。
适用于 IE11.309.16299.0

【解决方案5】：

如果你还想删除哈希，试试这个：window.location.href.split(/[?#]/)[0]

【讨论】：

【解决方案6】：

这是一种使用URL() interface的方法：

new URL(location.pathname, location.href).href

【讨论】：

【解决方案7】：

试试：

document.location.protocol + '//' +
document.location.host +
document.location.pathname;

（注意：.host 而不是 .hostname，以便在必要时也包含端口）

【讨论】：

【解决方案8】：

要获取 URL 的每个部分（查询除外）：

var url = (location.origin).concat(location.pathname).concat(location.hash);

请注意，如果有哈希值，这也包括哈希值（我知道您的示例 URL 中没有哈希值，但为了完整起见，我包含了该方面）。要消除哈希，只需排除 .concat(location.hash)。

最好使用concat 将Javascript 字符串连接在一起（而不是+）：在某些情况下，它可以避免类型混淆等问题。

【讨论】：

【解决方案9】：

只需使用 split 剪切字符串（简单的方法）：

var myString = "http://localhost/dms/mduserSecurity/UIL/index.php?menu=true&submenu=true&pcode=1235"
var mySplitResult = myString.split("?");
alert(mySplitResult[0]);

【讨论】：

【解决方案10】：

使用window.location的属性

var loc = window.location;
var withoutQuery = loc.hostname + loc.pathname;
var includingProtocol = loc.protocol + "//" + loc.hostname + loc.pathname;

您可以在https://developer.mozilla.org/en/DOM/window.location查看更多属性

【讨论】：

【解决方案11】：

这个怎么样：location.href.slice(0, - ((location.search + location.hash).length))

【讨论】：

【解决方案12】：

这里有两种方法：

<script type="text/javascript">
    var s="http://localhost/dms/mduserSecurity/UIL/index.php?menu=true&submenu
                                =true&pcode=1235";

    var st=s.substring(0, s.indexOf("?"));

    alert(st);

    alert(s.replace(/\?.*/,''));
</script>

【讨论】：

【解决方案13】：

只需将这两行添加到 JS 中的 $(document).ready 如下：

$(document).ready(function () {
 $("div.sidebar nav a").removeClass("active");
        $('nav a[href$="'+ window.location.pathname.split("?")[0] +'"]').addClass('active');
});

最好使用美元符号（$）（以结尾）

$('nav a[href$

而不是（^）（开头）

$('nav a[href^

因为，如果您使用 (^) 符号并且您在导航菜单中有嵌套 URL，（例如“/account”和“/account/roles”）

它会同时激活它们。

【讨论】：

【解决方案14】：

window.location.href.split("#")[0].split("?")[0]

【讨论】：

【解决方案15】：

您可以像这样使用 URL 构造函数：

const href = 'http://localhost/dms/mduserSecurity/UIL/index.php?menu=true&submenu=true&pcode=1235'; // document.location.href
const url = new URL(href);
const noSearchUrl = href.replace(url.search, '');
console.log(noSearchUrl);

【讨论】：

【解决方案16】：

如果你正在使用导航栏，并且想在点击侧栏导航后获取纯 url，那么下面的代码可能会有所帮助：

$(document).ready(function () {
    $("div.sidebar nav a").removeClass("active");
    var urlPath = window.location.pathname.split("?")[0];
    var nav = $('div.sidebar nav a').filter(function () {
        return $(this).attr('href').toLowerCase().indexOf(urlPath.toLocaleLowerCase()) > -1;
    });
    $(nav).each(function () {
        if ($(this).attr("href").toLowerCase() == urlPath.toLocaleLowerCase())
            $(this).addClass('active');
    });
});

【讨论】：