[React] dangerouslySetInnerHTML 이용해서 string 타입의 글을 html로 변환해서 뿌려주기

카테고리 없음

by Jjiveloper 2022. 1. 17. 14:32

728x90

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

다음처럼 DB에 저장된 글이 있다고 해보자. 안녕하세요. 저희 사이트는 https://www.naver.co.kr 입니다 감사합니다. 이것을 react에서 다음과 같은 컴포넌트로 만들었었다. function viewSplitLine(content) { re..

lemontia.tistory.com

// string을 html로 변환해서 뿌려주는 함수
// 전역에서 사용하기 위해 export해놨는데 필요없으면 지우면 됨
export function makeInnerHtml(content) {
  const htmlCode = content.split("\n").reduce((code, text) => {
    text.indexOf("http") ? (code += MakeATag(text)) : (code += text);
    return code;
  }, ``);

  return { __html: htmlCode };
}

// text내부에 http 링크가 있다면 a태그로 변경해주는 코드
export function MakeATag(content) {
  const urlRegex = /(https?:\/\/[^\s]+)/g;
  return content.replace(urlRegex, function (url) {
    return '<a href="' + url + '" target="_blank" style="border-bottom: 1px solid blue;
  color: blue;">클릭하면 이동합니다.</a>';
  });
}

import {makeInnerHtml} "<<오른쪽 함수를 선언해놓은 파일 경로 적기";

// 예시 컴포넌트
function Example(){
	const [data, setData] = useState();	// << DB든 어디서든 가져온 뿌려줄 data
    
  	return <div dangerouslySetInnerHTML={makeInnerHtml(data)}></div> ;
}

export default Example;

728x90