React 提取文本中的超链接，并转化为HTML标签

通过在开发之前和用户约定怎样输入带有超链接的文本后，下面在界面上约定的是通过xx{XX|http://www.baidu.com/}xx的形式来输入链接，方便前端截取字符串并展示。

ReplaceUrl = () => {

    const { getFieldValue } = this.props.form;

    let text = getFieldValue('rminderContent') || '';

    let re = /(http[s]?:\/\/([\w-]+.)+([:\d+])?(\/[\w-\.\/\?%&=]*)?)/gi;

    let showhtml = text.replace(re, function (a) {

        return (

          '<a href="' + a + '" target=_blank>' + a + '</a>'

        )

      })

    let html = { __html: showhtml };

    return <div dangerouslySetInnerHTML={html}></div> ;

  }

展示效果如下，将文本转化为超链接的形式

image.png