Hôm trước tôi đang làm việc với một trình soạn thảo văn bản đa dạng thức và cần tách các thẻ HTML khỏi chuỗi và lưu trữ nó trong cơ sở dữ liệu. Và đây là một số cách tôi học được có thể hữu ích cho bất kỳ ai đang cố gắng làm điều tương tự.
Những gì chúng tôi đang cố gắng thực hiện là xóa các thẻ khỏi chuỗi và làm cho chuỗi có thể in được dưới dạng văn bản thuần túy. Hãy đi sâu vào và xem nó hoạt động như thế nào.

1) Using .replace(/]*>/g, ‘’)

Phương pháp này là một cách đơn giản và hiệu quả để xóa các thẻ khỏi văn bản. Phương thức này sử dụng phương thức chuỗi .replace(old value,new value) thay thế các giá trị thẻ HTML bằng chuỗi rỗng. /g được sử dụng để nó xảy ra trên toàn cầu (mọi giá trị được tìm thấy trong chuỗi được thay thế bằng giá trị được chỉ định nếu sử dụng /g).
Hạn chế của phương pháp này là chúng tôi không thể xóa một số thực thể HTML. Nó vẫn hoạt động tốt mặc dù.

var myHTML= "
Jimbo.
\n
That's what she said";
var strippedHtml = myHTML.replace(/<[^>]+>/g, '');
// Jimbo.
// That's what she said
console.log(stripedHtml);

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

2) Tạo phần tử DOM tạm thời và truy xuất văn bản

Đây là cách hiệu quả nhất để thực hiện nhiệm vụ. Tạo một phần tử giả và gán nó cho một biến. Chúng ta có thể trích xuất sau bằng cách sử dụng các đối tượng phần tử. Gán văn bản HTML vào bên trongHTML của phần tử giả và chúng ta sẽ nhận được văn bản thuần túy từ các đối tượng phần tử văn bản

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= "
Bears Beets Battlestar Galactica 
\n
Quote by Dwight Schrute";
console.log(convertToPlain(htmlString));
// Expected Result:
// Bears Beets Battlestar Galactica 
// Quote by Dwight Schrute

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

3) gói npm chuyển html thành văn bản

Đây là gói tôi phát hiện gần đây. Đây là trình chuyển đổi phân tích cú pháp HTML và trả về văn bản đẹp. Nó đi kèm với nhiều tùy chọn để chuyển đổi nó thành văn bản thuần túy như wordwrap, tags,

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= "
Bears Beets Battlestar Galactica 
\n
Quote by Dwight Schrute";
console.log(convertToPlain(htmlString));
// Expected Result:
// Bears Beets Battlestar Galactica 
// Quote by Dwight Schrute

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= "
Bears Beets Battlestar Galactica 
\n
Quote by Dwight Schrute";
console.log(convertToPlain(htmlString));
// Expected Result:
// Bears Beets Battlestar Galactica 
// Quote by Dwight Schrute

Cài đặt

npm install html-to-text

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Cách sử dụng

const { htmlToText } = require('html-to-text');

const text = htmlToText('
Nope Its not Ashton Kutcher. It is Kevin Malone. 
Equally Smart and equally handsome', {
    wordwrap: 130
});
console.log(text); // expected result: 
// Nope Its not Ashton Kutcher. It is Kevin Malone.

// Equally Smart and equally handsome

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tìm ví dụ về dự án tại đây

Và đó tổng hợp nó lên. Cảm ơn bạn

Văn bản thô có nghĩa là gì trong HTML?

Những phần tử HTML nào có thể chứa văn bản?