美文网首页React
React 提取文本中的超链接,并转化为HTML标签

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

作者: 搬砖笔记 | 来源:发表于2020-04-29 10:08 被阅读0次

通过在开发之前和用户约定怎样输入带有超链接的文本后,下面在界面上约定的是通过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

相关文章

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

    通过在开发之前和用户约定怎样输入带有超链接的文本后,下面在界面上约定的是通过xx{XX|http://www.ba...

  • Swift YYLabel处理Html富文本超链接跳转

    一、返回html数据是: p标签, a标签包含的显示文本 二、非HTML文本包含超链接,点击超链接跳转 三、工具类...

  • 2018-09-17 ----html总结

    html简介 head标签 文本标签 图片和超链接 表格标签

  • 认识html

    认识html 文本标签 列表标签 图片标签 超链接(重点!!!!!!!!!!!!!) 表格标签

  • 6.超链接-HTML基础

    一、何为超链接 1.a标签 在HTML中,使用a标签来实现超链接。 (1)语法格式 文本或图片 ① 说明 href...

  • 初识HTML

    HTML基础 文本标签 列表 图片和超链接 表格 homework.html

  • Day21HTML

    HTML标签 文本标签 列表标签 图片和超链接 数据表格 复杂表格

  • html基础

    html标签 文本标签 列表标签 图片和超链接 数据表格 不规则表格

  • 【Python爬虫】#14 lxml以及xpath练习

    # 一、div标签文本提取 # 将学习视频中xpath.html文件中div标签下文本值 from lxml im...

  • 2018-10-29-day1-html

    一.标签 == 标记 二.文本标签 三.列表标签 四.图片和超链接

网友评论

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

    本文链接:https://www.haomeiwen.com/subject/yxtgwhtx.html