如何仅显示来自 Array.map() 的链接的主机和路径名？

Question

我正在使用 Array.map() 列出缓存中的文件：

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

所以我得到了所有 html 页面的列表 - 因为缓存仅用于 html 文件 - 带有完整的 URL，例如“https://www.example.com/about/”等。

我想更改<a href="' + key.url + '">' + key.url + '</a>以便在链接文本中仅显示主机（example.com）和路径名 (/about/)

但我不知道如何在这个脚本中实现它。

Answer 1

您可以使用提取主机名和路径名

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

const { host, pathname } = urlLink;

因此，您的示例代码中的代码将是

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