如何在字符串中应用网址?

时间:2019-06-17 21:06:11

标签: reactjs

我要遍历的对象中有一些数据,并且正在从该对象中提取属性(字符串)以呈现到屏幕。

对象看起来像这样:

 `object: { id: 1, sample: 'To learn all about React, click here https://en.wikipedia.org/wiki/React_(JavaScript_library)' }`

我做了很多研究,并指出了使用Linkify插件的许多答案。我像这样设置Linkify插件:

<Linkify>{sample}</Linkify>

这很好用,但是我想知道是否可以修改字符串,以便不显示实际地址,而是可以将地址分配给单词“这里”。例如:

'To learn all about React, click `here`'. 

Linkify插件有可能吗?还是我需要做些别的事情?

2 个答案:

答案 0 :(得分:1)

您也可以通过react实现。创建一个链接组件,该组件接受2个道具。 {url}和{link}。

hyperLink.js

import React from 'react'

export default ({ text, link }) =>{
   return(
      <a href={link}> {text} </a>
   )
} 

然后将index.js导入到索引中

import Hyperlink from './hyperLink'

<div>
   To learn more about react click <Hyperlink link={#} text="here">
</div>

答案 1 :(得分:1)

您可以尝试解析字符串以从中获取URL。然后使用url作为标记中href属性的值。/ 要获取网址,您可以使用正则表达式。

(https?:\/\/\S+)|([a-z]+\.[a-z]+(?:\/\S+)?)

我尝试使用正则表达式解析您的字符串,并且完全可以正常工作。 我从https://stackoverflow.com/a/39944457/10100750这里获取了此正则表达式。您可以查看该链接以进一步了解此正则表达式。