How to show host and pathname only of the links from an Array.map()?

Question

I'm using Array.map() to list 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>&rsaquo; <a href="' + key.url + '">' + key.url + '</a></li>';
                                }).join('') +
                    "</ul>";
                });
            });
        }
    </script>

So I get a list of all html pages - as the cache is for html files only - withe the full URL, e.g. "https://www.example.com/about/" etc.

I'd like to change <a href="' + key.url + '">' + key.url + '</a> in order to show in the text of the link only the host (example.com) and pathname (/about/)

But I do not know how to implement it in this script.

Does this answer your question? [How do I parse a URL into hostname and path in javascript?](https://stackoverflow.com/questions/736513/how-do-i-parse-a-url-into-hostname-and-path-in-javascript) — Justinas, Jun 20 '22 at 13:39

Harvey Kadyanji · Answer 1 · 2022-06-20T14:39:40.187

You can extract the hostname and pathname using

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

const { host, pathname } = urlLink;

So the code from your sample code will be

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

Thanks for the code, but I get `Uncaught (in promise) ReferenceError: parser is not defined at (index):12:52 at Array.map () at (index):8:26 (anonymous) @ (index):12 (anonymous) @ (index):8 Promise.then (async) (anonymous) @ (index):4 Promise.then (async) (anonymous) @ (index):3` — rocco, Jun 20 '22 at 13:49
So, I tried to change `parser` with `urlLink`: no errors but I get the pathname only, no host, and links don't work — rocco, Jun 20 '22 at 14:11

How to show host and pathname only of the links from an Array.map()?

1 Answers1