RegEx를 사용하여 JavaScript에서 HTML 태그 제거

안녕하세요 여러분! 번역 앱으로 작업하는 현재 프로젝트에서 우리는 Zendesk platform에서 우리 앱으로 데이터를 보낸 다음 Deepl Translator API으로 데이터를 보내어 Zendesk에서 받는 모든 유형의 언어에서 영어 번역을 가져옵니다. 앱에 대한 페이로드로.

결과적으로 Zendesk에서 받은 문자열에는 ASCII/Symbol 형식(예: < 및 >)의 html 태그가 포함되어 있고 Deepl Translator API에서 받은 문자열은 동일한 html 태그가 있는 이 문자열을 반환하지만 때때로 html로 작성되었습니다. 형식(예< and > ).

간단히 말해서 이것은 어떻게든 동일하기 때문에 문제가 되지 않아야 합니다. 그러나 UI에서 번역된 텍스트 컨테이너를 채울 때 반복을 피하기 위해 문자열을 사용하여 이전 항목과 비교하기 때문에 이것은 다음이 됩니다. 비교할 때 문자열이 실제로 다르기 때문에 악몽입니다.

우리는 비교를 가능하게 하기 위해 여러 가지 방법을 취할 수 있지만 이를 수행하는 더 간단한 방법이 있습니다. .

기본적으로 Zendesk에서 받은 문자열의 텍스트만 가져오고 있습니다. 저에게 중요한 유일한 것은 번역 컨테이너에 추가할 일반 텍스트를 갖는 것이기 때문입니다. 다른 시나리오에서는 문자열에서 html 형식을 유지하기 위해 태그를 유지해야 하지만 이 특별한 경우 클라이언트는 번역 중인 텍스트의 텍스트 버전만 표시하기를 원하므로 계속 그렇게 할 것입니다.

따라서 이 문자열에서 대체 메소드를 사용하여 HTML 태그를 제거할 수 있습니다. 이를 위해 빌드한 도우미 함수의 예를 보여 드리겠습니다.

/**
* Returns a string containing plain text format
* @constructor
* @param {string} strToSanitize - String to be sanitized
*/
export const clearHTMLTags = (strToSanitize) => {
  return strToSanitize.replace(/(<([^>]+)>)/gi, '');
}

어떤 사람들은 이렇게 말할 수도 있습니다. 이 기능의 중요한 점은 무엇입니까? 글쎄요, 먼저 말씀드리자면 저는 /(<([^>]+)>)/gi를 사용하여 주어진 문자열이 포함할 수 있는 모든 여는 태그와 닫는 태그를 얻습니다.

다음으로 'gi' RegEx 한정자를 추가하여 문자열 매개변수에서 정규식 패턴의 모든 항목에 대해 대소문자를 구분하여 검색합니다.

마지막으로 이 regEx와 결합된 replace 메서드를 사용하여 빈 문자열을 추가하여 해당 문자열에서 태그를 제거합니다. 이것의 결과는 이 기능에서 sanitized-html-tags-free 일반 텍스트가 될 것입니다.

이제 평소와 같이 이 접근 방식은 방탄이 아니므로 어떤 경우에는 정규식이 개폐 태그 중 일부를 이해하지 못할 수 있으며 이로 인해 확실히 추가 문자가 있거나 < 또는 >가 누락된 결과가 발생할 수 있습니다. , 많은 양의 HTML 태깅이 있는 더 복잡한 시나리오와 관련하여 모든 세부 사항을 다룰 수 있도록 보다 효율적인 방법을 공유하고 있습니다.

이 작업을 가장 잘 수행하기 위한 제안으로 제시된 접근 방식을 아래에서 찾으십시오.

const betterClearHTMLTags = (strToSanitize) => {
  let myHTML = new DOMParser()
    .parseFromString(strToSanitize, 'text/html');
    return myHTML.body.textContent || '';
}

let myHTML = `<!--  don't > use Regex --><h1>Test</h1>`

console.log(
  betterClearHTMLTags(myHTML)
)
 // output: Test

음, 여러분, HTML 태그를 정리하고 그 내용을 일반 텍스트로 남기고 싶은 상황에 이르렀을 때 이 두 가지 기능이 모두 유용하다는 것을 알게 되기를 바랍니다. 즐거운 독서, 친구들!

❤️ 이 글이 즐거우셨다면 글을 더 쓰게 되는 동기가 됩니다!
🦄 진정으로 이 기사가 당신에게 전적으로 도움이 되었다고 생각한다면!
🔖 나중에 이 기사를 다시 확인해야 하는 경우.
🤔 귀하의 의견을 남겨주세요, 귀하의 의견은 매우 중요합니다.