使文本网址在 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&amp;index=8&amp;list=RDxuAH21DkJow

我的文字被转换成这样的东西

this is a good song &lt;a href="https://www.youtube.com/watch?v=i9wBXC3aZ_I&amp;index=8&amp;list=RDxuAH21DkJow"&gt;&lt;/a&gt;

我该如何解决这个问题?

【问题讨论】:

根据您的示例,您可能想要返回以下内容?返回 '​​' + 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 并将其添加到您的&lt;a&gt; 标记之间。

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 中可点击的主要内容,如果未能解决你的问题,请参考以下文章

Linkify 点击文本并转到网址

Ajax入门与应用

PYTHON + SELENIUM(CHROME):如何从当前网址中提取特定文本并使用提取的文本转到另一个文本?

vb 中WebBrowser1打开网址点击

网易短网址怎么生成?

html代码如何设置一个文本框和按钮,使点击按钮后跳转至新"固定值+输入文本“的网页