使文本网址在 div 中可点击
Posted
技术标签:
【中文标题】使文本网址在 div 中可点击【英文标题】:Making text urls clickable in a div 【发布时间】:2018-09-28 15:50:54 【问题描述】:我正在尝试在我的反应应用程序中使 url 可点击。我目前的做法如下。
render()
function urlify(text)
var urlRegex = /(https?:\/\/[^\s]+)/g;
return text.replace(urlRegex, function(url)
return '<a href="' + url + '">' + '</a>';
)
const headingAvailable = (
<span className="home_post_text">urlify(postData.heading)</span>
);
return (
<div className="home_post_sections sec2 unchange_div">headingAvailable</div>
);
但我无法让它正常工作。
例如:
如果我的文字是这样的
this is a good song https://www.youtube.com/watch?v=i9wBXC3aZ_I&index=8&list=RDxuAH21DkJow
我的文字被转换成这样的东西
this is a good song <a href="https://www.youtube.com/watch?v=i9wBXC3aZ_I&index=8&list=RDxuAH21DkJow"></a>
我该如何解决这个问题?
【问题讨论】:
根据您的示例,您可能想要返回以下内容?返回 '' + url + ''; 【参考方案1】:React 默认对字符串中的 html 标签进行转义,以防止 XSS 安全漏洞。
你需要返回一个a
组件,类似这样:
render()
function urlify(text)
const urlRegex = /(https?:\/\/[^\s]+)/g;
return text.split(urlRegex)
.map(part =>
if(part.match(urlRegex))
return <a href=part>part</a>;
return part;
);
const headingAvailable = (
<span className="home_post_text">urlify(postData.heading)</span>
);
return (
<div className="home_post_sections sec2 unchange_div">headingAvailable</div>
);
class Hello extends React.Component
constructor(props)
super(props);
this.text = 'this is a good song https://www.youtube.com/watch?v=i9wBXC3aZ_I&index=8&list=RDxuAH21DkJow';
urlify(text)
const urlRegex = /(https?:\/\/[^\s]+)/g;
return text.split(urlRegex)
.map(part =>
if (part.match(urlRegex))
return <a href=part key=part> part </a>;
return part;
);
render()
return <div> this.urlify(this.text) </div>;
ReactDOM.render( <
Hello name = "World" / > ,
document.getElementById('container')
);
<script src="https://unpkg.com/react@16.3.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.3.2/umd/react-dom.development.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
【讨论】:
【参考方案2】:您需要从原始文本中提取您的link text
并将其添加到您的<a>
标记之间。
function urlify(text)
var urlRegex = /(https?:\/\/[^\s]+)/g;
return text.replace(urlRegex, function(url)
var linkText = text.replace(url, '')
return '<a href="' + url + '">' + linkText + '</a>';
)
【讨论】:
【参考方案3】:将 urlify 函数的返回改为 this
return text
.replace(urlRegex, function(url)
return '<a href="' + url + '">' + url +'</a>';
)
【讨论】:
以上是关于使文本网址在 div 中可点击的主要内容,如果未能解决你的问题,请参考以下文章