HTML 텍스트를 일반 텍스트로 변환하는 3가지 방법

나는 요전에 서식 있는 텍스트 편집기로 작업하고 있었고 문자열에서 HTML 태그를 제거하고 데이터베이스에 저장해야 했습니다. 다음은 동일한 작업을 수행하려는 모든 사람에게 유용할 수 있는 몇 가지 방법입니다.
우리가 하려는 것은 문자열에서 태그를 제거하고 문자열을 일반 텍스트로 인쇄 가능하게 만드는 것입니다. 어떻게 작동하는지 살펴보겠습니다.

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.

그리고 그것은 그것을 요약합니다. 고맙습니다!!

좋은 웹페이지 즐겨찾기