Trong khi lập trình bằng JavaScript, chúng ta thường muốn viết các mã phức tạp, nơi rất có khả năng thêm thẻ “html” vào giá trị chuỗi trong trường hợp nhập nhầm tiêu đề hoặc đoạn văn. Chẳng hạn, thẻ kết thúc của HTML hoặc phần tử nội dung sẽ bị xóa nếu HTML hoặc phần tử nội dung không được theo sau bởi một nhận xét. Bạn không biết cách tách các thẻ HTML khỏi một chuỗi cụ thể?

Hướng dẫn này sẽ thảo luận về các phương pháp để Tách các Thẻ HTML khỏi một Chuỗi cụ thể trong JavaScript

Làm cách nào để tách các thẻ HTML khỏi một chuỗi trong JavaScript?

Để tách các thẻ HTML bằng JavaScript, có thể sử dụng các phương pháp sau

• phương pháp “thay thế ALL []”
• Thuộc tính “Nội dung văn bản”
• Giao diện “DOMParser”
• gói “chuỗi-dải-HTML”

Lần lượt đi qua các phương pháp được đề cập

Phương pháp 1. Tách các thẻ HTML khỏi chuỗi trong JavaScript bằng phương thức replaceAll[]

Phương thức “replaceAll[]” trả về một chuỗi mới khi tất cả các mẫu phù hợp được thay thế bằng mẫu thay thế đã chỉ định. Phương pháp này có thể được thực hiện để thay thế tất cả các thẻ HTML trong một chuỗi bằng chuỗi rỗng

cú pháp

replaceAll [ mẫu , thay thế ]

Trong cú pháp đã cho, "mẫu" đề cập đến chuỗi hoặc một đối tượng và "thay thế" có thể là một hàm hoặc một chuỗi

Ví dụ dưới đây giải thích khái niệm rõ ràng

Ví dụ

In the following example, include a string value including HTML tags placed in the “

” tag and display the unstripped string value:

giá trị chuỗi . let unStripped = ";
console.log["Unstripped html tags:", unStripped]

Bây giờ, hãy áp dụng phương thức “replaceAll[]” để thay thế các thẻ HTML bằng chuỗi rỗng được chỉ định là ” “. “gi” ở đây sẽ tìm kiếm tất cả các lần xuất hiện của biểu thức chính quy trong chuỗi được cung cấp và “toán tử regex” sẽ bắt đầu tìm kiếm các giá trị bắt đầu từ “/” và kết thúc tại “/” tương ứng

let replace = unStripped. replaceAll[/, ""];

Cuối cùng, hiển thị giá trị chuỗi tương ứng mà không cần bất kỳ thẻ HTML nào

bảng điều khiển. log["Thẻ html bị tước. ", thay thế ];

Đầu ra tương ứng sẽ như sau

Phương pháp 2. Tách các thẻ HTML khỏi một chuỗi trong JavaScript bằng thuộc tính nội dung văn bản

Thuộc tính “textContent” đặt nội dung văn bản của phần tử được chỉ định. Phương thức này có thể được sử dụng để trả về các phần tử văn bản từ chuỗi HTML đã cho

Ví dụ

Đầu tiên, lưu trữ một giá trị chuỗi chưa bị xóa và hiển thị nó như đã thảo luận trong phương pháp trước

let unStripped = ""< . "< . "< . "< . "< . "< . "< . "< . "< . "< . "< . "< . "< . "< . "< . "< . "< . "< . "< . "< . "< . "< . "< . "< . "< . "< . ;
console.log["Thẻ html không bị xóa. ", không bị tước ]

Tiếp theo, tạo một phần tử có tên là “div” bằng cách sử dụng “tài liệu. createElement[]” và gán cho phần tử đã tạo một giá trị chuỗi bao gồm các thẻ HTML

let div = . createElement["div"];
div.innerHTML= unStripped ;

Now, apply the textContent property to include text within the “” element. If the string contains elements, this method with textContent will return its content and strip the HTML tags using ” ” into an empty string and logging it on the console:

let text = div. nội dung văn bản . div. Văn bản bên trong . "";
bảng điều khiển. log["Thẻ html bị tước. ", văn bản ];

đầu ra

Phương pháp 3. Tách các thẻ HTML khỏi một chuỗi trong JavaScript bằng giao diện DOMParser

Giao diện “DOMParser” cung cấp chức năng phân tích mã nguồn HTML từ giá trị chuỗi được chỉ định thành DOM. Kỹ thuật này có thể được triển khai bằng cách phân tích cú pháp mã HTML theo cách sao cho khi một chuỗi chứa mã HTML được chuyển đến nó làm đối số, các thẻ HTML có thể bị loại bỏ bằng DOMParser và phương thức “parseFromString[]” của nó

cú pháp

DOMParser. parseFromString[ unStripped ]

Ở đây, phương thức “parseFromString[]” loại bỏ các thẻ HTML khỏi chuỗi “unStripped”

Ví dụ

Đầu tiên, tạo một hàm có tên là “stripTags[]” với “html” làm đối số của nó

Tiếp theo, áp dụng phương thức parseFromString[] để xóa các thẻ html khỏi biến được chỉ định có tên là “unStripped” đề cập đến giá trị chuỗi chưa bị xóa chứa trong đó và trả về nội dung văn bản của nó bằng thuộc tính “textContent”

chức năng thẻ dải [ html ]{
  const parseHTML= new DOMParser[].parseFromString[ unStripped , ' . ];
  return parseHTML.cơ thể . nội dung văn bản . '';
}

Bây giờ, hãy tạo một giá trị chuỗi cần xóa và hiển thị các giá trị chưa xóa và đã xóa trên bảng điều khiển và so sánh chúng

let unStripped = "" . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . " . ;
console.log["Thẻ html không bị xóa. ", unStripped ]
bảng điều khiển. log["Thẻ html bị tước. ", thẻ dải [ unStripped ]];

đầu ra

Phương pháp 4. Tách các thẻ HTML khỏi một chuỗi trong JavaScript bằng gói string-strip-HTML

The “string-strip-html” package is applied to strip HTML from a particular string and provides a “stringStripHtml[]” method that carries an HTML as an input. This method can be implemented in such a way that if the particular string includes the “” element, string-strip-html[] will remove it along with its content.

Ví dụ

In the first step, include a string-strip-html package in the “” tag:

tập lệnh >

Now, include a string value and refer it to the string value containing the “” element. This will result in removing the html tags from the provided string value:

const { stripHtml }= stringStripHtml;
  let htmlWithScriptElement= 'alert["Html Tags"];';
  let unStripped= `Html Tags ${htmlWithScriptElement}`;

Cuối cùng, ghi lại các giá trị chưa bị tước và bị tước và so sánh các giá trị chuỗi kết quả trong cả hai trường hợp

bảng điều khiển. log["Thẻ html không bị xóa. ", không bị sọc ]
bảng điều khiển. log["Thẻ html bị tước. ", stripHtml [ unStripped . .kết quả];

đầu ra

Chúng tôi đã thảo luận về tất cả các phương pháp đơn giản nhất để tách các thẻ html khỏi chuỗi trong JavaScript

Phần kết luận

Để tách các thẻ html khỏi chuỗi trong JavaScript, hãy áp dụng phương thức “replaceAll[]” để thay thế tất cả các thẻ html bằng một chuỗi trống, thuộc tính “Nội dung văn bản” để trả về các thành phần văn bản từ chuỗi HTML cụ thể, “DOMParser” . Hướng dẫn này hướng dẫn các phương pháp tách các thẻ html khỏi chuỗi trong JavaScript

Làm cách nào để xóa thẻ HTML trong nút js?

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

Làm cách nào để xóa các thẻ HTML?

Dải thẻ HTML là gì?