Làm cách nào để xóa thẻ html khỏi văn bản trong javascript?

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

1. Sử dụng biểu thức chính quy – var txt = HTML-STRING.replace(/(<([^>]+)>)/gi, "");
2. 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;
3. 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;
4. 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

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 : https://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ụ

• // (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);

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

  0

Để 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

Làm cách nào để xóa thẻ HTML khỏi văn bản trong js?

Làm cách nào để xóa thẻ HTML khỏi văn bản?

Làm cách nào để xóa HTML bằng JavaScript?

Làm cách nào để chuyển đổi văn bản HTML thành văn bản bình thường trong JavaScript?