Tách các thẻ khỏi chuỗi, rất hữu ích khi bạn muốn trích xuất văn bản từ chuỗi có chứa các thẻ HTML. Bạn có thể xóa các thẻ HTML khỏi chuỗi bằng Regex trong JavaScript. Trong đoạn mã sau, chúng tôi sẽ chỉ cho bạn cách tách các thẻ HTML khỏi chuỗi bằng JavaScript
Sử dụng phương thức thay thế [] của JavaScript với Regex để xóa các thẻ HTML khỏi chuỗi
string.replace[/]+[>|$]/g, ""]
Mẫu mã để tách các thẻ khỏi chuỗi HTML trong JavaScript
var str = "Hello, CodexWorld
"; var cleanText = str.replace[/]+[>|$]/g, ""];
Chào mừng bạn đến với hướng dẫn nhanh về cách tách hoặc xóa thẻ HTML trong Javascript. Cần trích xuất "chỉ văn bản" từ một chuỗi mã HTML?
Có 4 cách phổ biến để tách hoặc loại bỏ các thẻ HTML trong Javascript
- Sử dụng biểu thức chính quy –
var txt = HTML-STRING.replace[/[<[[^>]+]>]/gi, ""];
- Trực tiếp trích xuất nội dung văn bản từ một phần tử HTML –
var txt = ELEMENT.textContent;
- Sử dụng trình phân tích cú pháp DOM sau đó trích xuất nội dung văn bản –
var dom = new DOMParser[].parseFromString[HTML-STRING, "text/html"];
var txt = dom.body.textContent;
- Sử dụng một thư viện như String Strip HTML
Điều đó sẽ bao gồm những điều cơ bản, nhưng chúng ta hãy xem qua các ví dụ khác – Đọc tiếp
ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào
TLDR – TRANG TRÌNH BÀY NHANH
Tải xuống & Ghi chú
TẢI XUỐNG & LƯU Ý
Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa
GHI CHÚ NHANH
Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình
MÃ VÍ DỤ TẢI XUỐNG
Nhấp vào đây để tải xuống tất cả mã nguồn ví dụ, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên mã nguồn đó hoặc sử dụng nó trong dự án của riêng bạn
THẺ THẺ HTML TRONG JAVASCRIPT
Được rồi, bây giờ chúng ta hãy chuyển sang các ví dụ về tước thẻ HTML trong Javascript
1] SỬ DỤNG BIỂU THỨC THƯỜNG XUYÊN
1-biểu thức chính quy. html
// [A] STRIP TAGS FUNCTION
function stripTags [original] {
return original.replace[/[]+]>]/gi, ""];
}
// [B] ORIGINAL STRING
var str = "This is a string with some HTML in it.
";
// [C] "CLEANED" STRING
var cleaned = stripTags[str];
console.log[cleaned];
Phương pháp này có thể được phổ biến rộng rãi trên Internet và cụm từ thông dụng có thể rất khó hiểu. Vì vậy, để mọi thứ trở nên dễ dàng –
// [A] STRIP TAGS FUNCTION
function stripTags [original] {
// [A1] CREATE DUMMY ELEMENT & ATTACH HTML
let ele = document.createElement["div"];
ele.innerHTML = original;
// [A2] USE TEXT CONTENT TO STRIP TAGS
return ele.textContent;
}
// [B] ORIGINAL STRING
var str = "This is a string with some HTML in it.
";
// [C] "CLEANED" STRING
var cleaned = stripTags[str];
console.log[cleaned];
0 chỉ đơn giản có nghĩa là “thay thế tất cả // [A] STRIP TAGS FUNCTION
function stripTags [original] {
// [A1] CREATE DUMMY ELEMENT & ATTACH HTML
let ele = document.createElement["div"];
ele.innerHTML = original;
// [A2] USE TEXT CONTENT TO STRIP TAGS
return ele.textContent;
}
// [B] ORIGINAL STRING
var str = "This is a string with some HTML in it.
";
// [C] "CLEANED" STRING
var cleaned = stripTags[str];
console.log[cleaned];
1 bằng một chuỗi rỗng”. Đúng, điều đó loại bỏ hiệu quả tất cả các thẻ HTML
2] NỘI DUNG VĂN BẢN
2-văn bản-nội dung. html
// [A] STRIP TAGS FUNCTION
function stripTags [original] {
// [A1] CREATE DUMMY ELEMENT & ATTACH HTML
let ele = document.createElement["div"];
ele.innerHTML = original;
// [A2] USE TEXT CONTENT TO STRIP TAGS
return ele.textContent;
}
// [B] ORIGINAL STRING
var str = "This is a string with some HTML in it.
";
// [C] "CLEANED" STRING
var cleaned = stripTags[str];
console.log[cleaned];
Đúng, các trình duyệt hiện đại thực sự đi kèm với thuộc tính
// [A] STRIP TAGS FUNCTION
function stripTags [original] {
// [A1] CREATE DUMMY ELEMENT & ATTACH HTML
let ele = document.createElement["div"];
ele.innerHTML = original;
// [A2] USE TEXT CONTENT TO STRIP TAGS
return ele.textContent;
}
// [B] ORIGINAL STRING
var str = "This is a string with some HTML in it.
";
// [C] "CLEANED" STRING
var cleaned = stripTags[str];
console.log[cleaned];
2 rất tiện dụng. Chỉ cần sử dụng nó để lấy nội dung của một phần tử HTML, trừ tất cả các thẻ
3] DOM PARSER & NỘI DUNG VĂN BẢN
3-DOM-trình phân tích cú pháp. htm
// [A] STRIP TAGS FUNCTION
function stripTags [original] {
// [A1] PARSE STRING INTO NEW HTML DOCUMENT
let parsed = new DOMParser[].parseFromString[original, "text/html"];
// [A2] STRIP TAGS, RETURN AS TEXT CONTENT
return parsed.body.textContent;
}
// [B] ORIGINAL STRING
var str = "This is a string with some HTML in it.
";
// [C] "CLEANED" STRING
var cleaned = stripTags[str];
console.log[cleaned];
Đây là một thay thế cho ở trên. Vẫn sử dụng
// [A] STRIP TAGS FUNCTION
function stripTags [original] {
// [A1] CREATE DUMMY ELEMENT & ATTACH HTML
let ele = document.createElement["div"];
ele.innerHTML = original;
// [A2] USE TEXT CONTENT TO STRIP TAGS
return ele.textContent;
}
// [B] ORIGINAL STRING
var str = "This is a string with some HTML in it.
";
// [C] "CLEANED" STRING
var cleaned = stripTags[str];
console.log[cleaned];
3, nhưng chúng tôi đang sử dụng // [A] STRIP TAGS FUNCTION
function stripTags [original] {
// [A1] CREATE DUMMY ELEMENT & ATTACH HTML
let ele = document.createElement["div"];
ele.innerHTML = original;
// [A2] USE TEXT CONTENT TO STRIP TAGS
return ele.textContent;
}
// [B] ORIGINAL STRING
var str = "This is a string with some HTML in it.
";
// [C] "CLEANED" STRING
var cleaned = stripTags[str];
console.log[cleaned];
4 thay vì // [A] STRIP TAGS FUNCTION
function stripTags [original] {
// [A1] CREATE DUMMY ELEMENT & ATTACH HTML
let ele = document.createElement["div"];
ele.innerHTML = original;
// [A2] USE TEXT CONTENT TO STRIP TAGS
return ele.textContent;
}
// [B] ORIGINAL STRING
var str = "This is a string with some HTML in it.
";
// [C] "CLEANED" STRING
var cleaned = stripTags[str];
console.log[cleaned];
5. Vâng, nó tạo nên sự khác biệt. Thông tin thêm về điều đó trong phần bổ sung bên dưới
4] SỬ DỤNG THƯ VIỆN HTML DẢI
dải 4 dây. html
const { stripHtml } = stringStripHtml;
// [B] ORIGINAL STRING
var str = "This is a string with some HTML in it.
";
// [C] "CLEANED" STRING
var cleaned = stripHtml[str].result;
console.log[cleaned];
Cuối cùng, dành cho các bạn đang sử dụng NodeJS –
// [A] STRIP TAGS FUNCTION
function stripTags [original] {
// [A1] CREATE DUMMY ELEMENT & ATTACH HTML
let ele = document.createElement["div"];
ele.innerHTML = original;
// [A2] USE TEXT CONTENT TO STRIP TAGS
return ele.textContent;
}
// [B] ORIGINAL STRING
var str = "This is a string with some HTML in it.
";
// [C] "CLEANED" STRING
var cleaned = stripTags[str];
console.log[cleaned];
3 ở trên sẽ không hoạt động vì thực tế không có trình duyệt. Thư viện String Strip HTML là một giải pháp thay thế mà bạn có thể cân nhắc sử dụng – Có, nó cũng hoạt động trên “phiên bản web”
BIT BỔ SUNG & LIÊN KẾT
Đó là tất cả cho hướng dẫn chính và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn
THÊM – DẢI CÁC THỰC THỂ HTML
CREDITS : //css-tricks.com/snippets/javascript/htmlentities-for-javascript/
function htmlEntities[str] {
return String[str].replace[/&/g, "&"].replace[//g, ">"].replace[/"/g, """];
}
Đối với người mới bắt đầu, các thực thể HTML chỉ đơn giản là “ký tự đặc biệt” để biểu thị một số ký hiệu nhất định. Ví dụ
7 Đại diện cho “nhỏ hơn”, sẽ hiển thị là// [A] STRIP TAGS FUNCTION function stripTags [original] { // [A1] CREATE DUMMY ELEMENT & ATTACH HTML let ele = document.createElement["div"]; ele.innerHTML = original; // [A2] USE TEXT CONTENT TO STRIP TAGS return ele.textContent; } // [B] ORIGINAL STRING var str = "
This is a string with some HTML in it.
"; // [C] "CLEANED" STRING var cleaned = stripTags[str]; console.log[cleaned];
8// [A] STRIP TAGS FUNCTION function stripTags [original] { // [A1] CREATE DUMMY ELEMENT & ATTACH HTML let ele = document.createElement["div"]; ele.innerHTML = original; // [A2] USE TEXT CONTENT TO STRIP TAGS return ele.textContent; } // [B] ORIGINAL STRING var str = "
This is a string with some HTML in it.
"; // [C] "CLEANED" STRING var cleaned = stripTags[str]; console.log[cleaned];
9 Đại diện cho “lớn hơn”, sẽ hiển thị là// [A] STRIP TAGS FUNCTION function stripTags [original] { // [A1] CREATE DUMMY ELEMENT & ATTACH HTML let ele = document.createElement["div"]; ele.innerHTML = original; // [A2] USE TEXT CONTENT TO STRIP TAGS return ele.textContent; } // [B] ORIGINAL STRING var str = "
This is a string with some HTML in it.
"; // [C] "CLEANED" STRING var cleaned = stripTags[str]; console.log[cleaned];
0// [A] STRIP TAGS FUNCTION function stripTags [original] { // [A1] PARSE STRING INTO NEW HTML DOCUMENT let parsed = new DOMParser[].parseFromString[original, "text/html"]; // [A2] STRIP TAGS, RETURN AS TEXT CONTENT return parsed.body.textContent; } // [B] ORIGINAL STRING var str = "
This is a string with some HTML in it.
"; // [C] "CLEANED" STRING var cleaned = stripTags[str]; console.log[cleaned];
Để hiển thị các đoạn mã HTML, chúng ta phải sử dụng các thực thể HTML. e. G.
// [A] STRIP TAGS FUNCTION
function stripTags [original] {
// [A1] PARSE STRING INTO NEW HTML DOCUMENT
let parsed = new DOMParser[].parseFromString[original, "text/html"];
// [A2] STRIP TAGS, RETURN AS TEXT CONTENT
return parsed.body.textContent;
}
// [B] ORIGINAL STRING
var str = "This is a string with some HTML in it.
";
// [C] "CLEANED" STRING
var cleaned = stripTags[str];
console.log[cleaned];
1 nên được nhập là // [A] STRIP TAGS FUNCTION
function stripTags [original] {
// [A1] PARSE STRING INTO NEW HTML DOCUMENT
let parsed = new DOMParser[].parseFromString[original, "text/html"];
// [A2] STRIP TAGS, RETURN AS TEXT CONTENT
return parsed.body.textContent;
}
// [B] ORIGINAL STRING
var str = "This is a string with some HTML in it.
";
// [C] "CLEANED" STRING
var cleaned = stripTags[str];
console.log[cleaned];
2. Để loại bỏ các thực thể HTML, chúng ta phải sử dụng một biểu thức chính quy hoàn toàn khác;
THÊM – CÁI NÀO NHANH HƠN?
siêu tốc độ. html
// [A] SOME VERY LONG AND STINKY HTML STRING
var str = `LONG LONG HTML STRING HERE`;
// [B] REGEX TIMING
console.time["REGEX"];
var cleaned = str.replace[/[]+]>]/gi, ""];
console.timeEnd["REGEX"];
// [C] TEXT CONTENT TIMING
console.time["CONTENT"];
cleaned = document.createElement["div"];
cleaned.innerHTML = str;
cleaned = cleaned.textContent;
console.timeEnd["CONTENT"];
// [D] DOM PARSER
console.time["DOMPARSE"];
cleaned = new DOMParser[].parseFromString[str, "text/html"];
cleaned = cleaned.body.textContent;
console.timeEnd["DOMPARSE"];
// [E] STRIP STRING LIBRARY
const { stripHtml } = stringStripHtml;
console.time["LIB"];
cleaned = stripHtml[str].result;
console.timeEnd["LIB"];
Dành cho các bạn đang muốn sử dụng giải pháp hiệu quả nhất – Treo gương lên tường, loại nào là nhanh nhất?
Cảm ơn bạn đã đọc, và chúng tôi đã đi đến cuối. Tôi hy vọng rằng nó đã giúp bạn hiểu rõ hơn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc