배경

개발 중인 시스템에서 데이터베이스에 HTML을 포함하는 열이 있습니다. API로 가져오고 React로 표시합니다.
그 화면에는 HTML 내의 문자열을 검색할 수 있는 기능이 있습니다. "검색어를 강조 표시할 수 없습니까?"이런 상담을 받았기 때문에 실시했습니다.
(구글에서 검색하면 하이라이트가 아닌 굵은 글자, 하고 싶은 느낌)

문자열만 강조 표시하는 것은 간단하지만 HTML로 렌더링하는 부분이 고민스러워서 보도를 했습니다.

완성

아마 이런 느낌일 거예요.

HTML의 경우 공백 구분자에 문자를 입력하면 입력 문자와 일치하는 위치가 강조 표시됩니다.
코덱스박스를 줬어요.
득점 텍스트를 돋보이게 하기 위해react-highlight-words라는 포장이 편리해서 사용했습니다. 프로세스 (HTML의string) state에서 HTML 수신 (Reactelement에서 패키지string) 강조 표시된 구성 요소로 깊이 들어가기 (HTML의string)react-dom/server를 통해 서버에서 일시적으로 렌더링 (HTML의string) 정규 표현식으로 HTML 태그 마운트 해제 (React Element) DangerouslySetInnerHTML이라는 HTML의string을 React에서 HTML 요소로 표시할 수 있는 속성에 넣습니다. 이런 느낌. 더 좋은 방법이 있을지도 몰라. 이제 HTML 태그를 제거할 수 있습니다. const unescapeHtml = string => { const patterns = { "&lt;": "<", "&gt;": ">", "&amp;": "&", "&quot;": '"', "&#x27;": "'", "&#x60;": "`" }; const escapedString = string.replace( /&(lt|gt|amp|quot|#x27|#x60);/g, match => patterns[match] ); return escapedString; }; 주의사항 HTML 내부의 링크와 일치하는 글자를 입력하면 HTML이 손상됩니다. 필요하면 도망갈 거예요. 또한 기존 데이터가 사용자가 자유롭게 넣을 수 있다면 XSS 대책 등 보안 대책이 필요하다.