자바스크립트 - HTML 태그를 제거하고 텍스트만 추출하기 (Remove HTML Tags and Extract Text)

자바스크립트 전체 링크

 

참고

- 네이버 스마트 에디터

- Toast UI로 에디터 만들기 (React Editor with Toast Editor 3.0)

 

네이버 스마트 에디터의 기능 중 하나인 TEXT 추출 기능을 자바스크립트로 구현해 보자.

Toast UI Editor에서는 제공하지 않기 때문에 직접 구현해야 한다.

 

위의 Editor에서 설정한 HTML 태그는 아래와 같다.

<p><b>깨가&nbsp;죽으면?&nbsp;주근깨</b></p><p><span style="background-color: rgb(119, 119, 119); font-size: 11pt; font-family: 굴림, Gulim;">토끼가&nbsp;쓰는&nbsp;빗은?&nbsp;래빗</span></p><p style="text-align: center; " align="center"><span style="color: rgb(58, 50, 195);">세상에서&nbsp;가장&nbsp;쉬운&nbsp;숫자는?&nbsp;190,000</span></p><p style="text-align: center; " align="center"><br></p><p style="text-align: center; " align="center"><br></p><p>비가&nbsp;1시간&nbsp;동안&nbsp;내리면?&nbsp;추적&nbsp;60분</p><p><br></p><p><span style="color: rgb(255, 170, 0);">바늘만&nbsp;가지고&nbsp;다니는&nbsp;사람은?&nbsp;실&nbsp;없는&nbsp;사람</span></p><p>콩&nbsp;한알은&nbsp;영어로?&nbsp;원빈</p><p><b><i><u><strike>햄버거는의&nbsp;색깔은?&nbsp;버건디</strike></u></i></b></p><p><b><i><u><strike><br></strike></u></i></b></p><p>토끼가&nbsp;강한&nbsp;이유는?&nbsp;깡과&nbsp;총이&nbsp;있어서</p>

 

해당 기능을 구현한 메서드는 다음과 같다.

const extractTextFromHTML = (htmlString) => {
    // <p> 태그를 제거하고 줄바꿈 문자를 추가
    let withoutPTags = htmlString.replace(/<p[^>]*>(.*?)<\/p>/g, '$1\n');

    // 나머지 태그들 제거
    let withoutTags = withoutPTags.replace(/<[^>]*>/g, '');

    // &nbsp; 제거
    let withoutNBSP = withoutTags.replace(/&nbsp;/g, ' ');

    return withoutNBSP;
}

const htmlString = '<p><b>깨가&nbsp;죽으면?&nbsp;주근깨</b></p><p><span style="background-color: rgb(119, 119, 119); font-size: 11pt; font-family: 굴림, Gulim;">토끼가&nbsp;쓰는&nbsp;빗은?&nbsp;래빗</span></p><p style="text-align: center; " align="center"><span style="color: rgb(58, 50, 195);">세상에서&nbsp;가장&nbsp;쉬운&nbsp;숫자는?&nbsp;190,000</span></p><p style="text-align: center; " align="center"><br></p><p style="text-align: center; " align="center"><br></p><p>비가&nbsp;1시간&nbsp;동안&nbsp;내리면?&nbsp;추적&nbsp;60분</p><p><br></p><p><span style="color: rgb(255, 170, 0);">바늘만&nbsp;가지고&nbsp;다니는&nbsp;사람은?&nbsp;실&nbsp;없는&nbsp;사람</span></p><p>콩&nbsp;한알은&nbsp;영어로?&nbsp;원빈</p><p><b><i><u><strike>햄버거는의&nbsp;색깔은?&nbsp;버건디</strike></u></i></b></p><p><b><i><u><strike><br></strike></u></i></b></p><p>토끼가&nbsp;강한&nbsp;이유는?&nbsp;깡과&nbsp;총이&nbsp;있어서</p>';

const extractedText = extractTextFromHTML(htmlString);
console.log(extractedText);

 

 

로그를 출력하면 정상적으로 텍스트만 남아있는 것을 알 수 있다.