Javascript 使文本URL在div中可单击

我正在尝试使url在我的react应用程序中可单击。我目前的做法如下

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>
  );
}

render（）{
函数urlify（文本）{
var urlRegex=/（https？：\/\/[^\s]+）/g；
返回text.replace（urlRegex，函数（url）{
返回“”；
})
}
常数头可用=(
{urlify（postData.heading）}
);
返回(
{headingAvailable}
);
}

但我不能让它正常工作

例如：

如果我的文本是这样的

这是一首好歌https://www.youtube.com/watch?v=i9wBXC3aZ_I&index=8&list=RDxuAH21DkJow

我的文本被转换成如下内容

这是一首好歌

---

如何修复此问题？

将urlify函数的返回更改为

return text
          .replace(urlRegex, function(url) {
             return '<a href="' + url + '">' + url +'</a>';
           })

返回文本
.replace（urlRegex，函数（url）{
返回“”；
})

您需要从原始文本中提取

链接文本

，并将其添加到

之间；
})
}

React默认情况下以字符串形式转义html标记，以防止XSS出现安全漏洞

您需要返回一个

组件，如下所示：

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>
  );
}

render（）{
函数urlify（文本）{
const urlRegex=/（https？：\/\/[^\s]+）/g；
返回text.split（urlRegex）
.map（部分=>{
如果（部分匹配（urlRegex））{
返回；
}
返回部分；
});
}
常数头可用=(
{urlify（postData.heading）}
);
返回(
{headingAvailable}
);
}


类Hello扩展了React.Component{
建造师（道具）{
超级（道具）；
this.text='这是一首好歌https://www.youtube.com/watch?v=i9wBXC3aZ_I&index=8&list=RDxuAH21DkJow';
}
urlify（文本）{
const urlRegex=/（https？：\/\/[^\s]+）/g；
返回text.split（urlRegex）
.map（部分=>{
如果（部分匹配（urlRegex））{
返回；
}
返回部分；
});
}
render（）{
返回{this.urlify（this.text）}；
}
}
ReactDOM.render（<
您好name=“World”/>，
document.getElementById（'容器'）
);

根据您的示例，您可能希望返回以下内容？返回“”；这就是我想要的。非常感谢。
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>
  );
}