개발자
공공데이터api 관련 프로젝트를 진행 하고 있습니다. 기획, 디자인 전부 저를 비롯한 팀원과 함께하고 있는데, api를 불러와 정보 데이터를 표시하는데 <p><span style="color: rgb(13, 13, 13); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space-collapse: preserve; background-color: rgb(255, 255, 255);">덕순이.. 이상하게 보자마자 덕순이란 이름이 떠올랐어요.</span></p><p><span style="color: rgb(13, 13, 13); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space-collapse: preserve; background-color: rgb(255, 255, 255);"><br></span></p><p><span 이런식으로 스트링 값으로 불러와집니다. 문자열로만 추출하니 개행, 문장 이음새 등등이 가독성이 아래사진 처럼 매우 떨어지게 됩니다 다음 상황에서 어떤 방법이 좋을까요? 위와 같은 태그로 표시되기에 이를 React에서 그대로 태그 형식으로 출력하는 방법을 생각해보고 있지만, 컬러,폰트 크기 같은 속성은 제외하고 <p> <span>등의 태그만 유지하도록 필터링해야하는 것인가요? 혹시 그렇다면 그 필터되 값을 문자열 형식말고 태그형식으로 적용할 수 있을까요? (추가) 현재 gpt 도움으로 아래의 방법으로 진행하여 성공하게 되었는데 이방법보다 효율적인 방법이 있을까요? 또한 이방법으로는 폰트 사이즈, 굵기가 임의 조절이 되지않는 단점이 있어서 이를 해결하고 싶습니다.
1const filteredText = dog.INTRCN_CN.replace(/[^\s가-힣!?]/g, "");
2 //현재 다음형식으로 특수문자와 영어를 필터링 하였습니다.
3
4//gpt 제시 방법
5import DOMPurify from 'dompurify';
6
7const htmlString = '<p><span style="color: rgb(13, 13, 13); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space-collapse: preserve; background-color: rgb(255, 255, 255);">덕순이.. 이상하게 보자마자 덕순이란 이름이 떠올랐어요.</span></p><p><span style="color: rgb(13, 13, 13); font-family: Roboto, Noto, sans-serif; font-size: 15px; white-space-collapse: preserve; background-color: rgb(255, 255, 255);"><br></span></p><p><span';
8
9const filteredHtmlString = DOMPurify.sanitize(htmlString);
10
11function MyComponent() {
12 return <div dangerouslySetInnerHTML={{ __html: filteredHtmlString }} />;
13}
답변 1
https://github.com/remarkablemark/html-react-parser 이런 파서 이용하세요. 위에 첨부한 파서의 예제 보시면 html 요소들을 다 짤라서 tag인지 attribute인지 종류도 알려주고 각각을 내가 원하는 형태로 교체하는 방법이 자세히 소개되어 있습니다. 답변 맨 위에 첨부한 링크는 구글 검색 젤 위에 나와서 api 문서 살펴보고 충분히 괜찮아보여서 주소를 복붙한건데 저거보다 더 좋은거나 질문자의 취향에 더맞는 파서가 있는지 알아보고 이용하시기 바랍니다.
익명
작성자
2024년 05월 09일
답변감사합니다!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!