Tôi đã thay đổi câu trả lời của JibberBoy2000 để bao gồm một số định dạng thẻ
, xóa mọi thứ bên trong thẻ và
function convertHtmlToText[] {
var inputText = document.getElementById["input"].value;
var returnText = "" + inputText;
//-- remove BR tags and replace them with line break
returnText=returnText.replace[/
/gi, "\n"];
returnText=returnText.replace[//gi, "\n"];
returnText=returnText.replace[//gi, "\n"];
//-- remove P and A tags but preserve what's inside of them
returnText=returnText.replace[//gi, "\n"];
returnText=returnText.replace[/[.*?]/gi, " $2 [$1]"];
//-- remove all inside SCRIPT and STYLE tags
returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""];
returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""];
//-- remove all else
returnText=returnText.replace[//g, ""];
//-- get rid of more than 2 multiple line breaks:
returnText=returnText.replace[/[?:[?:\r\n|\r|\n]\s*]{2,}/gim, "\n\n"];
//-- get rid of more than 2 spaces:
returnText = returnText.replace[/ +[?= ]/g,''];
//-- get rid of html-encoded characters:
returnText=returnText.replace[/ /gi," "];
returnText=returnText.replace[/&/gi,"&"];
returnText=returnText.replace[/"/gi,'"'];
returnText=returnText.replace[/</gi,''];
//-- return
document.getElementById["output"].value = returnText;
}
0, định dạng HTML kết quả bằng cách loại bỏ nhiều lỗi và khoảng trắng và chuyển đổi một số mã được mã hóa HTML thành bình thường. Sau một số thử nghiệm, có vẻ như bạn có thể chuyển đổi hầu hết các trang web đầy đủ thành văn bản đơn giản nơi giữ lại tiêu đề và nội dung trang.Trong ví dụ đơn giản,
This is my title
body {margin-top: 15px;}
a { color: #D80C1F; font-weight:bold; text-decoration:none; }
This string has html code i want to remove
In this line BBC with link is mentioned.
Now back to "normal text" and stuff using <html encoding>
trở thành
Đây là tiêu đề của tôi
Chuỗi này có mã html tôi muốn xóa
Trong dòng này BBC [//www.bbc.co.uk] với liên kết được đề cập.
Bây giờ trở lại "văn bản bình thường" và các công cụ sử dụng
Chức năng JavaScript và trang kiểm tra xem xét điều này:
function convertHtmlToText[] {
var inputText = document.getElementById["input"].value;
var returnText = "" + inputText;
//-- remove BR tags and replace them with line break
returnText=returnText.replace[/
/gi, "\n"];
returnText=returnText.replace[//gi, "\n"];
returnText=returnText.replace[//gi, "\n"];
//-- remove P and A tags but preserve what's inside of them
returnText=returnText.replace[//gi, "\n"];
returnText=returnText.replace[/[.*?]/gi, " $2 [$1]"];
//-- remove all inside SCRIPT and STYLE tags
returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""];
returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""];
//-- remove all else
returnText=returnText.replace[//g, ""];
//-- get rid of more than 2 multiple line breaks:
returnText=returnText.replace[/[?:[?:\r\n|\r|\n]\s*]{2,}/gim, "\n\n"];
//-- get rid of more than 2 spaces:
returnText = returnText.replace[/ +[?= ]/g,''];
//-- get rid of html-encoded characters:
returnText=returnText.replace[/ /gi," "];
returnText=returnText.replace[/&/gi,"&"];
returnText=returnText.replace[/"/gi,'"'];
returnText=returnText.replace[/</gi,''];
//-- return
document.getElementById["output"].value = returnText;
}
Nó đã được sử dụng với HTML này:
CONVERT
Chào mừng bạn đến với một hướng dẫn nhanh về cách tước hoặc xóa các thẻ HTML trong JavaScript. Cần trích xuất văn bản chỉ có văn bản từ một chuỗi mã HTML? Vệ sinh một chuỗi để đảm bảo không có thẻ HTML?
Có 4 cách phổ biến để tước hoặc xóa các thẻ HTML trong JavaScript:
- Sử dụng biểu thức chính quy -
1function convertHtmlToText[] { var inputText = document.getElementById["input"].value; var returnText = "" + inputText; //-- remove BR tags and replace them with line break returnText=returnText.replace[/
/gi, "\n"]; returnText=returnText.replace[//gi, "\n"]; returnText=returnText.replace[//gi, "\n"]; //-- remove P and A tags but preserve what's inside of them returnText=returnText.replace[//gi, "\n"]; returnText=returnText.replace[/[.*?]/gi, " $2 [$1]"]; //-- remove all inside SCRIPT and STYLE tags returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""]; returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""]; //-- remove all else returnText=returnText.replace[//g, ""]; //-- get rid of more than 2 multiple line breaks: returnText=returnText.replace[/[?:[?:\r\n|\r|\n]\s*]{2,}/gim, "\n\n"]; //-- get rid of more than 2 spaces: returnText = returnText.replace[/ +[?= ]/g,'']; //-- get rid of html-encoded characters: returnText=returnText.replace[/ /gi," "]; returnText=returnText.replace[/&/gi,"&"]; returnText=returnText.replace[/"/gi,'"']; returnText=returnText.replace[/</gi,'']; //-- return document.getElementById["output"].value = returnText; } - Trích xuất trực tiếp nội dung văn bản từ phần tử HTML -
2function convertHtmlToText[] { var inputText = document.getElementById["input"].value; var returnText = "" + inputText; //-- remove BR tags and replace them with line break returnText=returnText.replace[/
/gi, "\n"]; returnText=returnText.replace[//gi, "\n"]; returnText=returnText.replace[//gi, "\n"]; //-- remove P and A tags but preserve what's inside of them returnText=returnText.replace[//gi, "\n"]; returnText=returnText.replace[/[.*?]/gi, " $2 [$1]"]; //-- remove all inside SCRIPT and STYLE tags returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""]; returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""]; //-- remove all else returnText=returnText.replace[//g, ""]; //-- get rid of more than 2 multiple line breaks: returnText=returnText.replace[/[?:[?:\r\n|\r|\n]\s*]{2,}/gim, "\n\n"]; //-- get rid of more than 2 spaces: returnText = returnText.replace[/ +[?= ]/g,'']; //-- get rid of html-encoded characters: returnText=returnText.replace[/ /gi," "]; returnText=returnText.replace[/&/gi,"&"]; returnText=returnText.replace[/"/gi,'"']; returnText=returnText.replace[/</gi,'']; //-- return document.getElementById["output"].value = returnText; } - 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 -
3function convertHtmlToText[] { var inputText = document.getElementById["input"].value; var returnText = "" + inputText; //-- remove BR tags and replace them with line break returnText=returnText.replace[/
/gi, "\n"]; returnText=returnText.replace[//gi, "\n"]; returnText=returnText.replace[//gi, "\n"]; //-- remove P and A tags but preserve what's inside of them returnText=returnText.replace[//gi, "\n"]; returnText=returnText.replace[/[.*?]/gi, " $2 [$1]"]; //-- remove all inside SCRIPT and STYLE tags returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""]; returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""]; //-- remove all else returnText=returnText.replace[//g, ""]; //-- get rid of more than 2 multiple line breaks: returnText=returnText.replace[/[?:[?:\r\n|\r|\n]\s*]{2,}/gim, "\n\n"]; //-- get rid of more than 2 spaces: returnText = returnText.replace[/ +[?= ]/g,'']; //-- get rid of html-encoded characters: returnText=returnText.replace[/ /gi," "]; returnText=returnText.replace[/&/gi,"&"]; returnText=returnText.replace[/"/gi,'"']; returnText=returnText.replace[/</gi,'']; //-- return document.getElementById["output"].value = returnText; }
4function convertHtmlToText[] { var inputText = document.getElementById["input"].value; var returnText = "" + inputText; //-- remove BR tags and replace them with line break returnText=returnText.replace[/
/gi, "\n"]; returnText=returnText.replace[//gi, "\n"]; returnText=returnText.replace[//gi, "\n"]; //-- remove P and A tags but preserve what's inside of them returnText=returnText.replace[//gi, "\n"]; returnText=returnText.replace[/[.*?]/gi, " $2 [$1]"]; //-- remove all inside SCRIPT and STYLE tags returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""]; returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""]; //-- remove all else returnText=returnText.replace[//g, ""]; //-- get rid of more than 2 multiple line breaks: returnText=returnText.replace[/[?:[?:\r\n|\r|\n]\s*]{2,}/gim, "\n\n"]; //-- get rid of more than 2 spaces: returnText = returnText.replace[/ +[?= ]/g,'']; //-- get rid of html-encoded characters: returnText=returnText.replace[/ /gi," "]; returnText=returnText.replace[/&/gi,"&"]; returnText=returnText.replace[/"/gi,'"']; returnText=returnText.replace[/</gi,'']; //-- return document.getElementById["output"].value = returnText; }
- Sử dụng một thư viện như chuỗi chuỗi HTML.
Điều đó sẽ bao gồm những điều cơ bản, nhưng chúng ta hãy đi qua nhiều ví dụ hơn - đọc tiếp!
Tôi đã bao gồm một tệp zip với tất cả mã nguồn khi bắt đầu hướng dẫn này, vì vậy bạn không phải sao chép mọi thứ, hoặc nếu bạn chỉ muốn đi thẳng vào.
Slide nhanh
MỤC LỤC
Tải xuống & ghi chú
Thứ nhất, đây là liên kết tải xuống đến 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 toàn bộ thế giới, nếu bạn cần câu trả lời khẩn cấp, vui lòng kiểm tra danh sách các trang web của tôi để nhận trợ giúp lập trình.
Mã hóa ví dụ Tải xuống
Nhấn vào đây để tải xuống tất cả cá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 đó hoặc sử dụng nó trong dự án của riêng bạn.
Được rồi, bây giờ chúng ta hãy chuyển sang các ví dụ về việc tước các thẻ HTML trong JavaScript.
1] Sử dụng biểu thức chính quy
1-regular-expression.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 dán trên khắp Internet và & nbsp; biểu thức thông thường có thể rất khó hiểu. Vì vậy, để giữ cho mọi thứ dễ dàng -
function convertHtmlToText[] {
var inputText = document.getElementById["input"].value;
var returnText = "" + inputText;
//-- remove BR tags and replace them with line break
returnText=returnText.replace[/
/gi, "\n"];
returnText=returnText.replace[//gi, "\n"];
returnText=returnText.replace[//gi, "\n"];
//-- remove P and A tags but preserve what's inside of them
returnText=returnText.replace[//gi, "\n"];
returnText=returnText.replace[/[.*?]/gi, " $2 [$1]"];
//-- remove all inside SCRIPT and STYLE tags
returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""];
returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""];
//-- remove all else
returnText=returnText.replace[//g, ""];
//-- get rid of more than 2 multiple line breaks:
returnText=returnText.replace[/[?:[?:\r\n|\r|\n]\s*]{2,}/gim, "\n\n"];
//-- get rid of more than 2 spaces:
returnText = returnText.replace[/ +[?= ]/g,''];
//-- get rid of html-encoded characters:
returnText=returnText.replace[/ /gi," "];
returnText=returnText.replace[/&/gi,"&"];
returnText=returnText.replace[/"/gi,'"'];
returnText=returnText.replace[/</gi,''];
//-- return
document.getElementById["output"].value = returnText;
}
5 đơn giản có nghĩa là thay thế tất cả function convertHtmlToText[] {
var inputText = document.getElementById["input"].value;
var returnText = "" + inputText;
//-- remove BR tags and replace them with line break
returnText=returnText.replace[/
/gi, "\n"];
returnText=returnText.replace[//gi, "\n"];
returnText=returnText.replace[//gi, "\n"];
//-- remove P and A tags but preserve what's inside of them
returnText=returnText.replace[//gi, "\n"];
returnText=returnText.replace[/[.*?]/gi, " $2 [$1]"];
//-- remove all inside SCRIPT and STYLE tags
returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""];
returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""];
//-- remove all else
returnText=returnText.replace[//g, ""];
//-- get rid of more than 2 multiple line breaks:
returnText=returnText.replace[/[?:[?:\r\n|\r|\n]\s*]{2,}/gim, "\n\n"];
//-- get rid of more than 2 spaces:
returnText = returnText.replace[/ +[?= ]/g,''];
//-- get rid of html-encoded characters:
returnText=returnText.replace[/ /gi," "];
returnText=returnText.replace[/&/gi,"&"];
returnText=returnText.replace[/"/gi,'"'];
returnText=returnText.replace[/</gi,''];
//-- return
document.getElementById["output"].value = returnText;
}
6 bằng một chuỗi trống. Đúng, loại bỏ hiệu quả tất cả các thẻ HTML.2] Nội dung văn bản
2-text-content.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 một khách sạn
function convertHtmlToText[] {
var inputText = document.getElementById["input"].value;
var returnText = "" + inputText;
//-- remove BR tags and replace them with line break
returnText=returnText.replace[/
/gi, "\n"];
returnText=returnText.replace[//gi, "\n"];
returnText=returnText.replace[//gi, "\n"];
//-- remove P and A tags but preserve what's inside of them
returnText=returnText.replace[//gi, "\n"];
returnText=returnText.replace[/[.*?]/gi, " $2 [$1]"];
//-- remove all inside SCRIPT and STYLE tags
returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""];
returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""];
//-- remove all else
returnText=returnText.replace[//g, ""];
//-- get rid of more than 2 multiple line breaks:
returnText=returnText.replace[/[?:[?:\r\n|\r|\n]\s*]{2,}/gim, "\n\n"];
//-- get rid of more than 2 spaces:
returnText = returnText.replace[/ +[?= ]/g,''];
//-- get rid of html-encoded characters:
returnText=returnText.replace[/ /gi," "];
returnText=returnText.replace[/&/gi,"&"];
returnText=returnText.replace[/"/gi,'"'];
returnText=returnText.replace[/</gi,''];
//-- return
document.getElementById["output"].value = returnText;
}
7 rất tiện dụng. Chỉ cần sử dụng nó để có được nội dung của một phần tử HTML, trừ tất cả các thẻ.3] Nội dung phân tích cú pháp & văn bản của DOM
3-DOM-parser.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 những điều trên. Vẫn đang sử dụng
function convertHtmlToText[] {
var inputText = document.getElementById["input"].value;
var returnText = "" + inputText;
//-- remove BR tags and replace them with line break
returnText=returnText.replace[/
/gi, "\n"];
returnText=returnText.replace[//gi, "\n"];
returnText=returnText.replace[//gi, "\n"];
//-- remove P and A tags but preserve what's inside of them
returnText=returnText.replace[//gi, "\n"];
returnText=returnText.replace[/[.*?]/gi, " $2 [$1]"];
//-- remove all inside SCRIPT and STYLE tags
returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""];
returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""];
//-- remove all else
returnText=returnText.replace[//g, ""];
//-- get rid of more than 2 multiple line breaks:
returnText=returnText.replace[/[?:[?:\r\n|\r|\n]\s*]{2,}/gim, "\n\n"];
//-- get rid of more than 2 spaces:
returnText = returnText.replace[/ +[?= ]/g,''];
//-- get rid of html-encoded characters:
returnText=returnText.replace[/ /gi," "];
returnText=returnText.replace[/&/gi,"&"];
returnText=returnText.replace[/"/gi,'"'];
returnText=returnText.replace[/</gi,''];
//-- return
document.getElementById["output"].value = returnText;
}
8, nhưng chúng tôi đang sử dụng function convertHtmlToText[] {
var inputText = document.getElementById["input"].value;
var returnText = "" + inputText;
//-- remove BR tags and replace them with line break
returnText=returnText.replace[/
/gi, "\n"];
returnText=returnText.replace[//gi, "\n"];
returnText=returnText.replace[//gi, "\n"];
//-- remove P and A tags but preserve what's inside of them
returnText=returnText.replace[//gi, "\n"];
returnText=returnText.replace[/[.*?]/gi, " $2 [$1]"];
//-- remove all inside SCRIPT and STYLE tags
returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""];
returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""];
//-- remove all else
returnText=returnText.replace[//g, ""];
//-- get rid of more than 2 multiple line breaks:
returnText=returnText.replace[/[?:[?:\r\n|\r|\n]\s*]{2,}/gim, "\n\n"];
//-- get rid of more than 2 spaces:
returnText = returnText.replace[/ +[?= ]/g,''];
//-- get rid of html-encoded characters:
returnText=returnText.replace[/ /gi," "];
returnText=returnText.replace[/&/gi,"&"];
returnText=returnText.replace[/"/gi,'"'];
returnText=returnText.replace[/</gi,''];
//-- return
document.getElementById["output"].value = returnText;
}
9 thay vì
CONVERT
0. Vâng, nó làm cho một sự khác biệt. Thêm về điều đó trong phần bổ sung dưới đây.4] Sử dụng thư viện HTML dải
4-string-strip.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, đối với các bạn đang ở trên NodeJS -
function convertHtmlToText[] {
var inputText = document.getElementById["input"].value;
var returnText = "" + inputText;
//-- remove BR tags and replace them with line break
returnText=returnText.replace[/
/gi, "\n"];
returnText=returnText.replace[//gi, "\n"];
returnText=returnText.replace[//gi, "\n"];
//-- remove P and A tags but preserve what's inside of them
returnText=returnText.replace[//gi, "\n"];
returnText=returnText.replace[/[.*?]/gi, " $2 [$1]"];
//-- remove all inside SCRIPT and STYLE tags
returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""];
returnText=returnText.replace[/[\w\W]{1,}[.*?][\w\W]{1,}/gi, ""];
//-- remove all else
returnText=returnText.replace[//g, ""];
//-- get rid of more than 2 multiple line breaks:
returnText=returnText.replace[/[?:[?:\r\n|\r|\n]\s*]{2,}/gim, "\n\n"];
//-- get rid of more than 2 spaces:
returnText = returnText.replace[/ +[?= ]/g,''];
//-- get rid of html-encoded characters:
returnText=returnText.replace[/ /gi," "];
returnText=returnText.replace[/&/gi,"&"];
returnText=returnText.replace[/"/gi,'"'];
returnText=returnText.replace[/</gi,''];
//-- return
document.getElementById["output"].value = returnText;
}
8 ở trên sẽ không hoạt động vì thực sự không có trình duyệt. Thư viện chuỗi chuỗi HTML là một giải pháp thay thế mà bạn có thể xem xét bằng cách sử dụng - vâng, nó cũng hoạt động trên phiên bản web của Web.Thêm - cái nào nhanh hơn?
extra-speed.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"];
Đối với các bạn, những người quan tâm đến việc sử dụng giải pháp hiệu quả nhất - gương gương trên tường, đó là loại nhanh nhất trong số họ?
Không có gì đáng ngạc nhiên, Regex chiến thắng mà không cần phải phân tích bất cứ điều gì. Trình phân tích cú pháp DOM nhanh hơn so với việc tạo ra một yếu tố giả và thư viện không hiệu quả.
Liên kết & Tài liệu tham khảo
- Node.textContent - mdn
- Tạo phần tử - MDN
- DOM phân tích cú pháp - MDN
- Cách loại bỏ thẻ HTML - GeekSforGeeks
Bảng gian lận infographic
KẾT THÚC
Cảm ơn bạn đã đọc, và chúng tôi đã đi đến cùng. 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, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc!