Nhiều ứng dụng và website cho phép người dùng tìm kiếm một cụm từ cụ thể. Để đẩy nhanh quá trính, cung cấp trải nghiệm tốt hơn, và giúp người dùng thấy được nội dụng họ đang tìm kiếm, bạn có thể highlight những cụm từ được tìm kiếm.
Sâu đây là 10 JQuery plugin dùng để highlight text bạn có thể tham khảo.
1. mark
Dùng để highlight các cụm từ được tìm kiếm, được viết bằng ES6, đã qua quy trình giám sát chất lượng code và hàng chục unit test trên nhiều trình duyệt. Được phát triển để xử lý hầu hết các trường hợp sử dụng, bao gồm tất cả tùy chỉnh từ các plugin bên dưới và hơn thế nữa (dấu phụ, từ đồng nghĩa, iframes,..)
Demo: mark demo by SitePoint (@SitePoint) on CodePen.
Website
Source code
2. highlight
Plugin highlight text đơn giản gọn nhẹ, đây là nên tảng của nhiều plugin tương tự ra đời sau này. Điểm mạnh của plugin là kích thước nhỏ gọn (1.4KB) vì không cho phép tùy biến.
Demo: highlight demo by SitePoint (@SitePoint) on CodePen.
Website
Source code
3. jquery.highlight
Một plugin con từ highlight (#2 bên trên) thêm tùy chọn lựa chọn một custom element và class name, cùng tùy chọn caseSensitive và wordsOnly. Thật không may, plugin này không được cập nhật (lần cuỗi cũng đã từ 2010 rồi) và có lỗi disable, vì vậy bạn hãy cẩn thận khi dùng plugin này..
Demo: jquery.highlight by SitePoint (@SitePoint) on CodePen.
Website
Source code
4. jQuery.highlightRegex
Một plugin nữa dựa theo highlight (#2 bên trên) để highlight custom regular expressions. Giống jquery.highlight (#3 bên trên), plugin có tùy chọn cho phép chỉ ra custom element và class name. Bạn có thể thêm thử công một số tùy chọn khác vào custom regular expression – như “i”-flag để bỏ qua uppercase và lowercase.
Demo: jQuery.highlightRegex by SitePoint (@SitePoint) on CodePen.
Website
Source code
5. highlight_words
Một plugin JQuery đơn giản không có tùy chỉnh, giống highlight (#2 bên trên). Bạn nên chú ý, plguin không có chức năng loại bỏ highlight, và không cho phép tìm kiếm trong nested children. Tuy nhiên, plugin này là cơ sở phát triển thêm nhiều tính năng, mặc dù bản thân nó không có thông tin bản quyền.
Demo: highlight_words by SitePoint (@SitePoint) on CodePen.
Source code
6. jcOnPageFilter
Plugin này cho phép bạn lọc danh sách với từ khóa và highlight kết quả. Nó có tùy chọn kích hoạt chế độ tìm kiếm case sensitive, nhưng cũng không chứa thông tin bản quyền.
Demo: jcOnPageFilter by SitePoint (@SitePoint) on CodePen.
Source code
7. SearchHighlight
Một plugin nữa cho phép bạn tạo custom highlight class; a class suffix; tùy chỉnh exact, để tìm: kết quả chính xác và highlight parameter từ search endgine (hiện không dùng được nứa”).
Plugin được viết năm 2006, và đã lâu chưa cập nhật, và không có thông tin bản quyền.
Demo: SearchHighlight by SitePoint (@SitePoint) on CodePen.
8. jquery-highlighter
Plugin này thực thi các CSS animation setting cần thiết. Tất nhiên, bạn cũng có thể tự viết CSS riêng nếu thích.
Demo: jquery-highlighter by SitePoint (@SitePoint) on CodePen.
Source code
9. TextHighlighter
Với plugin này, bạn có thể highlight text được chon với màu tùy thích hoặc chỉ theo dõi text selection từ người dùng. Plugin này cũng đã ngưng hỗ trợ.
Demo: TextHighlighter by SitePoint (@SitePoint) on CodePen.
Website
Source code
10. jQuery highlightTextarea
textarea elements không thể render HTML , plugin này cho phép các bạn highlight text trong textarea elements. Plugin có nhiều tuyfchinhr như caseSensitive và color, và được xây dựng trên một số unit test, nhưng vẫn còn đọng lại nhiều lỗi. plugin không có chức năng bỏ highlight.
Demo: jQuery highlightTextarea by SitePoint (@SitePoint) on CodePen.
Lời kết
Bên trên là danh sách top ten jQuery plugin dùng cho highlight lext. Nếu bạn đã dùng qua các plugin trên, hoặc biết một số plugin hay khác, hãy comment bên dưới nhé!
Techtalk via sitepoint
