Share Đánh dấu từ khoá trong nội dung với thư viện mark.js

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Các bạn đang cần xây dựng chức năng đánh dấu các từ khoá tìm được trong nội dung thì các bạn có thể sử dụng thư viện mark.js. Thư viện mark.js sẽ giúp các bạn đánh dấu các từ khoá được khai báo trong một vùng nội dung chỉ định nào đó một cách dễ dàng. Thư viện mark.js còn hỗ trợ các từ khoá dưới dạng biểu thức chính quy và cho phép lập trình viên tuỳ biến CSS cho từ khoá được đánh dấu nên các bạn hoàn toàn có thể thiết kế theo phong cách riêng của mình.

Hiện nay cũng có khá nhiều thư viện đánh dấu từ khoá tương tự như mark.js nhưng theo đánh giá của tôi thì thư viện mark.js được phát triển tốt hơn, nhiều tính năng tuỳ biến hơn cũng như việc sử dụng vô cùng đơn giản.

Các bạn có thể tải thư viện mark.js tại địa chỉ https://github.com/julmot/mark.js/tree/master/dist và tích hợp vào website với dòng mã lệnh HTML như sau:
HTML:
<script src="path/to/mark.min.js"></script>
Bây giờ, các bạn cài đặt thư viện mark.js như ví dụ sau:
JavaScript:
//Khởi tạo đối tượng mark
var mark = new Mark('.mark');

//Khai báo từ khoá cần đánh dấu
mark.mark('Gextend');
Các bạn có thể tuỳ chỉnh kiểu mẫu của từ khoá được đánh dấu bằng CSS như ví dụ sau:
CSS:
mark {
    color: #fff;
    background: #0062af;
}
Các bạn có thể tìm hiểu thêm về thư viện mark.js tại địa chỉ https://markjs.io.
 
Back
Top