如何在Array.map()渲染的链接中仅显示host和pathname？

你当前遍历缓存生成HTML列表的逻辑中，链接文本直接输出了完整URL，只需要用原生URL对象解析缓存请求的url字段，提取需要的host和pathname拼接作为展示文本即可，不需要手写正则拆分字符串，所有支持Service Worker的浏览器都原生兼容该API。

修改后核心的map遍历逻辑替换为以下代码即可：

keys.map(function(key) {
    const urlIns = new URL(key.url);
    // 拼接host和pathname作为展示文本
    const linkText = urlIns.host + urlIns.pathname;
    return '<li>&rsaquo; <a href="' + key.url + '">' + linkText + '</a></li>';
}).join('')

完整可运行代码如下：

<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 urlIns = new URL(key.url);
                const linkText = urlIns.host + urlIns.pathname;
                return '<li>&rsaquo; <a href="' + key.url + '">' + linkText + '</a></li>';
            }).join('') +
            "</ul>";
        });
    });
}
</script>

可选自定义配置 #

• 若不需要展示域名，仅展示路径部分，直接将linkText赋值为urlIns.pathname即可
• 若需要隐藏路径末尾默认的index.html、index.htm等首页文件名，可对urlIns.pathname做字符串替换后再拼接
• 若需要对根路径/做特殊展示（比如显示为「首页」），加个判断分支单独处理即可

内容的提问来源于stack exchange，提问作者rocco