如何将检测到的 URL 呈现为超链接而不是纯文本答案

【问题标题】：How to i render my detected URL to a hyperlink instead of plain text如何将检测到的 URL 呈现为超链接而不是纯文本
【发布时间】：2021-11-30 13:53:23
【问题描述】：

我正在开发一个聊天应用程序，用户可以在其中互相发送消息。我已经使用 anchorme 库来检测文本中的链接/URL/电子邮件，并将它们转换为它所执行的可点击 HTML。但是检测到的 URL 是不可点击的，它只是被转换为普通的
文本。有没有办法把它转换成超链接？

 <!DOCTYPE html>
 <html>
 <head>
     <link rel="stylesheet" href="css/styles.min.css">
 </head>
     <body>
     <div class="chat">
         <div id="sidebar" class="chat__sidebar">
 
         </div>
         <div class="chat__main">
             <div id="messages" class="chat__messages"></div>
 
             <div class="compose">
                 <form id="message-form">
                     <input name="msg" placeholder="Message" required autocomplete="off">
                     <button>Send message</button>
                 </form>
                 <button id="send-location">Send location</button>
             </div>
         </div>
     </div>
     <script id="message-template" type="text/html">
         <div class="message">
             <p>
                 <span class="message__name">{{username}}</span>
                 <span class="message__meta">{{createdAt}}</span>
             </p>
             <p>{{message}}</p>
         </div>
     </script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.6.0/qs.min.js"></script>
     <script src="/socket.io/socket.io.js"></script>
     <script src="/js/chat.js"></script>
     <script src="https://raw.githack.com/alexcorvi/anchorme.js/gh-pages/dist/browser/anchorme.min.js"></script>
 </body>
 </html>

Javascript 客户端：

 const socket = io()
     
     //Elements
     const msg = document.querySelector('#message-form')
     const messageFormInput = msg.querySelector('input')
     const messageFormButton = msg.querySelector('button')
     
     //Templates
     const messages = document.querySelector("#messages")
     const messageTemplate = document.querySelector('#message-template').innerHTML
     
     
     
     //ref to index.js 
     socket.on('message', (message) => {
         const html = Mustache.render(messageTemplate, {
             //will come from the value
             username: message.username,
             message: message.text,
             createdAt: moment(message.createdAt).format('HH:mm')
         })
         messages.insertAdjacentHTML('beforeend', html)
         scrollAuto()
     })
     
     //Refers to html form input
     msg.addEventListener('submit', (e) => {
         //Prevents browser to update
         e.preventDefault()
     
         messageFormButton.setAttribute('disabled', 'disabled')
     
         const message = e.target.elements.msg.value
         socket.emit('sendMsg', message, (error) => {
             messageFormButton.removeAttribute('disabled')
             messageFormInput.value = ''
             messageFormInput.focus()
             //Enable after event acknowledged
     
             if (error) {
                 return console.log(error)
             }
         })
     })
     
     socket.emit('join', {
         username,
         room
     }, (error) => {
         if (error) {
             alert(error)
             location.href = '/'
         }
 
     })

Javascript 服务器：

     const path = require('path')
     const http = require('http')
     const express = require('express')
     const socketio = require('socket.io')
     
     //Destructuring
     const {
         generateMessage,
     } = require('./utils/messages')
     
     // Convert Urls
     const anchorme = require("anchorme").default;
     // Check for profanity
     const Filter = require('bad-words')
     //Initiate socket-io
     const io = socketio(server)
     
     // Define path for Express config 
     const publicDirectoryPath = path.join(__dirname, '../public')
     app.use(express.static(publicDirectoryPath))
     
     //Server-side
     io.on('connection', (socket) => {
         console.log(' WebSocket Connection')
     
         // Listening for socket i.e messages
         socket.on('sendMsg', (message, callback) => {
             const user = getUser(socket.id)
     
             var result = anchorme(message, {
                 attributes: [{
                     name: "target",
                     value: "_blank"
                 }, ]
             });
             console.log(result)
     
             var filter = new Filter()
             if (filter.isProfane(message)) {
                 return callback('Profanity is not allowed')
             }
             io.to(user.room).emit('message', generateMessage(user.username, result))
             callback()
         })
     })

const generateMessage = (username, text) => {
     return {
         username,
         text,
         createdAt: new Date().getTime()
     } }

【问题讨论】：

您是否尝试将 type="text/html" 添加到包含该消息的
中？
我试过还是一样的结果

标签： javascript html jquery socket.io mustache

【解决方案1】：

看起来您正在使用 React 来呈现消息组件。默认情况下，React 将所有 HTML 视为文本。他们有一个名为dangerouslySetInnerHTML 的方法，它的名字恰如其分。出于安全原因，允许用户发送 HTML 或任何其他代码不是一个好主意。不过，如果您正在生成 HTML，那么使用此方法应该是安全的。

【讨论】：

谢谢！有没有其他方法可以解决这个问题，或者在这种情况下，SetInnerHTML 方法是唯一的方法。