Thông thường ở phía máy chủ, bạn có thể sử dụng một loạt hàm PHP (chẳng hạn như strip_tags) và để xóa HTML và định dạng xấu. Tuy nhiên, nếu bạn không thể sử dụng máy chủ (hoặc bạn sử dụng Node. js) để hoàn thành tác vụ này, thì bạn vẫn có thể sử dụng Javascript để thực hiện. Trong bài viết này, bạn sẽ tìm thấy 3 cách để tách các thẻ html khỏi một chuỗi trong Javascript

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

Đây là cách ưa thích (và được đề xuất) để tách HTML khỏi chuỗi bằng Javascript. Nội dung của phần tử div tạm thời, sẽ là chuỗi HTML được cung cấp để tách, sau đó từ phần tử div trả về thuộc tính innerText

/**
 * Returns the text from a HTML string
 * 
 * @param {html} String The html string
 */
function stripHtml(html){
    // Create a new div element
    var temporalDivElement = document.createElement("div");
    // Set the HTML content with the providen
    temporalDivElement.innerHTML = html;
    // Retrieve the text property of the element (cross-browser support)
    return temporalDivElement.textContent || temporalDivElement.innerText || "";
}

var htmlString= "
Hello World
\n
It's me, Mario
";

//Hello World
//It's me, Mario
console.log(stripHtml(htmlString));

Vấn đề duy nhất của điều này (và cũng là ưu điểm) là trình duyệt sẽ xử lý chuỗi được cung cấp dưới dạng HTML, điều đó có nghĩa là nếu chuỗi HTML chứa một số loại Javascript có thể hiểu được đối với trình duyệt, thì chuỗi đó sẽ được thực thi

// This won't do anything but retrieve the text
stripHtml("")

// But this ...
stripHtml("")

Do đó, bạn chỉ nên sử dụng điều này nếu bạn tin tưởng vào nguồn của chuỗi HTML

2. Nếu bạn đang sử dụng jQuery

Nếu bạn sử dụng jQuery, bạn có thể đơn giản hóa mã từ bước đầu tiên. Đoạn mã sau sẽ thực hiện giống như đoạn mã trong bước đầu tiên (các cảnh báo cũng áp dụng)

var htmlString= "
\n 
Hello World
\n 
This is the text that we should get.
\n 
Our Code World © 2017
\n 
";

var stripedHtml = $("
").html(htmlString).text();

// Hello World
// This is the text that we should get.
// Our Code World © 2017
console.log(stripedHtml);

3. Với một biểu thức chính quy

Nếu bạn đang làm việc trong môi trường Node, nơi không có phương thức document hoặc

// This won't do anything but retrieve the text
stripHtml("")

// But this ...
stripHtml("")

0, thì bạn có thể sử dụng biểu thức chính quy để thay thế tất cả các thẻ HTML từ một chuỗi

var htmlString= "
Hello World
\n
It's me, Mario
";

var stripedHtml = htmlString.replace(/<[^>]+>/g, '');

//Hello World
//It's me, Mario
console.log(stripedHtml);

Phương pháp này sẽ hoạt động hoàn hảo, nhưng nó sẽ chỉ xóa các ký hiệu nhỏ hơn và nhiều hơn (

// This won't do anything but retrieve the text
stripHtml("")

// But this ...
stripHtml("")

1 và

// This won't do anything but retrieve the text
stripHtml("")

// But this ...
stripHtml("")

2), điều đó có nghĩa là các thực thể html không bị xóa khỏi chuỗi như trong ví dụ sau

var htmlString= "
\n 
Hello World
\n 
This is the text that we should get.
\n 
Our Code World © 2017
\n 
";

var stripedHtml = htmlString.replace(/<[^>]+>/g, '');

// Hello World
// This is the text that we should get.
// Our Code World © 2017
console.log(stripedHtml);

Thực thể

// This won't do anything but retrieve the text
stripHtml("")

// But this ...
stripHtml("")

3 nên được dịch là biểu tượng bản quyền, tuy nhiên, nó vẫn ở đó dưới dạng thực thể html. Đó rõ ràng là một bất lợi nếu bạn so sánh nó với phương pháp đầu tiên, nhưng đừng lo lắng không phải mọi thứ đều bị mất (chưa). Bạn có thể sử dụng Javascript để giải mã htmlentity thành các ký tự có thể đọc được (hãy đọc bài viết này để tìm hiểu cách đạt được nó). Ví dụ sau sẽ loại bỏ tất cả html bằng cách sử dụng hướng dẫn thay thế đã đề cập trước đó và chuyển đổi các thực thể html thành các ký tự mà con người có thể đọc được bằng cách sử dụng thư viện he

var htmlString= "
\n 
Hello World
\n 
This is the text that we should get.
\n 
Our Code World © 2017
\n 
";

var stripedHtml = htmlString.replace(/<[^>]+>/g, '');
var decodedStripedHtml = he.decode(stripedHtml);

// Hello World
// This is the text that we should get.
// Our Code World © 2017
console.log(stripedHtml);

// Hello World
// This is the text that we should get.
// Our Code World © 2017
console.log(decodedStripedHtml);

Như bạn có thể thấy, bằng cách sử dụng thư viện he, chúng tôi đã chuyển đổi các thực thể html còn lại thành giá trị có thể đọc được của nó. Lưu ý rằng bạn không nhất thiết phải sử dụng thư viện he vì bạn có thể tạo hàm htmlentities giải mã của riêng mình nếu bạn đọc bài viết này