Bộ Chuyển Đổi HTML sang Văn Bản

Chuyển HTML sang văn bản thực sự làm gì

Các trang web, email và bản xuất từ CMS không phải là văn bản thuần. Chúng là HTML: một cây các thẻ như p, div, span, a và strong bọc quanh những từ ngữ mà bạn thực sự quan tâm. Khi bạn sao chép mã nguồn đó hoặc dán một đoạn nội dung định dạng phong phú, bạn kéo theo cả các kiểu nội tuyến, các thuộc tính theo dõi và đánh dấu cấu trúc vốn gây vướng víu ngay khoảnh khắc bạn muốn riêng phần nội dung dễ đọc. Việc chuyển HTML sang văn bản đi dọc cái cây đó và chỉ giữ lại những từ nhìn thấy được, vứt bỏ mọi thẻ và thuộc tính.

Mục tiêu không chỉ là xóa các dấu ngoặc nhọn. Một phép tìm-và-thay-thế ngây thơ với các thẻ sẽ dồn các đoạn văn dính vào nhau và biến một bài viết gọn gàng thành một bức tường liền mạch. Một phép chuyển đổi đúng đắn coi các phần tử cấp khối như đoạn văn, tiêu đề và mục danh sách là các ranh giới, chèn các dấu xuống dòng để kết quả đọc theo đúng trình tự hợp lý như một con người sẽ đọc, trong khi các phần tử nội tuyến như chữ đậm và in nghiêng chỉ đơn giản biến mất và để lại phần văn bản của chúng.

Bạn giữ được gì và mất gì

Theo thiết kế, văn bản thuần không thể chứa định dạng trực quan. Chữ đậm, in nghiêng, cỡ chữ, màu sắc và bố cục CSS đều bị bỏ vì không có chỗ nào cho chúng tồn tại trong một tệp văn bản. Các bảng sụp xuống thành những dòng nối tiếp nhau, và cấu trúc cột chính xác không được giữ lại. Điều này là dự kiến: bạn đang đánh đổi phần trình bày lấy tính khả chuyển.

Liên kết và hình ảnh là vùng trung gian thú vị. Bật Giữ Nguyên Liên Kết để hiển thị một liên kết dưới dạng [text](url) sao cho đích đến vẫn sống sót ở một dạng dễ đọc, và bật Bao Gồm Văn Bản Alt của Hình Ảnh để giữ thuộc tính alt mô tả thay vì âm thầm bỏ ảnh đi. Nếu bạn muốn một bản đọc sạch hơn, hãy tắt chúng đi, hoặc dùng Bỏ Qua Hình Ảnh và Bỏ Qua Thẻ HR để loại bỏ hoàn toàn các chỗ giữ chỗ và các đường kẻ ngang.

Một ví dụ cụ thể

Giả sử bạn dán đoạn này: một đoạn văn ghi Visit our shop trong đó shop là một liên kết trỏ tới example.com, theo sau là một đoạn văn thứ hai chứa thực thể Tom & Jerry. Với Giữ Nguyên Liên Kết và Giải Mã Thực Thể HTML được bật, kết quả trở thành hai dòng sạch sẽ: Visit our [shop](https://example.com) ở dòng thứ nhất và Tom & Jerry ở dòng thứ hai. Các thẻ p đã trở thành dấu xuống dòng, liên kết được viết lại ở dạng ngoặc-vuông-và-ngoặc-đơn, còn & được giải mã trở lại thành một dấu và theo nghĩa đen.

Vì sao thực thể HTML quan trọng

HTML thoát một số ký tự nhất định để trình duyệt không nhầm chúng thành đánh dấu. Một dấu và được viết &amp;, một dấu nhỏ hơn là &lt;, một khoảng trắng không ngắt là &nbsp;, còn các dấu nháy cong thường xuất hiện dưới dạng &#8220; và &#8221;. Nếu bạn bỏ qua việc giải mã, những chuỗi thô đó rò rỉ vào văn bản của bạn và trông như bị lỗi. Hãy bật Giải Mã Thực Thể HTML và chúng được chuyển trở lại thành các ký tự thật mà chúng đại diện: &, <, một khoảng trắng bình thường và các dấu nháy đúng đắn. Thiết lập duy nhất này là cách sửa phổ biến nhất cho kết quả trông gần như đúng nhưng lại rải rác những mã dấu và lạc lõng.

Kiểm soát dấu xuống dòng và ngắt dòng

Hai thiết lập định hình cách kết quả được trình bày. Giữ Nguyên Ngắt Dòng giữ lại các dấu xuống dòng được ngụ ý bởi các phần tử khối nên các đoạn văn vẫn được tách bạch, trong khi Giữ Nguyên Khoảng Trắng giữ lại các chuỗi dấu cách và phần thụt lề mà HTML thường gộp lại, vốn hữu ích khi khoảng cách ban đầu mang ý nghĩa, chẳng hạn trong mã hoặc các bố cục ASCII.

Ngắt Dòng Tại đặt số ký tự tối đa mỗi dòng và xếp lại dòng cho các đoạn văn dài để vừa khít, vốn tiện khi dán vào một cửa sổ dòng lệnh, một email rộng cố định, hay một tệp README dạng văn bản thuần. Hãy đặt nó thành 0 để tắt hoàn toàn việc ngắt dòng sao cho mỗi đoạn văn nằm trên một dòng dài duy nhất, sẵn sàng cho một đích đến tự lo việc ngắt dòng của riêng nó.

Các tình huống sử dụng thực tế

Hãy dùng đến công cụ này mỗi khi nội dung định dạng phong phú cần trở thành văn bản trung tính. Các trường hợp phổ biến bao gồm lấy phần nội dung sạch ra khỏi một trang web đã xuất bản để tái sử dụng hoặc trích dẫn, làm sạch một bản xuất từ CMS hoặc bản tin trước khi nhập nó vào nơi khác, rút phần thân dễ đọc ra khỏi một email HTML, chuẩn bị nội dung cho việc đếm từ hoặc kiểm tra độ dễ đọc, và đưa văn xuôi sạch vào một công cụ dịch hoặc một script vốn mong đợi dữ liệu đầu vào thuần chứ không phải các thẻ.

Nó cũng là một cách kiểm tra nhanh trong quá trình phát triển. Chuyển một mẫu đã hiển thị thành văn bản sẽ để lộ đúng trình tự đọc thực tế và phơi bày nội dung bị CSS ẩn đi về mặt trực quan nhưng vẫn hiện diện trong đánh dấu, điều có thể quan trọng cho việc đánh giá khả năng tiếp cận và SEO.

Những lỗi thường gặp cần tránh

Cái bẫy lớn nhất là kỳ vọng bố cục sẽ sống sót. Nếu bạn cần giữ lại cấu trúc bảng, hệ phân cấp gạch đầu dòng, hay phần tạo kiểu, thì văn bản thuần là đích đến sai. Hãy chuyển sang Markdown hoặc giữ nguyên HTML thay vào đó. Một cạm bẫy thứ hai là quên giải mã các thực thể rồi tự hỏi vì sao kết quả lại chứa &amp; ở khắp nơi. Cuối cùng, hãy nhớ rằng việc chuyển đổi chỉ phản ánh những gì có trong đoạn đánh dấu mà bạn dán: nếu một trang dựng nội dung của nó bằng JavaScript sau khi tải, thì phần HTML thô bạn sao chép từ View Source có thể gần như trống rỗng, nên hãy sao chép phần DOM đã hiển thị thay vào đó.