如何将文本中检测到的 url 转换为 React 中的 link？

Question

我正在制作一个 SNS 网站并尝试将文本中检测到的 url 转换为显示为 links。

import React from "react";
import "./PostCard.css";
import { useNavigate } from "react-router-dom";
import datePretty from "../../helperFunctions/datePretty";

function PostCard({ userName, postTime, likeCount, commentCount, postText }) {

  var pastTime = datePretty(postTime)

  return (
    <div className="postingCard">
      <div className="postingHeader">
        <div className="postingProfile">
          <img className="postPP" src="profile.png" alt="Sample profile"></img>
        </div>
        <div className="postingWriter">
          <h3>{userName}</h3>
        </div>
        <div className="dateWritten">
          <h4>Posted {pastTime} ago</h4>
        </div>
        <div className="postSetting">
          <i className="fa-solid fa-ellipsis fa-2xl" id="postSet"></i>
        </div>
      </div>
      <div className="postingBody">
        <div className="postingSection">
          <div className="postWords">
            <h4>{postText}</h4>
          </div>
        </div>
        <div className="iconSection">
          <div className="likeSection">
            <i className="fa-regular fa-thumbs-up fa-2xl" id="like"></i>
            <div className="likeCount" id="likeNum">
              {likeCount}
            </div>
          </div>
          <div className="commentSection">
            <i className="fa-regular fa-comment-dots fa-2xl"></i>
            <h5 className="commentCount">{commentCount}</h5>
          </div>
        </div>
      </div>
    </div>
  );
}

export default PostCard;

这是我目前正在处理的代码。 postText 是我尝试转换为显示为 link.

的元素

例如，当我像“你好，https://www.youtube.com”这样上传时，https://www.youtube.com 应该可以点击并重定向到 YouTube。

你能告诉我如何解决这个问题吗？

Answer 1

假设在原始字符串中检测 url 的逻辑已经构建，并且您在 postText 中传递的是包含 url 的字符串，您可以包装一个锚标记在你的 h4 周围，只需将 href 属性设置为 {PostText}

<a href={postText}>
  <h4>{postText}</h4>
</a>

如果您打算在新标签页中打开它，请确保将 target 设置为 _blank 并将 rel 设置为 noreferrer

<a href={postText} target="_blank" rel="noreferrer">
  <h4>{postText}</h4>
</a>

Answer 2

这样做的反应方式是创建一个反应组件并将文本作为道具传递，并处理该组件内部的逻辑。

这是我的看法，您应该根据需要更改 link 检测。

   export default function PostText(props) {
  
   const [isLink,setIsLink] = useState(props.text.includes("http"))
   const [textArr,setTextArr] = useState([])

   useEffect(()=> {
     const txt = props.text
     if (txt.includes("http")) {
       setIsLink(true)
        const firstIndex = txt.indexOf("http"); //find link start 
        const linkEnd = txt.indexOf(" ",firstIndex) //find the end of link
        const firstTextSection = txt.slice(0,firstIndex)
        const linkSection = txt.slice(firstIndex,linkEnd)
        const secondSection = txt.slice(linkEnd)
        setTextArr([firstTextSection,linkSection,secondSection])
     } else {
       setIsLink(false)
     }
   },[])
  return isLink ? (
    <div >
      <p>{textArr[0]}</p>
      <a href={textArr[1]} target="_blank" rel="noreferrer">Link</a>
      <p>{textArr[2]}</p>
    </div>
  ) : (
  <div>
    <p>{props.text}</p>
  </div>)
}

如何将文本中检测到的 url 转换为 React 中的 link？

How to convert detected url in text to link in React?

javascript

web

reactjs