What is the best way to display only the host and pathname of the links generated by Array.map()?

Question

What is the best way to display only the host and pathname of the links generated by Array.map()?

I am currently utilizing Array.map() to display a list of files in cache:

<div data-offline></div>
    <script>
    var version = 'v1:'; 
        if (navigator && navigator.serviceWorker) {
            caches.open(version + "pages").then(function (cache) {
                cache.keys().then(function (keys) {
                    var offline = document.querySelector('[data-offline]');
                    offline.innerHTML =
                    "<ul class=\"li-list\">" +
                    keys.map(function(key) {
                                    return '<li>› <a href="' + key.url + '">' + key.url + '</a></li>';
                                }).join('') +
                    "</ul>";
                });
            });
        }
    </script>

Thus, I have an overview of all html pages - given that the cache is specifically for html files - with their respective full URLs, such as "https://www.example.com/about/" etc.

My aim is to modify

<a href="' + key.url + '">' + key.url + '</a>

so that only the host (example.com) and pathname (/about/) are displayed within the text of the link

Unfortunately, I am unsure of how to carry out this implementation within this script.

javascript

Answer 1

Answer №1

To retrieve the hostname and pathname, you can apply the following method

const urlLink = document.createElement('a');
urlLink.href = key.url;

const { host, pathname } = urlLink;

This will transform your initial code snippet into

<div data-offline></div>
    <script>
    var version = 'v1:'; 
        if (navigator && navigator.serviceWorker) {
            caches.open(version + "pages").then(function (cache) {
                cache.keys().then(function (keys) {
                    var offline = document.querySelector('[data-offline]');
                    offline.innerHTML =
                    "<ul class=\"li-list\">" +
                    keys.map(function(key) {
                      const urlLink = document.createElement('a');
                       urlLink.href = key.url;
    
                       const { host, pathname }  = urlLink;
                                    return '<li>&rsaquo; <a href="' + host + '">' + pathname + '</a></li>';
                                }).join('') +
                    "</ul>";
                });
            });
        }
    </script>

Answer 2

To retrieve the hostname and pathname, you can apply the following method

const urlLink = document.createElement('a');
urlLink.href = key.url;

const { host, pathname } = urlLink;

This will transform your initial code snippet into

<div data-offline></div>
    <script>
    var version = 'v1:'; 
        if (navigator && navigator.serviceWorker) {
            caches.open(version + "pages").then(function (cache) {
                cache.keys().then(function (keys) {
                    var offline = document.querySelector('[data-offline]');
                    offline.innerHTML =
                    "<ul class=\"li-list\">" +
                    keys.map(function(key) {
                      const urlLink = document.createElement('a');
                       urlLink.href = key.url;
    
                       const { host, pathname }  = urlLink;
                                    return '<li>&rsaquo; <a href="' + host + '">' + pathname + '</a></li>';
                                }).join('') +
                    "</ul>";
                });
            });
        }
    </script>

What is the best way to display only the host and pathname of the links generated by Array.map()?

Answer №1

Similar questions

The RouterView component seems to be malfunctioning within the Vue project

Having trouble getting the Node.JS Express Server to function properly on Enide?

What is the npm command in React to generate a new component?

Updating a MongoDB document using only the data from checked checkboxes

What is the best way to toggle the visibility of a dynamically created HTML element in ASP.NET?

Exploring Deeply Nested Routing in Angular

Is it possible to simultaneously run two Node.js projects on Windows?

Tips for Creating an Upward-Dropping Dropdown Menu in HTML/JavaScript When Space is Limited on the Page

How can you use jQuery to transform a H3 tag into a clickable link?

Preserve the content in the text box corresponding to the selected radio button

Set maximum size for background image in div

Update search results when performing a new search on a web application (without using jQuery)

Is there a way to trigger a "click" on a webpage without physically clicking? So that I can preview the response message before actually clicking

Apologies, but Discord.js is unable to access the property "user" of a null object

Vertical Positioning of Tabs in Materialize CSS

Validating the userid with jQuery before form submission

How to Automatically Display the First Tab in Bootstrap 3

Using AJAX to dynamically load Javascript

Using the v-for directive to create sequential lists

Reposition the element at the bottom of its parent element