Tôi đã làm việc với một trình soạn thảo văn bản phong phú vào một ngày khá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. Khi làm như vậy, tôi đã học được một vài phương pháp khác nhau để đạt được điều này. Tôi muốn chia sẻ thông tin này với bạn vì nó 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 làm 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 =
"Bears Beets Battlestar Galactica
\nQuote by Dwight Schrute
";
console.log[convertToPlain[htmlString]];
// Expected Result:
// Bears Beets Battlestar Galactica
// Quote by Dwight Schrute
0 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 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
\nQuote by Dwight Schrute
";
console.log[convertToPlain[htmlString]];
// Expected Result:
// Bears Beets Battlestar Galactica
// Quote by Dwight Schrute
1]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.
\nThat's what she said
";
var strippedHtml = myHTML.replace[/]+>/g, ""];
// Jimbo.
// That's what she said
console.log[stripedHtml];
2. Tạo một 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 cho InternalHTML 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
\nQuote by Dwight Schrute
";
console.log[convertToPlain[htmlString]];
// Expected Result:
// Bears Beets Battlestar Galactica
// Quote by Dwight Schrute
3. gói npm chuyển html thành văn bản
Đây là gói tôi phát hiện ra 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 =
"Bears Beets Battlestar Galactica
\nQuote by Dwight Schrute
";
console.log[convertToPlain[htmlString]];
// Expected Result:
// Bears Beets Battlestar Galactica
// Quote by Dwight Schrute
2, 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
\nQuote by Dwight Schrute
";
console.log[convertToPlain[htmlString]];
// Expected Result:
// Bears Beets Battlestar Galactica
// Quote by Dwight Schrute
3, 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
\nQuote by Dwight Schrute
";
console.log[convertToPlain[htmlString]];
// Expected Result:
// Bears Beets Battlestar Galactica
// Quote by Dwight Schrute
4, 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
\nQuote by Dwight Schrute
";
console.log[convertToPlain[htmlString]];
// Expected Result:
// Bears Beets Battlestar Galactica
// Quote by Dwight Schrute
5, v.v.Bưu kiện. json là cần thiết để sử dụng gói. Chúng tôi cần cài đặt gói trước rồi sử dụng gói đó trong tệp của mình
Bạn có thể tìm tài liệu chính thức cho gói tại đây. Tôi đã sử dụng nó trong dự án vue của mình và nó hoạt động rất tốt
Tôi muốn hiển thị cho người dùng một đoạn mã HTML đơn giản, nhưng bất cứ khi nào tôi đang thử, nó sẽ tự động được hiển thị dưới dạng HTML mà không có thẻ
Tôi muốn hiển thị như sau,
This is a paragraph
Nhưng kết xuất của nó
This is a paragraph
Làm thế nào để hiển thị mã đơn giản?
Trong trường hợp, đâu là phần tử đầu tiên trên trang, sử dụng HTML là không thích hợp hơn. Thay vào đó, bạn có thể cung cấp tệp văn bản với kiểu MIME văn bản/đơn giản
Thẻ trống, có nghĩa là thẻ đóng không bắt buộc
Ví dụ về thuộc tính HTML
Title of the document
The tag content looks like this:
Main title of the document
First paragraph of the text
Subheading
Thetag hỗ trợ các thuộc tính toàn cầu
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 =
"Bears Beets Battlestar Galactica
\nQuote by Dwight Schrute
";
console.log[convertToPlain[htmlString]];
// Expected Result:
// Bears Beets Battlestar Galactica
// Quote by Dwight Schrute
6 thay thế các giá trị thẻ HTML bằng chuỗi trống. 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
\nQuote by Dwight Schrute
";
console.log[convertToPlain[htmlString]];
// Expected Result:
// Bears Beets Battlestar Galactica
// Quote by Dwight Schrute
1 đượ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 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
\nQuote by Dwight Schrute
";
console.log[convertToPlain[htmlString]];
// Expected Result:
// Bears Beets Battlestar Galactica
// Quote by Dwight Schrute
1]. 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.
\nThat'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
\nQuote 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ư
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
\nQuote by Dwight Schrute
";
console.log[convertToPlain[htmlString]];
// Expected Result:
// Bears Beets Battlestar Galactica
// Quote by Dwight Schrute
2, 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
\nQuote by Dwight Schrute
";
console.log[convertToPlain[htmlString]];
// Expected Result:
// Bears Beets Battlestar Galactica
// Quote by Dwight Schrute
3, 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
\nQuote by Dwight Schrute
";
console.log[convertToPlain[htmlString]];
// Expected Result:
// Bears Beets Battlestar Galactica
// Quote by Dwight Schrute
4, 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
\nQuote by Dwight Schrute
";
console.log[convertToPlain[htmlString]];
// Expected Result:
// Bears Beets Battlestar Galactica
// Quote by Dwight Schrute
0. Gói hàng. json là cần thiết để sử dụng gói. Chúng tôi cần cài đặt gói trước rồi sử dụng gói đó trong tệp của mình.
Bạn có thể tìm tài liệu chính thức của gói tại đây.
Cài đặt
________số 8
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