使用 jQuery 从 CSS href 中查找服务器名称答案

【问题标题】：Find server name from CSS href with jQuery使用 jQuery 从 CSS href 中查找服务器名称
【发布时间】：2015-07-08 18:26:25
【问题描述】：

如何使用 jQuery 或 JavaScript 将以下服务器路径分配给变量？

<link rel="stylesheet" href="https://myServer:44301/Some/Path/">

来自

<link rel="stylesheet" href="/core/assets/styles.min.css">
<link rel="stylesheet" href="/Content/Site.css">
<link rel="stylesheet" href="https://myServer:44301/Some/Path/">
<link rel="stylesheet" href="https://anotherServer/Another/Path/">

字符串Some/Path是需要匹配的。

为了清楚起见，变量应该包含字符串https://myServer:44301/

【问题讨论】：

此链接可能会有所帮助 - stackoverflow.com/questions/1368264/…
你想删除特定链接啊？？

标签： javascript jquery html css jquery-selectors

【解决方案1】：

你可以试试这个：

function getHostWithPath(path) {
    var linkNodeList = document.getElementsByTagName('link');
    for (var i = 0 ; i <linkNodeList.length ; i++) {
        var l = document.createElement("a");
        l.href = linkNodeList[i].href;
        /*
        // Usefull properties available in l:
        console.log(l.hostname);
        console.log(l.port);
        console.log(l.pathname);
        console.log(l.hash);
        console.log(l.protocol);
        console.log(l.search); // Query String
        */
        if (l.pathname == path) {
            var re = new RegExp(path + '.*');
            return l.href.replace(re, '');
        }
    }
}

var myHostname = getHostWithPath('/Some/Path');

【讨论】：

这似乎没有添加端口号或连接协议。
好的，抱歉，我认为这很明显，但还有更多有用的属性。在我的回答中添加，您可以在这里看到它的实际效果：jsfiddle.net/laruiss/h5ovo9dk
谢谢，这似乎是一个更强大的解决方案。

【解决方案2】：

这可以通过 JQuery 通过在您的页面上运行以下代码来完成：

var server = $("link[href*='/Some/Path']").attr("href").replace("Some/Path/", "");

它的作用是选择 href 包含 /Some/Path 的元素并获取整个 href 属性的文本/值。然后它会删除 Some/Path/ 部分，只留下 https://myServer:44301/，然后将其设置在变量 server 中。

片段：

var server = $("link[href*='/Some/Path']").attr("href").replace("Some/Path/", "");
alert(server);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="/core/assets/styles.min.css">
<link rel="stylesheet" href="/Content/Site.css">
<link rel="stylesheet" href="https://myServer:44301/Some/Path/">
<link rel="stylesheet" href="https://anotherServer/Another/Path/">

【讨论】：

好的，如果它有一个查询字符串呢？ ;-) 喜欢myServer:44301/Some/Path/?v1.0.2
那么我的代码是var server = $("link[href*='/Some/Path']").attr("href").split("Some/Path/")[0]; ... ;)
您的代码会捕捉到这一点：anotherServer/Another/Path/Some/Path... 我的意思是：您的代码似乎不太便携、可靠、可重用。
我同意它缺乏可移植性，但使用split 确实扩大了它的范围，通过返回指定文本之前的任何内容

【解决方案3】：

$(function() {
  $("link").each(function() {
    var href = $(this).prop("href");
    
    alert(href);
  });
});

<!DOCTYPE html>
<html>
  <head>
    <title>title here</title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="/core/assets/styles.min.css">
    <link rel="stylesheet" href="/Content/Site.css">
    <link rel="stylesheet" href="https://myServer:44301/Some/Path/">
    <link rel="stylesheet" href="https://anotherServer/Another/Path/">    
  </head>
  <body>
    <!-- page content -->
  </body>
</html>

下面的代码获取每个链接并使用alert() 显示它们。根据您的情况，我让您将 alert() 包装为条件块 if() 以获取正确的href（也许您的链接总是这样设置，所以您会想要获取第三个，等等... )。

【讨论】：