Làm cách nào để chuyển mã html thành chuỗi?

jQuery.parseHTML sử dụng các phương thức gốc để chuyển đổi chuỗi thành một tập hợp các nút DOM, sau đó có thể chèn các nút này vào tài liệu. Các phương pháp này hiển thị tất cả văn bản ở cuối hoặc đầu (ngay cả khi đó chỉ là khoảng trắng). Để ngăn không cho khoảng trắng ở cuối/đầu bị chuyển đổi thành các nút văn bản, bạn có thể chuyển chuỗi HTML qua jQuery.trim

Theo mặc định, context là document hiện tại nếu không được chỉ định hoặc đưa ra là null hoặc

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

kể từ 3. 0 hành vi mặc định được thay đổi. Nếu context không được chỉ định hoặc được cho là null hoặc

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

Cân nhắc về Bảo mật

Hầu hết các API jQuery chấp nhận chuỗi HTML sẽ chạy các tập lệnh có trong HTML. jQuery.parseHTML không chạy tập lệnh trong HTML được phân tích cú pháp trừ khi document7 rõ ràng là document8. Tuy nhiên, trong hầu hết các môi trường vẫn có thể thực thi tập lệnh một cách gián tiếp, chẳng hạn như thông qua thuộc tính document9. Người gọi nên biết điều này và đề phòng nó bằng cách xóa hoặc thoát mọi đầu vào không đáng tin cậy khỏi các nguồn như URL hoặc cookie. Để tương thích trong tương lai, người gọi không nên phụ thuộc vào khả năng chạy bất kỳ nội dung tập lệnh nào khi document7 không được chỉ định hoặc

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

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

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

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

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

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);

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= "<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

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ư

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

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

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

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

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('<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

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

Làm cách nào để sử dụng HTML dưới dạng chuỗi?

Làm cách nào để chuyển nội dung HTML dưới dạng chuỗi trong Java?

Làm cách nào để chuyển đổi nội dung HTML thành chuỗi trong JavaScript?

Làm cách nào để gán HTML cho chuỗi trong C#?