HTML 텍스트를 일반 텍스트로 변환하는 3가지 방법
5998 단어 htmlintermediatewebdevjavascript
우리가 하려는 것은 문자열에서 태그를 제거하고 문자열을 일반 텍스트로 인쇄 가능하게 만드는 것입니다. 어떻게 작동하는지 살펴보겠습니다.
1) .replace(/<[^>]*>/g, '') 사용
이 방법은 텍스트에서 태그를 제거하는 간단하고 효율적인 방법입니다. 이 메서드는 HTML 태그 값을 빈 문자열로 바꾸는 문자열 메서드
.replace(old value,new value)
를 사용합니다. /g
는 전역적으로 발생하는 데 사용됩니다(문자열에서 찾은 모든 값은 /g
가 사용되는 경우 지정된 값으로 바뀝니다).이 방법의 단점은 일부 HTML 엔티티를 제거할 수 없다는 것입니다. 그래도 여전히 잘 작동합니다.
var myHTML= "<div><h1>Jimbo.</h1>\n<p>That's what she said</p></div>";
var strippedHtml = myHTML.replace(/<[^>]+>/g, '');
// Jimbo.
// That's what she said
console.log(stripedHtml);
2) 임시 DOM 요소 생성 및 텍스트 검색
이것은 작업을 수행하는 가장 효율적인 방법입니다. 더미 요소를 만들고 변수에 할당합니다. 요소 개체를 사용하여 나중에 추출할 수 있습니다. HTML 텍스트를 더미 요소의 innerHTML에 할당하면 텍스트 요소 개체에서 일반 텍스트를 가져옵니다.
function convertToPlain(html){
// Create a new div element
var tempDivElement = document.createElement("div");
// Set the HTML content with the given value
tempDivElement.innerHTML = html;
// Retrieve the text property of the element
return tempDivElement.textContent || tempDivElement.innerText || "";
}
var htmlString= "<div><h1>Bears Beets Battlestar Galactica </h1>\n<p>Quote by Dwight Schrute</p></div>";
console.log(convertToPlain(htmlString));
// Expected Result:
// Bears Beets Battlestar Galactica
// Quote by Dwight Schrute
3) html-to-text npm 패키지
이것은 내가 최근에 발견한 패키지입니다. 이것은 HTML을 구문 분석하고 아름다운 텍스트를 반환하는 변환기입니다.
wordwrap
, tags
, whitespaceCharacters
, formattersetc
와 같은 일반 텍스트로 변환하는 많은 옵션이 제공됩니다.패키지를 사용하려면 Package.json이 필요합니다. 먼저 패키지를 설치한 다음 파일에서 사용해야 합니다.
패키지의 공식 문서here를 찾을 수 있습니다.
설치
npm install html-to-text
용법
const { htmlToText } = require('html-to-text');
const text = htmlToText('<div>Nope Its not Ashton Kutcher. It is Kevin Malone. <p>Equally Smart and equally handsome</p></div>', {
wordwrap: 130
});
console.log(text); // expected result:
// Nope Its not Ashton Kutcher. It is Kevin Malone.
// Equally Smart and equally handsome
프로젝트의 예를 찾으십시오here.
그리고 그것은 그것을 요약합니다. 고맙습니다!!
Reference
이 문제에 관하여(HTML 텍스트를 일반 텍스트로 변환하는 3가지 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/sanchithasr/3-ways-to-convert-html-text-to-plain-text-52l8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)