Hello,

Sign in to find your next job.

Blog IT

Jquery: 10 plugin dùng cho highlight text

Jquery: 10 plugin dùng cho highlight text

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 caseSensitivewordsOnly. 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ư caseSensitivecolor, 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

Nguồn: Techtalk.vn

Similar blogs

Hot Blogs