Find server name from CSS href with jQuery

Question

How can I get the following server path assigned to a variable with jQuery or JavaScript ?

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

From

<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/">

The string Some/Path is what needs to be matched on.

To be clear, the variable should contain the string https://myServer:44301/

This link might help - http://stackoverflow.com/questions/1368264/how-to-get-host-name-in-javascript — Siddharth Thevaril, Jul 07 '15 at 11:39

laruiss · Accepted Answer · 2015-07-08T10:26:25.330

2

You can try this:

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');

edited Jul 08 '15 at 10:26

answered Jul 07 '15 at 11:58

laruiss

3,780
1
18
29

This doesn't appear to add the port number or connection protocol. – MrDeveloper Jul 08 '15 at 07:54
OK, sorry, I thought it was obvious, but there are more useful properties. Added in my answer, you can see it in action here: http://jsfiddle.net/laruiss/h5ovo9dk/ – laruiss Jul 08 '15 at 10:00
Thanks, this seems to be a much more powerful solution. – MrDeveloper Jul 08 '15 at 11:34

score 1 · Answer 2 · answered Jul 07 '15 at 11:51

1

This can be done by JQuery by running the following code on your page:

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

What it does is it select the element whose href contains /Some/Path and gets the whole href attribute's text/value. Then it removes the Some/Path/ part leaving you with only https://myServer:44301/, which is then set in the variable server .

Snippet:

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/">

answered Jul 07 '15 at 11:51

Ahs N

8,233
1
28
33

OK, what about... if it has a Query String? ;-) Like https://myServer:44301/Some/Path/?v1.0.2 – laruiss Jul 08 '15 at 10:02
Then my code would be `var server = $("link[href*='/Some/Path']").attr("href").split("Some/Path/")[0];` ... ;) – Ahs N Jul 08 '15 at 10:05
Your code would catch this : https://anotherServer/Another/Path/Some/Path/... My point being: your code does not seem to be very portable, reliable, reusable. – laruiss Jul 08 '15 at 10:30
I agree that it lacks portability, but using `split` does expands its scope, by returning you anything thats before the specified text – Ahs N Jul 08 '15 at 10:32

score -1 · Answer 3 · answered Jul 07 '15 at 11:52

$(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>

The code below take each link and display them using alert(). Depending on your condition, I let you wrap the alert()with a condition bloc if() to take the right href (maybe your links are always set up like this, so you'll want to take the 3rd, etc...).

Find server name from CSS href with jQuery

3 Answers3