JavaScript organizes URLs based on their domain and directory

Question

JavaScript organizes URLs based on their domain and directory

Is there a way to group URLs from a sorted list by domain and directory?

When two URLs share the same directory (the first one after the domain), they should be grouped together in an array;
If URLs have different first directories but the same domain, they should also be grouped in an array;

Take the following list of URLs as an example:

var url_list = ["https://www.facebook.com/impression.php/f2e61d9df/?lid=115",
"https://www.facebook.com/plugins/like.php?app_id=5",
"https://www.facebook.com/tr/a/?id=228037074239568",
"https://www.facebook.com/tr/b/?ev=ViewContent",
"http://www.marvel.com/abc?f=33",
"http://www.marvel.com/games?a=11",
"http://www.marvel.com/games?z=22",
"http://www.marvel.com/videos"]

They should be grouped as shown below:

var group_url = [
    ["https://www.facebook.com/impression.php/f2e61d9df/?lid=115","https://www.facebook.com/plugins/like.php?app_id=5",],
    ["https://www.facebook.com/tr/a/?id=228037074239568","https://www.facebook.com/tr/b/?ev=ViewContent"],
    ["http://www.marvel.com/abc?f=33","http://www.marvel.com/videos"],
    ["http://www.marvel.com/games?a=11","http://www.marvel.com/games?z=22"]
]

I attempted to write code to group URLs by domain, but could not find a way to also consider directories:

var group_url = [];
var count = 0;
var url_list = ["https://www.facebook.com/impression.php/f2e61d9df/?lid=115",
  "https://www.facebook.com/plugins/like.php?app_id=5",
  "https://www.facebook.com/tr/?id=228037074239568",
  "https://www.facebook.com/tr/?ev=ViewContent",
  "http://www.marvel.com/abc?f=33",
  "http://www.marvel.com/games?a=11",
  "http://www.marvel.com/games?z=22",
  "http://www.marvel.com/videos"]
      
for(i = 0; i < url_list.length; i++) {
  if(url_list[i] != "") {
    var current = url_list[i].replace(/.*?:\/\//g, "");
    var check = current.substr(0, current.indexOf('/'));
    group_url.push([])
    for(var j = i; j < url_list.length; j++) {
      var add_url = url_list[j];
      if(add_url.indexOf(check) != -1) {
        group_url[count].push(add_url);
        url_list[j] = "";
      }
      else {
        break;
      }
    }
    count += 1;
  }
}
    
console.log(JSON.stringify(group_url));

javascript arrays

Answer 1

Answer №1

If you're looking to organize the URLs by domain+dir and then group those that are alone in their group by domain only, you can achieve that with the following ES5 script:

var url_list = ["https://www.facebook.com/impression.php/f2e61d9df/?lid=115",
"https://www.facebook.com/plugins/like.php?app_id=5",
"https://www.facebook.com/tr/a/?id=228037074239568",
"https://www.facebook.com/tr/b/?ev=ViewContent",
"http://www.marvel.com/abc?f=33",
"http://www.marvel.com/games?a=11",
"http://www.marvel.com/games?z=22",
"http://www.marvel.com/videos"];

// Group the URLs, keyed by domain+dir
var hash = url_list.reduce(function (hash, url) {
    // ignore protocol, and extract domain and first dir:
    var domAndDir = url.replace(/^.*?:\/\//, '').match(/^.*?\..*?\/[^\/?#]*/)[0];
    hash[domAndDir] = (hash[domAndDir] || []).concat(url);
    return hash;
}, {});

// Regroup URLs by domain only, when they are alone for their domain+dir
Object.keys(hash).forEach(function (domAndDir) {
    if (hash[domAndDir].length == 1) {
        var domain = domAndDir.match(/.*\//)[0];
        hash[domain] = (hash[domain] || []).concat(hash[domAndDir]);
        delete hash[domAndDir];
    }
});
// Convert hash to array
var result = Object.keys(hash).map(function(key) {
    return hash[key];
});

// Output result
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Note: I stuck to ES5 as per your comment, but you might want to consider using ES6 Map for this task, as it is better suited for handling such a hash.

Answer 2

If you're looking to organize the URLs by domain+dir and then group those that are alone in their group by domain only, you can achieve that with the following ES5 script:

var url_list = ["https://www.facebook.com/impression.php/f2e61d9df/?lid=115",
"https://www.facebook.com/plugins/like.php?app_id=5",
"https://www.facebook.com/tr/a/?id=228037074239568",
"https://www.facebook.com/tr/b/?ev=ViewContent",
"http://www.marvel.com/abc?f=33",
"http://www.marvel.com/games?a=11",
"http://www.marvel.com/games?z=22",
"http://www.marvel.com/videos"];

// Group the URLs, keyed by domain+dir
var hash = url_list.reduce(function (hash, url) {
    // ignore protocol, and extract domain and first dir:
    var domAndDir = url.replace(/^.*?:\/\//, '').match(/^.*?\..*?\/[^\/?#]*/)[0];
    hash[domAndDir] = (hash[domAndDir] || []).concat(url);
    return hash;
}, {});

// Regroup URLs by domain only, when they are alone for their domain+dir
Object.keys(hash).forEach(function (domAndDir) {
    if (hash[domAndDir].length == 1) {
        var domain = domAndDir.match(/.*\//)[0];
        hash[domain] = (hash[domain] || []).concat(hash[domAndDir]);
        delete hash[domAndDir];
    }
});
// Convert hash to array
var result = Object.keys(hash).map(function(key) {
    return hash[key];
});

// Output result
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Note: I stuck to ES5 as per your comment, but you might want to consider using ES6 Map for this task, as it is better suited for handling such a hash.

Answer 3

Answer №2

updatedURLList = urlList.map(function(item){return item.split("://")[1].split("/");});//exclude protocol, split by /

var object={};
for(var i in updatedURLList){
var individualItem=updatedURLList[i];
    object[individualItem[0]]=object[individualItem[0]]||{};
    object[individualItem[0]][individualItem[1]]=object[individualItem[0]][individualItem[1]]||[];
    object[individualItem[0]][individualItem[1]].push(urlList[i]);
 }

Usage example:

object["www.facebook.com"];//{plugins:[],tr:[]}
object["www.facebook.com"]["tr"];//[url1,url2]

http://jsbin.com/qacasexowi/edit?console please enter "result"

Answer 4

updatedURLList = urlList.map(function(item){return item.split("://")[1].split("/");});//exclude protocol, split by /

var object={};
for(var i in updatedURLList){
var individualItem=updatedURLList[i];
    object[individualItem[0]]=object[individualItem[0]]||{};
    object[individualItem[0]][individualItem[1]]=object[individualItem[0]][individualItem[1]]||[];
    object[individualItem[0]][individualItem[1]].push(urlList[i]);
 }

Usage example:

object["www.facebook.com"];//{plugins:[],tr:[]}
object["www.facebook.com"]["tr"];//[url1,url2]

http://jsbin.com/qacasexowi/edit?console please enter "result"

Answer 5

Answer №3

If you're looking for a reliable way to work with URLs, I highly recommend checking out the fantastic URI.js library. It provides powerful tools for parsing, querying, and manipulating URLs. You can find more information about it on their official website:

One useful feature of URI.js is its ability to handle paths in a straightforward manner. Here's an example straight from the API documentation:

var uri = new URI("http://example.org/foo/hello.html");
// get pathname
uri.pathname(); // returns "/foo/hello.html"
// set pathname
uri.pathname("/foo/hello.html"); // returns the URI instance for chaining

// encoding
uri.pathname("/hello world/");
uri.pathname() === "/hello%20world/";
// decoding
uri.pathname(true) === "/hello world/";

// handling empty paths
URI("").path() === "";
URI("/").path() === "/";
URI("http://example.org").path() === "/";

Once you get the hang of it, working with URI.js should be a breeze.

Answer 6

If you're looking for a reliable way to work with URLs, I highly recommend checking out the fantastic URI.js library. It provides powerful tools for parsing, querying, and manipulating URLs. You can find more information about it on their official website:

One useful feature of URI.js is its ability to handle paths in a straightforward manner. Here's an example straight from the API documentation:

var uri = new URI("http://example.org/foo/hello.html");
// get pathname
uri.pathname(); // returns "/foo/hello.html"
// set pathname
uri.pathname("/foo/hello.html"); // returns the URI instance for chaining

// encoding
uri.pathname("/hello world/");
uri.pathname() === "/hello%20world/";
// decoding
uri.pathname(true) === "/hello world/";

// handling empty paths
URI("").path() === "";
URI("/").path() === "/";
URI("http://example.org").path() === "/";

Once you get the hang of it, working with URI.js should be a breeze.

Answer 7

Answer №4

A recommended approach is to utilize an object and group the data by domain and the first string after the domain. This can then be iterated through to transform the data into the desired structure.

This method can handle unsorted data as well.

var url_list = ["https://www.facebook.com/impression.php/f2e61d9df/?lid=115", "https://www.facebook.com/plugins/like.php?app_id=5", "https://www.facebook.com/tr/a/?id=228037074239568", "https://www.facebook.com/tr/b/?ev=ViewContent", "http://www.marvel.com/abc?f=33", "http://www.marvel.com/games?a=11", "http://www.marvel.com/games?z=22", "http://www.marvel.com/videos"],
    temp = [],
    result;

url_list.forEach(function (a) {
    var m = a.match(/.*?:\/\/([^\/]+)\/?([^\/?]+)?/);
    m.shift();
    m.reduce(function (r, b) {
        if (!r[b]) {
            r[b] = { _: [] };
            r._.push({ name: b, children: r[b]._ });
        }
        return r[b];
    }, this)._.push(a);
}, { _: temp });

result = temp.reduce(function (r, a) {
    var top = [],
        parts = [];

    a.children.forEach(function (b) {
        if (b.children.length === 1) {
            top.push(b.children[0]);
        } else {
            parts.push(b.children);
        }
    });
    return top.length ? r.concat([top], parts) : r.concat(parts);
}, []);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 8

A recommended approach is to utilize an object and group the data by domain and the first string after the domain. This can then be iterated through to transform the data into the desired structure.

This method can handle unsorted data as well.

var url_list = ["https://www.facebook.com/impression.php/f2e61d9df/?lid=115", "https://www.facebook.com/plugins/like.php?app_id=5", "https://www.facebook.com/tr/a/?id=228037074239568", "https://www.facebook.com/tr/b/?ev=ViewContent", "http://www.marvel.com/abc?f=33", "http://www.marvel.com/games?a=11", "http://www.marvel.com/games?z=22", "http://www.marvel.com/videos"],
    temp = [],
    result;

url_list.forEach(function (a) {
    var m = a.match(/.*?:\/\/([^\/]+)\/?([^\/?]+)?/);
    m.shift();
    m.reduce(function (r, b) {
        if (!r[b]) {
            r[b] = { _: [] };
            r._.push({ name: b, children: r[b]._ });
        }
        return r[b];
    }, this)._.push(a);
}, { _: temp });

result = temp.reduce(function (r, a) {
    var top = [],
        parts = [];

    a.children.forEach(function (b) {
        if (b.children.length === 1) {
            top.push(b.children[0]);
        } else {
            parts.push(b.children);
        }
    });
    return top.length ? r.concat([top], parts) : r.concat(parts);
}, []);

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 9

Answer №5

This code snippet is designed specifically to meet your requirements:

var url_list = ["https://www.example.com/page1",
"https://www.example.com/page2",
"https://www.example.com/page3",
"https://www.example.com/page4",
"http://www.test.com/sample1",
"http://www.test.com/sample2",
"http://www.test.com/sample3",
"http://www.test.com/sample4"];

var folderGroups = {};
for (var i = 0; i < url_list.length; i++) {

  var myRegexp = /.*\/\/[^\/]+\/[^\/\?]+/g;
  var match = myRegexp.exec(url_list[i]);
  var keyForUrl = match[0];
  if (folderGroups[keyForUrl] == null) {
    folderGroups[keyForUrl] = [];
  }
  folderGroups[keyForUrl].push(url_list[i]);
}

var toRemove = [];
Object.keys(folderGroups).forEach(function(key,index) {
    if (folderGroups[key].length == 1) {
      toRemove.push(key);
    }
});
for (var i = 0; i < toRemove.length; i++) {
  delete folderGroups[toRemove[i]];
}

//console.log(folderGroups);

var domainGroups = {};
for (var i = 0; i < url_list.length; i++) {
 //Check if collected previously
  var myRegexpPrev = /.*\/\/[^\/]+\/[^\/\?]+/g;
  var matchPrev = myRegexpPrev.exec(url_list[i]);
  var checkIfPrevSelected = matchPrev[0];
  debugger;
  if (folderGroups[checkIfPrevSelected] != null) {
    continue;
  }
  //Get for domain group
  var myRegexp = /.*\/\/[^\/]+/g;
  var match = myRegexp.exec(url_list[i]);
  var keyForUrl = match[0];
  if (domainGroups[keyForUrl] == null) {
    domainGroups[keyForUrl] = [];
  }
  domainGroups[keyForUrl].push(url_list[i]);
}

//console.log(domainGroups);

var finalResult = {};
$.extend(finalResult, folderGroups, domainGroups);
console.log(Object.values(finalResult));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 10

This code snippet is designed specifically to meet your requirements:

var url_list = ["https://www.example.com/page1",
"https://www.example.com/page2",
"https://www.example.com/page3",
"https://www.example.com/page4",
"http://www.test.com/sample1",
"http://www.test.com/sample2",
"http://www.test.com/sample3",
"http://www.test.com/sample4"];

var folderGroups = {};
for (var i = 0; i < url_list.length; i++) {

  var myRegexp = /.*\/\/[^\/]+\/[^\/\?]+/g;
  var match = myRegexp.exec(url_list[i]);
  var keyForUrl = match[0];
  if (folderGroups[keyForUrl] == null) {
    folderGroups[keyForUrl] = [];
  }
  folderGroups[keyForUrl].push(url_list[i]);
}

var toRemove = [];
Object.keys(folderGroups).forEach(function(key,index) {
    if (folderGroups[key].length == 1) {
      toRemove.push(key);
    }
});
for (var i = 0; i < toRemove.length; i++) {
  delete folderGroups[toRemove[i]];
}

//console.log(folderGroups);

var domainGroups = {};
for (var i = 0; i < url_list.length; i++) {
 //Check if collected previously
  var myRegexpPrev = /.*\/\/[^\/]+\/[^\/\?]+/g;
  var matchPrev = myRegexpPrev.exec(url_list[i]);
  var checkIfPrevSelected = matchPrev[0];
  debugger;
  if (folderGroups[checkIfPrevSelected] != null) {
    continue;
  }
  //Get for domain group
  var myRegexp = /.*\/\/[^\/]+/g;
  var match = myRegexp.exec(url_list[i]);
  var keyForUrl = match[0];
  if (domainGroups[keyForUrl] == null) {
    domainGroups[keyForUrl] = [];
  }
  domainGroups[keyForUrl].push(url_list[i]);
}

//console.log(domainGroups);

var finalResult = {};
$.extend(finalResult, folderGroups, domainGroups);
console.log(Object.values(finalResult));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

JavaScript organizes URLs based on their domain and directory

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Load components in NextJS lazily without utilizing `next/dynamic`

I am unable to retrieve dynamic data from the database

Utilizing Ajax for Efficiently Updating a Singular Field within a Designated Object

Evaluate each element of the array against the corresponding key in a hash, adding the corresponding value to a

Nodejs Websocket integration with the Firefox browser

Finding a JSON file within a subdirectory

Switching from map view to satellite view on Google Maps allows you to see detailed aerial

Error in Next.js when the value of the target does not change in React-Select's

Obtain the sender using an href JavaScript code

"Troubleshooting: Ajax File Uploader Plugin Not Functioning Properly

Building an anchor tag that employs the HTTP DELETE method within an Express.js app

Using JSON parsing to dynamically create classes with preloaded background images

Code for a regular expression that permits either letters or numbers with symbols

Unable to load page redirection

Click event to reset the variable

What is the process for deducting the ordered quantity from the available quantity once an order is confirmed

Is there a substitute for AngularJS $watch in Aurelia?

I am experiencing an issue where the Mongo item ID is not being successfully passed through the REST API

Customize the appearance of the "Collapse" component in the antd react library by overriding the default styles

Creating Canvas dimensions to match the dimensions of a rectangle specified by the user