Javascript：有选择地从 URL 中删除散列（或散列），以使 URL 保持有效或可用

Posted 2023-04-14

【中文标题】Javascript：有选择地从 URL 中删除散列（或散列），以使 URL 保持有效或可用

【英文标题】：Javascript: Selectively remove hash (or hashes) from URLs, so that the URL remains valid or usable

【发布时间】：2018-02-03 19:16:09

【问题描述】：

假设我们有以下网址：

1. http://example.com#hash0
2. http://example.com#hash0#hash1
3. http://example.com#hash0/sample.net/
4. http://example.com#hash0/sample.net/#hash1
5. http://example.com#hash0/image.jpg
6. http://example.com#hash0/image.jpg#hash1
7. something.php#?type=abc&id=123
8. something.php#?type=abc&id=123#hash0
9. something.php/?type=abc&id=#123
....................................

还有更多这样的排列，你明白了。我怎样才能有选择地从此类 URL 中删除“不相关”的哈希而不影响这些 URL 的功能（使它们保持完整的链接或图像）？

例如，我想从这个列表中的第 1 号中删除 #hash0，从 2 号 #hash0 和 #hash1 中删除，从 3 号我想保留它，因为它后面是路径的延续 (是的，有可能，检查here)，从 4 仅删除 #hash1，从 5 保留它，但从 6 仅删除 #hash1, ... ，从 9 我认为保留它，因为它可能与查询（虽然不确定），等等。基本上，我只想删除它们之后没有任何可用的哈希（如路径、查询、图像文件等）——“不相关”的哈希，如 #top、#bottom 等，指的是当前页面。

我正在做的事情还涉及从相对 URL 获取绝对 URL（借助新锚点的 href 或新 URL 对象的 href），因此可以“融入”的解决方案（如 here） " 与location object's properties （如 .protocol、.host、.pathname、.search、.hash 等）一起使用更可取 - 因为它可能更“值得信赖”，因为它是内置的，但是一个好的（和更短的）正则表达式也是可以接受的。总而言之，更短的解决方案更可取，因为我不希望我的项目在解析整个当前 URL 时为遇到的每个链接或图像链接做额外的不必要的工作。

【问题讨论】：

你怎么知道哪些哈希是“不相关的”？他们会改变吗？我会先看看String.replace()

@mhodges 后面没有有效路径/查询/图像链接部分的哈希在我的情况下是“不相关的”。例如，来自 3、5 或 7（甚至可能是 9）的哈希值或来自 4、6 或 8 的第一个哈希值是相关的，因为它们后面是“非哈希值”的 URL 部分。

【参考方案1】：

也许这就是你想要的，用正则表达式。

var urls = [
        'http://example.com#hash0',                   // remove
        'http://example.com#hash0#hash1',             // remove
        'http://example.com#hash0/sample.net/',       // keep
        'http://example.com#hash0/sample.net/#hash1', // remove #hash1
        'http://example.com#hash0/image.jpg',         // keep
        'http://example.com#hash0/image.jpg#hash1',   // remove #hash1
        'something.php#?type=abc&id=123',             // keep
        'something.php#?type=abc&id=123#hash0',       // remove #hash0
        'something.php/?type=abc&id=#123',            // remove #123
    ],
    result = urls.map(h => h.replace(/(?:#[^#\/\?\.]*)*#[^#\/\?\.]*$/gi, ''));
    
console.log(result);

.as-console-wrapper  max-height: 100% !important; top: 0; 

【讨论】：

是的，这也是我的想法，但它也需要包含潜在的有效查询或图像......

问题是，除非您不指定白名单或黑名单，否则任何解决方案都只是一种尝试。

我知道 - 这就是我在这里问这个问题的原因。如果我确实有一个防弹解决方案，我就不会问了；）但是，我在我的问题中解释了一般的“白名单”是什么样的：有效路径、有效查询、有效图像等。基本上任何不是“简单哈希”的东西。如果我可以将可用的散列本身视为 URL，我可以递归地分析每个散列以查找其他相关部分并排除不包含这些部分的散列（例如 h=location.hash; if ((h .path==="") && (h.search==="") && (!h.endsWith(".jpg"))) h="";) 等等。跨度>

好的，请将您的答案中搜索到的正则表达式替换为(?:#[^#\/\?\.]*)*#[^#\/\?\.]*$/gi，以便我接受。这些标志不是必需的，但我喜欢将它们放在我的正则表达式中以防万一，或用于测试目的。正则表达式的其余部分查找单个/多个，一个接一个，在主 URL 的末尾没有 /、? 或 . 的其他 URL 片段。我知道这允许单个 /、? 或 . 作为哈希，但它似乎最接近只允许看起来像路径、查询或网页/图像的 URL 片段。请参阅link 进行测试。

这里的结果看起来与正则表达式站点不同。