如何在聊天消息中的有效 url 之后允许链接 url 允许 <x x> [重复]答案

【问题标题】：How to allow linkify url to allow <x x> after a valid url in chat message [duplicate]如何在聊天消息中的有效 url 之后允许链接 url 允许 <x x> [重复]
【发布时间】：2021-06-18 20:04:20
【问题描述】：

我在聊天消息中有一个链接 url 文本，O 需要在有效 url 之后甚至允许 <x x>。现在，当我在 url 之后使用任何字符串时，它以

结尾

InvalidCharacterError：无法执行“createElement” “文档”：提供的标记名称（“x

这应该允许

字符串之前和之后例如：您好，这也是测试页https://www.test.com

代码

sendUrlText(e) {
    if (e && e.keyCode && e.keyCode !== 13) return;
    var stateMessage = unescape(this.state.message);

    function linkify(stateMessage){
        return stateMessage.replace(/(https?:\/\/[^\s]+)/g, "<a href='$1' target='_blank'>$1</a>")
    }
    var formattedMessage = linkify(stateMessage); 
}

任何建议我如何在 url 之后允许 /< x x > 并将其转换为例如：

带有链接网址。

【问题讨论】：

请点击编辑，然后点击[<>] sn-p 编辑器并创建一个minimal reproducible example，这样我们就可以看到您如何将<x x> 作为状态消息传递
请发布预期结果的 HTML 而不是图片 - 如果是示例，请发布相关示例
请贴一个相关的例子。我们无法猜测 https://www.test.com/<x x> 必须是 <a href="https://www.test.com/>https://www.test.com/</a>
@mplungjan 我的错。对不起
所以答案是：我们不能从 URL 后没有标点符号或空格的文本中提取 URL。我们可以从This is a link: https://www.test.com/ in a sentence 中提取，但不能从This is a link: -->https://www.test.com/<-- see the link 中提取

标签： javascript reactjs

【解决方案1】：

你的意思是这样的？

function linkify(stateMessage) {
  const string = stateMessage.match(/(https?:\/\/[^ ]*)/);
  if (!string) return ""
  const url = new URL(string[1])  
  return  stateMessage.replace(string[1],`<a href='${url.toString()}' target='_blank'>${url.toString()}</a>`)
}

const link = linkify('Hello, this is a link https://www.test.com/ with a space and valid text') 
console.log(link)
document.getElementById("urlOutput").innerHTML = link;

&lt;span id="urlOutput"&gt;&lt;/span&gt;

【讨论】：

嗨，mplungjan，感谢您抽出宝贵时间，但我只想像 test.com/<x x> 一样显示，没有要链接
我不确定你的意思。看看更新的代码。您需要在 cmets 中将链接发布在 ` 反引号中，以便我了解您的意思
查看更新的答案
您的第一个答案对我有用，但是当我与 Ex: hii this is https://www.test.com 一起使用时它失败了。这带有TypeError: Failed to construct 'URL': Invalid URL 的错误
查看第二个脚本的更新，它将忽略传递的字符串中的路径名