Thêm đánh dấu từ khóa tìm kiếm vào bất kỳ trang web nào với Mark.js

Hầu hết các trình duyệt có Chức năng CTRL + F để tìm kiếm và tìm thấy bất cứ điều gì người dùng đang tìm kiếm. Nhưng, tính năng này không được hỗ trợ trên thiết bị di động và nó không hoạt động tốt khi sử dụng văn bản động.

May mắn thay, có Mark.js, một plugin JavaScript miễn phí có thêm một tính năng tìm kiếm nổi bật đến bất kỳ trang nào một cách dễ dàng.

Theo mặc định, nó hoạt động như một plugin vanilla JS nhưng cũng có thể chạy trên đầu trang của jQuery. Đây là một dự án hoàn toàn nguồn mở, vì vậy bạn có thể sử dụng nó trên bất kỳ trang web thương mại nào hoặc nếu không.

Nó hoạt động giống như bất kỳ tính năng tìm kiếm trình duyệt nào, ngoại trừ nó đi kèm với các tính năng bổ sung. Bạn có thể thêm bộ lọc tùy chỉnh của riêng bạn và tìm kiếm các từ dựa trên biểu thức chính quy, từ đồng nghĩa cụ thể, và thậm chí trong yếu tố trang động chẳng hạn như iframe.

Để bắt đầu, chỉ cần tải xuống tệp Mark.js từ GitHub hoặc lưu trữ tệp thông qua CDN Để tiết kiệm thời gian.

Bạn nên chạy chức năng này kết nối với một trường đầu vào trên trang. Bằng cách này, người dùng có thể nhập cụm từ tìm kiếm và nhận phản hồi ngay lập tức thông qua văn bản được tô sáng.

Đây là một đoạn trích mẫu từ trang demo:

 $ (". bối cảnh"). mark (từ khóa [, tùy chọn]); 

Các .bối cảnh mục tiêu lớp bất cứ nơi nào chức năng nên tìm kiếm các thuật ngữ. Bạn có thể sử dụng HTML mặc định thành phần nếu bạn đang cố gắng tìm kiếm toàn bộ trang, hoặc bạn có thể vượt qua nhiều yếu tố chẳng hạn như các widget hoặc iframe khác nhau.

Sau đó, bên trong dấu() chức năng bạn vượt qua từ khóa, cùng với các tùy chọn (nếu bạn muốn).

Nếu bạn cho phép người dùng gõ từ khóa thì bạn có thể tự động cập nhật chức năng với một từ khóa mới sau mỗi lần nhấn phím. Thậm chí còn có một chức năng cụ thể để nhắm mục tiêu sự kiện này.

Mark.js hoạt động với tất cả các trình duyệt chính, bao gồm Chrome, Firefox, Opera (v12 +) và Internet Explorer (9+). Thật dễ dàng để thiết lập nếu bạn theo dõi tài liệu và sử dụng các tệp mới nhất.

Nhưng, nếu bạn muốn xem Mark.js đang hoạt động nhìn trộm vào dưới đây sử dụng bản demo jQuery rất cơ bản để tìm kiếm một vài đoạn của Lorem Ipsum.