javascript - 如何检查字符串是否是有效的 Figma 链接？

Question

我正在使用 Figma API 在 NodeJS 上构建一个应用程序，我需要检查用户传递的字符串是否是有效的 Figma 链接。我目前正在使用这个简单的正则表达式来检查字符串:

/^https\:\/\/www.figma.com\/.*/i

但是，它匹配来自 figma.com 的所有链接，即使是主页，也不仅仅是文件和原型(prototype)的链接。这是一个应该匹配的示例 Figma 链接:

https://www.figma.com/file/OoYmkiTlusAzIjYwAgSbv8wy/Test-File?node-id=0%3A1

如果这是一个原型(prototype)链接，匹配也应该是肯定的，proto而不是 file在路径中。

此外，由于我使用的是 Figma API，因此同时提取 URL 的必要部分(例如文件 ID 和节点 ID)会很有用。

Answer 1

TL;博士

✅ 使用此表达式来捕获四个最重要的组(类型、文件 ID、文件名和 URL 属性)并从那里开始工作。

/^(?:https:\/\/)?(?:www\.)?figma\.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/?([^\?]+)?(.*))?$/

从文档

这是 Figma 在其 developer documentation page about embeds 上提供的正则表达式代码:

/https://([w.-]+.)?figma.com/(file|proto)/([0-9a-zA-Z]{22,128})(?:/.*)?$/

🛑 但是，它在 JS 中不起作用 文档当前错误这个表达式有多个问题:

斜杠和点不会用反斜杠转义。

它从字符串的开头不匹配。我添加了 start of string anchor ^在 VLAZ 在评论中指出之后。这样我们将避免匹配不以 https 开头的字符串。 ，例如 malicious.site/?link=https://figma.com/...

它不仅匹配 www.子域，但任何其他数量不是很大的 W (例如 wwwww. ) - 它可以通过用更简单的表达式替换字母匹配来修复。这也是一个无用的捕获组，我将其设为非捕获。

如果链接匹配，即使它不以 https:// 开头，也很好。由于某些引擎(例如 Twitter)为简洁起见删除了这部分，如果有人从那里复制链接，它应该仍然有效。

应用所有改进后，我们得到以下表达式:

/^(?:https:\/\/)?(?:www\.)?figma\.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/

还有一个专用的NPM package它只是根据类似的模式检查 URL。但是，它包含上面列出的一些缺陷，因此我不建议使用它，尤其是对于仅一行代码。

提取部分 URL

此表达式与 Figma API 一起使用非常有用，因为它甚至可以从 URL 中提取必要的部分，例如链接类型(原型(prototype)/文件)和 file key .您可以通过索引访问它们。

您也可以添加 piece of regex匹配查询中的特定键，例如 node-id :

/^(?:https:\/\/)?(?:www\.)?figma\.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?node-id=([^&]*)$/

现在您可以在代码中使用它并分别获取 URL 的所有部分:

var pattern = /^(?:https:\/\/)?(?:www\.)?figma\.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?node-id=([^&]*)$/

var matched = 'https://www.figma.com/file/OoYmkiTlusAzIjYwAgSbv8wy/Test-File?node-id=0%3A1'.match(pattern)

console.log('url:', matched[0]) // whole matched string
console.log('type:', matched[1]) // group 1
console.log('file key:', matched[2]) // group 2
console.log('node id:', matched[3]) // group 3

深层发掘

我花了一些时间几乎从头开始重新创建这个表达式，这样它就可以匹配尽可能多的 Figma 文件/原型(prototype) URL，而不会破坏任何东西。以下是适用于不同情况的三个类似版本。

✅ 此版本分别捕获 URL 参数和文件名，以便于处理。您可以check it here .我在答案的开头添加了它，因为我认为它是最干净和最有用的解决方案。

/^(?:https:\/\/)?(?:www\.)?figma\.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/?([^\?]+)?(.*))?$/

其中的组如下:

第 1 组:文件/原型(prototype)

第 2 组:文件 key /ID

第 3 组:文件名(可选)

第 4 组:url 参数(可选)

✅ 接下来，我想做同样的事情，但将 /duplicate 分开可以添加到任何 Figma URL 末尾的部分，以在打开文件时创建文件的副本。

/^(?:https:\/\/)?(?:www\.)?figma\.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/?([^\?]+)?([^\/]*)(\/duplicate)?)?$/

✅ 回到 node-id范围。以下正则表达式查找并捕获 中的多个 URL。多行字符串 成功地。我最后发现的唯一缺点是它(以及所有以前的)不检查此 URL 是否包含未编码的 special characters这意味着它可能会破坏某些东西，但可以通过使用 encodeURI() 手动编码所有参数来避免它function .

/^(?:https:\/\/)?(?:www\.)?figma\.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/([^\?\n\r\/]+)?((?:\?[^\/]*?node-id=([^&\n\r\/]+))?[^\/]*?)(\/duplicate)?)?$/gm

此表达式可以捕获六组:

第 1 组:文件/原型(prototype)

第 2 组:文件 key /ID

第 3 组:文件名(可选)

第 4 组:url 参数(可选)

第 5 组:节点 ID(可选；仅在第 4 组存在时才存在)

第 6 组:/重复

最后，这是匹配及其组(或 try it yourself )的示例: