text 내 http에 a 태그로 변환, 링크 삽입

프런트엔드 과제를 하던도중
text 내 링크가있을경우 링크를 하이퍼링크로 구현해야하는 부분이있어 검색을 해봤더니 좋은 설명과 블로그 글이있어서 남겨두려합니다

function viewSplitLine(content) {
  const urlRegex = /(https?:\/\/[^\s]+)/g;

  // 링크를 감지하여 a 태그로 감싸기
  const replace = (content) => {
    const convertContent = content.replace(urlRegex, function (url) {
      return '<a href="' + url + '" target="_blank">' + url + '</a>';
    })

    const htmlArr = [];
    convertContent.split('\n').forEach(function (text) {
      const textHtml = "<p>" + text + "</p>";
      htmlArr.push(textHtml)
    })

    return {__html: htmlArr.join("")};
  }

  return (
      <div>
        <div dangerouslySetInnerHTML={replace(content)}></div>
      </div>
  )
}

이코드를 그대로 사용하면 구현가능 하나 직접 공부 하지않으면 무슨의미가 있나 지금시간이 새벽 2시이니까 자고 일어나서 하나하나 뜯어봐야집 ㅎㅎ

참고블로그