xterm-addon-web-links 是一个由 xterm.js 提供的npm包，它允许您在终端会话中创建可点击的超链接。它非常适合用于在web应用程序中构建交互式终端。在本篇文章中，我们将介绍 npm 包 xterm-addon-web-links 的使用教程，帮助你快速了解和使用它。
安装
在开始之前，您需要先安装 xterm.js 以及 xterm-addon-web-links。您可以使用 npm 将它们安装到您的项目依赖中。
--- ------- ----- ---------------------
用法
要在您的应用程序中使用 xterm-addon-web-links，您需要在
xterm.js 的 实例上使用 loadAddon 函数将其添加到终端中。
例如，下面的代码展示了如何创建一个带有 xterm-addon-web-links 的终端。
------ - -------- - ---- -------- ------ - ------------- - ---- ------------------------ ----- ------- - ----- ---- -- - ---------------- ---------- --------------------- -- ----- ---- - --- ----------- ----------------------------------------------- -- -- --------------------- --- ------------------ ------------------------
在这里，openUrl 函数是一个回调函数，用于打开一个新的浏览器标签并加载超链接 uri。
在这个例子中，我们仅仅创建了一个回调函数，并且通过 loadAddon 添加了 xterm-addon-web-links。你可能会更加想要在你的应用程序中添加更多选项和逻辑，比如对某些特定种类的链接进行不同的处理，或者对不同的要求进行分配。
Deep Dive
自定义链接解析
默认情况下，xterm-addon-web-links 将自动识别 http，https，ftp 和 mailto 链接，并通过在鼠标悬停时添加一个手形光标来强调它们。它还负责解析链接，然后在新浏览器标签打开链接。
如果您需要更好的控制链接解析，并允许使用自定义的协议前缀，那么只需构造包含 包含介绍如何自定义链接解析的URL对象，即可自定义此行为:
----- ----- - --- ------------------- ---- -- -
----- - -------- - - --- ---------
-- --------- --- ------------ -
-- --------------------------
-- ----------------------------
----------------
---------------------
-
---- -
-- --------------------
---------------- ----------
---------------------
-
---给链接添加自定义标签
您还可以使用 WebLinksAddon 提供的 API 来自定义生成的链接的标签。可以使用 decorator 选项来更改点击链接时出现的内容，或者使用 validator 选项来自定义链接何时被检测。
----- ----- - --- --------------
---- ---- -- -
---------------- ----------
--
-
-- --------------------
-- -------------- --------
-- ------------------
---------- ----- --------- -- -
----- ------------ - ---------------------------
-- ---------------------------- -
------ -------------------
-
-- ---------
------ --------------
--
-- --------------
-- --------------------------------------
---------- --- -- -
----- ------------ - ------------------------
-- ---------------------------- -
------ ------
-
------ -----
-
-
--在文本中找到链接
在一些情况下，您的终端不是唯一的，它可能是其他数据输出的一部分，并且一些字符串被并排显示。在这种情况下，我们需要在组合的文本中找到链接，并将其转换为可单击的URL。
WebLinksAddon 提供了一个方法 findLinkAtCursor，该方法将检查临近光标的文本，查找可能存在的链接并返回其位置：
----- ---- - --- -----------
-----------------------------------------------
-- -- --------------------- ---
----- ----- - --- --------------
-- ---------
---- ---- -- -
---------------- ----------
-
--
----------------------
-- ---------------
------------------------------------------
--------------------------------------------------
-------------- -- -
-- ----------
----- ----------- - -------------------------
-------------------------
----------------------- --- -------------------- -- ----------- --- -----------------------------
---这里，我们将 WebLinksAddon 添加到终端中，并在文本输入时调用 addOnDataListener 以收集用户的输入。每当用户在终端中输入字符时，在光标位置上运行 findLinkAtCursor。如果找到了任何URL，则它会返回URL字符串，否则它将返回null。
使用默认的decorator和validator
默认情况下，WebLinksAddon 将使用默认装饰器和默认验证器来生成链接，并且它将使用 window.open(url, '_blank') 将链接处理为新标签页。
您可以在 WebLinksAddon 的构造函数中将这些选项设置为 true，以使用默认装饰器和验证器：
----- ----- - --- --------------
----- ---- -- -
---------------- ----------
--
-
-- --------
---------- -----
-- --------
---------- ----
-
--总结
在本篇文章中，我们学习了如何使用 npm 包 xterm-addon-web-links。通过添加这个包，可以添加可点击的超链接，提供更好的用户体验。我们看到了如何添加这个包，以及如何自定义链接解析，并添加自定义标签。我们还了解到如何搜索可能存在的URL，并在默认设置下查找链接。
如果您想进一步深入地学习关于 xterm.js 以及其他类似的npm包，那么我鼓励您查阅相关手册和文档。这些工具将为您提供优秀的 API，让你能够轻松地操纵终端回话，让用户享受高效的使用体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/xterm-addon-web-links