试图弄清楚如何使用 createTextNode 创建链接

Question

首先我想说，最初创建这部分代码的人已不在团队中。

我们正在创建一个开发工具来为我们的游戏管理和开发服务器，它有自己的编程语言。

我正在使用 JavaFX 和 WebView 来生成开发工具的聊天区域，以便与其他开发人员和员工进行交流。但是我想要它，所以当你发布一个链接时，它实际上显示为链接而不是纯文本。我尝试过诸如 AutoLinker 之类的东西，但没有成功。这是 webview 的 HTML 部分。

<script src=".././scripts/Autolinker.js"></script>
<script type="text/javascript">
  app = null;
  const messages = document.getElementById("messages");

  function addMessage(message, options) {
    const p = document.createElement("p");
    const c = message.indexOf(":");
    const modifiedMessage = message; //replaceURLWithHTMLLinks(message);
    const ridBrackets = options.replace(/[\[\]']/g, "");
    const tokenize = ridBrackets.split(",", 2);
    const rcChatOptions = tokenize;
    const mFontColor = tokenize[rcChatOptions.BFONTCOLOR];
    let timeStampFormat = tokenize[rcChatOptions.TIMESTAMP];
    if(c > -1) {
      const u = document.createElement("span");
      const a = document.createElement("a");
      u.className = "user";
      if(mFontColor != null) {
        u.style.color = mFontColor;
      } else {
        u.style.color = "#00c02b";
      }
      //Turn plain text links into actual links
      u.appendChild(document.createTextNode(Autolinker.link(modifiedMessage.substring(0, c + 1))));
      p.appendChild(u);
      if(document.selectedfont != null) {
        p.style.fontFamily = document.selectedfont;
      }
      p.appendChild(document.createTextNode(modifiedMessage.substring(c + 1)));
    } else {
      p.appendChild(document.createTextNode(modifiedMessage));
    }
    // Append message and scroll to bottom (if at bottom)
    const scrollTop = document.body.scrollTop;
    const scrolledToBottom = scrollTop + window.innerHeight >= document.body.scrollHeight;
    if(scrolledToBottom) {
      messages.appendChild(p);
      window.scrollTo(document.body.scrollLeft, document.body.scrollHeight - window.innerHeight);
    } else {
      messages.appendChild(p);
    }
    messages.style.backgroundColor = "transparent";
  }
  
</script>

我删除了我认为只是分散注意力的部分代码。

这是工具的样子

https://share.getcloudapp.com/kpuNDB4m

这就是使用 AutoLinker 的样子

https://share.getcloudapp.com/8LunomDL

（所以自动链接器正在完成它的工作，它仍然没有呈现为超链接）

Answer 1

在找到正确的方向后（弗兰克，谢谢），我找到了一个 javascript 库，可以帮助我完成我正在寻找的东西。

图书馆

https://github.com/cferdinandi/saferInnerHTML

这是一个例子！

https://share.getcloudapp.com/nOuDPnlp

用法：

saferInnerHTML(message, modifiedMessage, true);

最后一个参数是一个选项，追加或覆盖。

显然，我将不得不做一些 CSS 工作以使它们不显示为按钮。但这正是我想要实现的目标。

Answer 2

看起来 TextNode 是在收集了一些作为链接的子字符串后创建的。以下是直接在 js 中创建链接然后传递给 TextNode 的示例。
您可以做的一件事是将文本放在段落内的 a 标记内，然后像这样转换：

var link = document.createElement('link');
link.innerHTML = 'Website: <a href="http://somelink.com" </a>
link.href = 'http://somelink.com';
link.appendChild(document.createTextNode('http://somelink.com'));