[React] Html Tag 걸러내는 방법

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^4.9.5"

---

 

 

[Express] Mysql Html Tag 걸러내기

이전에 Express Mysql 을 사용하면서 Html 태그를 걸러내는 작업을 했었는데

프론트 React 에서도 해당 작업이 필요했다.

이유를 찾아보자면

이건 홈에서 보이는 타이틀과 해당 게시글의 내용이다. 보면 h3, p span 등 html 코드가 보인다.

네이버에 들어가서 맨 위에 있던 뉴스기사다. 어떠한 정치색깔도 없다 ^^

해당 개시글의 내용에는 굵기, 밑줄 Link 등등 .. 이런 효과가 들어가려면 태그가 있어야한다.

내가원하는건 홈에서 해당 태그가 보이지않도록 하는 것이기 때문에 태그를 지우고 데이터베이스에 넣을 순 없다.

이를 해결하기 위해서 정규식을 통해서 해당 코드들을 걸러내는 작업을 해 줄 것이다.

export const stripHtml = (html: string) => {
  return html.replace(/<[^>]*>?/gm, "");
};

stripHtml(data.content)

해당 코드를 사용하게 되면 < 로 시작하거나 > 로 시작하는 모든 문자열을 찾아서 패턴을 포함시킨다.

근데 &nbsp; 같은 띄어쓰기 엔티티는 제거가 안된다 ㅎ .. 그래서 추가적으로 작업을 해주면 ?

export const stripHtml = (html: string) => {
  const noTags = html.replace(/<[^>]*>?/gm, "");
  const noEntities = noTags.replace(/&[^;]+;/gm, "");
  return noEntities;
};

끝!