如何仅显示array.map（）链接的主机和路径名？

发布于 2025-02-09 12:15:06 字数 1012 浏览 1 评论 0原文

我正在使用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/“等等

。 + key.url +'＆lt;/a＆gt; 是为了在链接中仅显示主机（example.com）和pathName（/awt awid/），

但我不知道如何在这个脚本。

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

哽咽笑 2025-02-16 12:15:06

提取主机名和路径名

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>› <a href="' + host + '">' + pathname + '</a></li>';
                                }).join('') +
                    "</ul>";
                });
            });
        }
    </script>

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>› <a href="' + host + '">' + pathname + '</a></li>';
                                }).join('') +
                    "</ul>";
                });
            });
        }
    </script>

回复收藏 0 原文

~没有更多了~