1

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

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

但是，它匹配来自 的所有链接figma.com，甚至是主页，而不仅仅是指向文件和原型的链接。这是一个应该匹配的示例 Figma 链接：

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

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

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

4

1 回答 1

1

TL;博士

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

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

从文档

这是 Figma 在其开发人员文档页面上提供的关于 embeds 的正则表达式代码：

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

但是，它在 JS 中不起作用，因为 文档当前是错误的，并且此表达式有多个问题：

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

  • 它从字符串的开头不匹配。在 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 包，它可以简单地根据类似的模式检查 URL。但是，它包含上面列出的一些缺陷，因此我不建议使用它，尤其是对于仅一行代码。

提取部分 URL

这个表达式与 Figma API 一起使用非常有用，因为它甚至可以从 URL 中提取必要的部分，例如链接类型（proto/file）和文件密钥。您可以通过索引访问它们。

您还可以添加一段正则表达式来匹配查询中的特定键，例如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 文件/原型 URL，而不会破坏任何东西。以下是适用于不同情况的三个类似版本。

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

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

其中的组如下：

  • 第 1 组：文件/原型
  • 第 2 组：文件密钥/ID
  • 第 3 组：文件名（可选）
  • 第 4 组：url 参数（可选）

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

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

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

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

此表达式可以捕获六组：

  • 第 1 组：文件/原型
  • 第 2 组：文件密钥/ID
  • 第 3 组：文件名（可选）
  • 第 4 组：url 参数（可选）
    • 第 5 组：节点 ID（可选；仅在第 4 组存在时才存在）
  • 第 6 组：/重复

最后，这是一个匹配及其组的示例（或自己尝试）：

分组示例

于 2019-03-30T06:58:47.683 回答