icon share facebookicon share facebook

Hướng dẫn khắc phục lỗi dính thẻ HTML khi cắt văn bản trong dotNET

Thứ ba, 2016-17-5 9:04:35 GM+7
Trong thiết kế website sẽ có lúc bạn muốn lấy ra một đoạn nội dung ngắn để mô tả cho bài viết của mình, nhưng nếu bài viết đó có chứa thẻ html sẽ khiến đoạn dữ liệu lấy ra bị lỗi khi cắt chuỗi.
Trong thiết kế website, sẽ có đôi lúc bạn chỉ cần lấy ra một vài chữ từ một nội dung dài để minh họa cho một bài viết nào đó. Mọi việc sẽ rất dễ dàng nếu nội dung đó là văn bản thuần, nghĩa là nội dung đó không có chứa các thẻ HTML, bạn sẽ cắt chuỗi và hiển thị ra rất dễ dàng. Nhưng ngược lại, nếu nội dung bạn cần cắt có chứa thẻ HTML sẽ khiến phần nội dung sau khi bạn cắt ra không như ý, hoặc bị lỗi,… Vì thế, trong bài viết này ACTechz sẽ hướng dẫn bạn cách khắc phục lỗi dính thẻ HTML khi cắt chuỗi trong dotNET.
 

Lỗi thường gặp ở một số website khi cắt chuỗi nhưng vẫn còn dính thẻ html. Photo by ACTechz.

Thẻ HTML là gì?

Hiểu đơn giản, thẻ HTML là các thẻ có ký tự bắt đầu là < và kí tự kết thức là >. Ví dụ: thẻ <html>, <head>, <body>,… 

Xóa bỏ các thẻ HTML trước khi cắt chuỗi

Việc xóa bỏ các thẻ HTML trong văn bản trước khi cắt chuỗi là rất hữu ích, việc làm này sẽ giúp văn bản trở nên thuần túy và sẽ hiển thị tốt sau khi cắt chuỗi. Để làm việc này, dotNET hỗ trợ chúng ta một hàm để thực hiện đó là hàm Regex. Và đây là cách thực hiện:
 
Đầu tiên, bạn hãy tạo một class riêng biệt (ở đây tôi đặt tên class là HtmlRemove).
 

Tạo class HTMLRemove
 
Trong class này, tôi viết đoạn code sau:
 
using System;
using System.Text.RegularExpressions; //khai báo thư viện chứa hàm Regex
 
/// <summary>
/// Phương thức xóa thẻ HTML khỏi đoạn text
/// </summary>
public static class HtmlRemove
{
    #region Phương-thức-đơn-giản
    public static string StripTagsRegex(string source)
    {
       return Regex.Replace(source, "<.*?>", string.Empty);
    }
   #endregion
    
   #region Phương-thức-nâng-cao
    static Regex _htmlRegex = new Regex("<.*?>", RegexOptions.Compiled);
 
    public static string StripTagsRegexCompiled(string source)
    {
       return _htmlRegex.Replace(source, string.Empty);
    }
 
    public static string StripTagsCharArray(string source)
    {
      char[] array = new char[source.Length];
      int arrayIndex = 0;
      bool inside = false;
 
     for (int i = 0; i < source.Length; i++)
     {
        char let = source[i];
        if (let == '<')
        {
          inside = true;
          continue;
        }
        if (let == '>')
        {
          inside = false;
          continue;
        }
        if (!inside)
        {
          array[arrayIndex] = let;
          arrayIndex++;
        }
     }
      return new string(array, 0, arrayIndex);
    }
   #endregion
}
 
Ở đây, tôi có 2 phương thức đơn giản và nâng cao, bạn có thể chọn một trong hai phương thức trên, kết quả cho ra đều như nhau, nhưng tốc độ xử lý sẽ khác nhau. Ví dụ, tôi thực thi đoạn HTML
 
<p>The <b>dog</b> is <i>cute</i>.</p>
 
Kết quả khi sử dụng 3 hàm đều cho ra kết quả là:
 
The dog is cute
 
Nhưng, tốc độ thực thi lại khác nhau, cụ thể:
Hàm HtmlRemoval.StripTagsRegex là 2404 ms
Hàm HtmlRemoval.StripTagsRegexCompiled là 1366 ms
Hàm HtmlRemoval.StripTagsCharArray là 287 ms [nhanh nhất]
 
Bạn có thể demo thử và xem kết quả tại đây.
 
Sau khi đã xóa toàn bộ thẻ HTML trong văn bản cần lấy, việc tiếp theo là bạn chỉ cần dùng hàm Substring(int starIndex, int lenght) để lấy ra văn bản ngắn, trong đó starIndex là kí tự bắt đầu cần lấy và lenght là số kí tự cần lấy.
 
Như vậy, bài viết trên đây ACTechz đã hướng dẫn các bạn làm thế nào để xóa bỏ các thẻ HTML trong văn bản, cách khắc phục lỗi dính thẻ HTML khi cắt văn bản đơn giản nhất. Chúc các bạn thành công.
 
Minh Chiến

Minh Chiến

ACTechz's Dev. Đam mê công nghệ, làm web, thiết kế và cả nhiếp ảnh nữa.

Có thể bạn quan tâm

Bài viết nổi bật

Bạn đã sẵn sàng để đưa việc kinh doanh lên internet?

Chúng tôi luôn sẵn sàng trở thành đối tác đáng tin cậy.

Khách hàng VIP trên hệ thống ACTechz

  • An Chi Phương giấy phép vệ sinh an toàn thực phẩm
  • Quà tặng Sao Việt
Bản quyền của ACTechz © 2016. Bảo lưu mọi quyền. Ghi rõ nguồn 'actechz.com' khi sử dụng lại thông tin từ website này.
iconiconicon
Chia sẻ lên mạng xã hội