前端解析文本中URL并处理为超链接

最新推荐文章于 2023-11-16 09:20:28 发布

visionke

最新推荐文章于 2023-11-16 09:20:28 发布

阅读量412

点赞数

分类专栏： js 文章标签： javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/visionke/article/details/129048113

版权

js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

将文本中的url正则判断出来，并改为超链接形式

  const renderFormatUrl = (content: string) =>{
    if (!content) {
      return null;
    }
    let urlPattern = /(https?:\/\/|www\.)[a-zA-Z_0-9\-@]+(\.\w[a-zA-Z_0-9\-:]+)+(\/[\(\)~#&\-=?\+\%/\.\w]+)?/g; // eslint-disable-line no-useless-escape
    let preContent = content.replace(urlPattern, function(match: string) {
      let href = match;
      if (match.indexOf("http") === -1) {
        href = "http://" + match;
      }
      return '<a target="_blank" href="' + href + '">' + match + "</a>";
    });
  
    return (
      <div
        style={{
          display: "inline-block",
        }}
        dangerouslySetInnerHTML={{
          __html: preContent
          .toString()
          .split("\n")
          .join("<br/>")
        }}
      />
    );
  }