Javascript 尝试了解如何使用createTextNode创建链接

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

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

我正在使用JavaFX和WebView来生成开发工具的聊天区域，以便与其他开发人员和工作人员进行通信。然而，我想要它，所以当你发布一个链接时，它实际上显示为一个链接，而不是纯文本。我尝试过自动链接器之类的东西，但没有成功。这是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>

app=null；
const messages=document.getElementById（“消息”）；
函数addMessage（消息、选项）{
const p=document.createElement（“p”）；
const c=message.indexOf（“：”）；
const modifiedMessage=message；//replaceurlwithhtmlinks（message）；
const rid方括号=options.replace（/[\[\]']/g，”）；
const-tokenize=rid方括号.split（“，”，2）；
const rcchatpoptions=标记化；
const mFontColor=tokenize[rcChatOptions.BFONTCOLOR]；
让timeStampFormat=tokenize[rcChatOptions.TIMESTAMP]；
如果（c>-1）{
const u=document.createElement（“span”）；
常量a=document.createElement（“a”）；
u、 className=“用户”；
if（mFontColor！=null）{
u、 style.color=mFontColor；
}否则{
u、 style.color=“#00c02b”；
}
//将纯文本链接转换为实际链接
u、 appendChild（document.createTextNode（Autolinker.link（modifiedMessage.substring（0，c+1）））；
p、 儿童（u）；
如果（document.selectedfont！=null）{
p、 style.fontFamily=document.selectedfont；
}
p、 appendChild（document.createTextNode（modifiedMessage.substring（c+1））；
}否则{
p、 appendChild（document.createTextNode（modifiedMessage））；
}
//追加消息并滚动到底部（如果在底部）
const scrollTop=document.body.scrollTop；
常量scrolledToBottom=scrollTop+window.innerHeight>=document.body.scrollHeight；
如果（滚动到工具栏）{
儿童（p）；
scrollTo（document.body.scrollLeft，document.body.scrollHeight-window.innerHeight）；
}否则{
儿童（p）；
}
messages.style.backgroundColor=“透明”；
}

我删除了我觉得只是分散注意力的部分代码

这就是工具的外观

这就是使用AutoLinker时的样子

---

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

看起来TextNode是在收集了一些子字符串（即链接）后创建的。下面是一个例子，说明了如果直接在js中创建链接，然后将其传递给TextNode，会是什么样子。
您可以做的一件事是将文本放置在段落内的标记内，然后进行如下转换：

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'));

var link=document.createElement（'link'）；
link.innerHTML='Website:在找到正确的方向（由Frank，谢谢）后，我发现了一个javascript库，它帮助我完成了我想要的东西

图书馆


这里有一个例子


用法：

saferInnerHTML(message, modifiedMessage, true);

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

显然，我必须做一些CSS工作，使它们不显示为按钮。但这正是我想要实现的。
DOM TextNodes只接受文本。因此，问题不在于Autolinker，而在于您处理的是纯文本DOM节点。您需要创建
标记，并将url放入锚定标记的
href
属性中。虽然这让我找到了正确的方向，但如何做一些更复杂的事情呢。假设我的文本是“Carlito:random text www.test.com”一些更随机的测试www.test2.com（在一个句子中有多个链接）