HTML 태그가 포함된 텍스트 순수 텍스트로 추출하기

Javascript

parse
plainText

2023-05-22 19:25

HTML 태그가 포함된 텍스트를 줄바꿈과 띄어쓰기가 적용된 일반 텍스트로 변환하려면 HTML을 파싱하고 텍스트를 추출해야 합니다.

JavaScript에는 이를 위해 DOM을 조작할 수 있는 기능이 있습니다.

아래의 예시 코드는 주어진 HTML 텍스트를 파싱하여 줄바꿈과 띄어쓰기가 적용된 일반 텍스트로 변환하는 방법을 보여줍니다:

const htmlText = `<p>안녕하세요, 이현우입니다.</p><br/>...`;

// HTML을 파싱하여 DOM 요소로 변환
const parser = new DOMParser();
const parsedHTML = parser.parseFromString(htmlText, 'text/html');

// DOM 요소의 innerText를 가져와서 일반 텍스트로 변환
const plainText = parsedHTML.body.innerText;
console.log(plainText);

javascript

이렇게 했을 때 br태그를 인식을 못해서 정규 표현식 사용

const htmlText = `<p>안녕하세요, 이현우입니다.</p><br/>...`;

// HTML을 파싱하여 DOM 요소로 변환
const parser = new DOMParser();
const parsedHTML = parser.parseFromString(htmlText, 'text/html');

// DOM 요소의 innerHTML을 가져와서 줄바꿈을 적용한 일반 텍스트로 변환
const plainText = parsedHTML.body.innerHTML
  .replace(/<br>/g, '\n')
  .replace(/<\/?[^>]+(>|$)/g, '');

console.log(plainText);

javascript

위 코드는 innerHTML 속성을 사용하여 HTML을 가져온 후, <br> 태그를 줄바꿈 문자(\n)로 대체하고, 나머지 HTML 태그들은 정규식을 사용하여 제거합니다.

그 결과로 줄바꿈과 띄어쓰기가 적용된 일반 텍스트를 얻을 수 있습니다.

이제 <br> 태그가 줄바꿈으로 처리되어 일반 텍스트에서 줄바꿈이 유지됩니다